浏览器工作原理与实践（六）——浏览器网络

HTTP:超文本传输协议，用来在网络传递HTML超文本内容。

1. http基于TCP协议，客户端先根据IP地址，端口号和服务器建立TCP连接，建立过程TCP协议3次握手。
2. 建好之后，先发送一个GET请求行信息，获取数据。
3. 服务器接收请求，读取对应文件，并将数据以ASCII字符流返回给客户端。
4. 文档传完，断开连接。

HTTP1.1

TCP为了单连接而设计。

1. 改进持久连接：每进行一次HTTP通信，都要建立TCP连接、传输HTTP数据和断开TCP连接。由于单个页面中文件图片越来越多，每个都要这么多步骤，开销太大。持久连接：在一个TCP上可以传多个HTTP请求，只要浏览器或服务器没有明确断开，会一直保持TCP连接。
2. http管线化：持久连接虽能减少TCP的建立和断开次数，但需要等前面返回才能进行下一次。如果某个请求一直没有返回就会阻塞后面的所有请求，这就是队头阻塞问题。HTTP1.1尝试将多个HTTP请求整批提交给服务器，但服务器依然要按顺序返回请求。
3. 提供虚拟主机支持：之前每个域名都绑定的唯一IP地址，因此一个服务器只支持一个域名。但虚拟主机的发展，要在一台物理主机绑定多个虚拟主机，每个虚拟主机有自己的域名，都公用一个IP地址。HTTP1.1请求头加了Host表示当前域名地址，这样服务器就可以根据不同的 Host 值做不同的处理。为每个域名最多同时维护6个TCP持久连接，使用了CDN实现域名分片。
4. 客户端 Cookie、安全机制：服务器作处理头引入了cookie机制和安全机制。

HTTP1.1带宽的利用率不理想：

1. TCP慢启动：TCP连接建立后，发送数据是慢慢变快的，但一开始的html,css,js文件耗费的时间就长，推迟了首次渲染
2. 同时开启多条TCP连接，共同竞争固定带宽，带宽不足时会减慢发送或接收数据，有可能影响关键资源的下载
3. 队头阻塞问题

HTTP2多路复用

HTTP2一个域名只使用一个TCP长连接来传输数据，下载过程只需要一次慢启动，也避免多个TCP竞争带宽。

1. 浏览器准备数据(请求头，请求行)
2. 经过二进制分帧层处理后，转换成一个个带有请求ID编号的帧，通过协议栈发给服务器
3. 服务器接收后，将有相同ID的帧合为一条完整的请求信息
4. 服务器处理该请求，将处理的响应行，响应头和响应体分别发送二进制分帧层
5. 同样，二进制分帧层将响应数据转换为一个个带有请求ID编号的帧，经过协议栈发给浏览器
6. 浏览器收到响应后，根据ID编号将帧的数据提交给对应请求

其它特性：

1. 可以设置请求的优先级，在发送请求时，标上该请求的优先级，这样服务器接收到请求之后，会优先处理优先级高的请求。
2. 服务器推送，除了设置优先级外，还可以提前将数据推送到浏览器。如当用户请求一个 HTML 页面之后，服务器知道该 HTML 页面会引用几个重要的 JavaScript 文件和 CSS 文件，那么在接收到 HTML 请求之后，附带将要使用的 CSS 文件和 JavaScript 文件一并发送给浏览器，这样当浏览器解析完 HTML 文件之后，就能直接拿到需要的 CSS 文件和 JavaScript 文件，这对首次打开页面的速度起到了至关重要的作用。
3. 头部压缩，请求头和响应头压缩，提升传输效率

HTTP2缺陷：
TCP队头阻塞，HTTP2 依然是基于 TCP 协议的，而 TCP 最初就是为了单连接而设计的。你可以把 TCP 连接看成是两台计算机之前的一个虚拟管道，计算机的一端将要传输的数据按照顺序放入管道，最终数据会以相同的顺序出现在管道的另外一头。如果在数据传输的过程中，有一个数据因为网络故障或者其他原因而丢包了，那么整个 TCP 的连接就会处于暂停状态，需要等待丢失的数据包被重新传输过来。在 TCP 传输过程中，由于单个数据包的丢失而造成的阻塞称为 TCP 上的队头阻塞。
TCP 建立连接的延时：TCP 的握手过程

HTTP3

HTTP3基于UDP协议，实现了类似于TCP的多路数据流，传输可靠性等功能，叫QUIC协议=TCP+HTTP2多路复用+TLS加密

1. 实现了类似 TCP 的流量控制、传输可靠性的功能。
2. 集成了 TLS 加密功能。最重要的一点是减少了握手所花费的 RTT 个数。
3. 实现了 HTTP/2 中的多路复用功能。
4. 实现了快速握手功能。

跨域

2个url协议、域名和端口都相同，称为url同源。
浏览器默认2个相同的源之间是可以相互访问资源和操作DOM的。不同源有安全策略的制约。

1. DOM层面：限制了不同源的JS对当前DOM对象的读和写的操作。同源可以通过window.opener来控制页面中DOM
2. 数据层面：限制了不同源的站点读取当前站点的cookie，indexDB，localStorage等数据。
3. 网络层面：限制了XMLHttpRequest将站点数据发给不同源的站点

• 页面可以嵌入第三方资源，CSP让服务器决定浏览器能加哪些资源，让服务器决定浏览器能否执行内嵌JS，减少xcss
• 跨域资源共享和跨文档消息机制，引入了CORS跨域资源共享，进行跨域访问
• 跨文档消息机制，window.postMessage来和不同源DOM进行通信