浏览器工作原理与实践(六)——浏览器网络

Waxiangyu

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 值做不同的处理。为每个域名最多同时维护6TCP持久连接,使用了CDN实现域名分片。
  4. 客户端 Cookie、安全机制:服务器作处理头引入了cookie机制和安全机制。

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

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

HTTP2多路复用

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

  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加密
image.png

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

跨域

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

  1. DOM层面:限制了不同源的JS对当前DOM对象的读和写的操作。同源可以通过window.opener来控制页面中DOM
  2. 数据层面:限制了不同源的站点读取当前站点的cookieindexDBlocalStorage等数据。
  3. 网络层面:限制了XMLHttpRequest将站点数据发给不同源的站点
  • 页面可以嵌入第三方资源,CSP让服务器决定浏览器能加哪些资源,让服务器决定浏览器能否执行内嵌JS,减少xcss
  • 跨域资源共享和跨文档消息机制,引入了CORS跨域资源共享,进行跨域访问
  • 跨文档消息机制,window.postMessage来和不同源DOM进行通信
阅读 366

那就 javascript 吧
小白笔记,从一开始。
628 声望
28 粉丝
0 条评论
628 声望
28 粉丝
文章目录
宣传栏