浏览器工作原理【2】

DawninShadow 2019-11-20 AM 88℃ 0条

数据包的传输与解析

Chrome

众所周知,数据的传输依赖网络协议,而我们接触比较多的网络协议大概有以下几个

  • IP协议,处于网络层,定义了能够识别所有节点的逻辑地址(IP地址),声明了路由的实现方式和学习方式,网络层协议还规范了大数据包分解成小数据包的分段方式.
  • UDP,传输层协议,包含目标主机的端口号,用以标识数据包的归属程序,UDP传输没有重发机制,不能保证数据可靠性,单数传输速度快,多用于游戏,视频等领域
  • TCP,同为传输层协议,但是相较于UDP其具有面向连接,可靠,基于字节流传输等特性.对于丢包可以重传.还引入了数据包排序机制,可以把因文件过大而拆分出来发送的多个小数据包进行重新组装.
  • TCP的丢包重传就引入了很经典的一个前端考点,三次握手

    请输入图片描述

  1. 建立连接阶段。这个阶段是通过“三次握手”来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。所谓三次握手,是指在建立一个 TCP 连接时,客户端和服务器总共要发送三个数据包以确认连接的建立。
  2. 传输数据阶段。在该阶段,接收端需要对每个数据包进行确认操作,也就是接收端在接收到数据包之后,需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后,在规定时间内没有接收到接收端反馈的确认消息,则判断为数据包丢失,并触发发送端的重发机制。同样,一个大的文件在传输过程中会被拆分成很多小的数据包,这些数据包到达接收端后,接收端会按照 TCP 头中的序号为其排序,从而保证组成完整的数据。
  3. 断开连接阶段。数据传输完毕之后,就要终止连接了,涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。全双工需要分别关闭客户端到服务器以及服务器到客户端的链接,所以要有四次挥手
    TCP 为了保证数据传输的可靠性,牺牲了数据包的传输速度,因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。

HTTP协议,输入网址后发生了什么

  1. 浏览器构建请求行信息__GET /index.html HTTP1.1__
  2. 查找缓存,本地已经缓存的文件会直接获取,不走服务器
  3. 准备IP地址和端口,请求DNS服务器,返回域名对应的IP地址,这个操作也存在缓存
  4. 等待TCP队列,Chrome有一个极致,同域名最多可以建立6个TCP链接,如果同一个域名下有10个请求同时发送,则会有4个进入等待队列
  5. 建立TCP链接,三次握手
  6. 发送HTTP请求,建立了TCP链接后,浏览器就可以和服务器进行通信了.首先浏览器会向服务器发送请求行,包括方法,请求URI和HTTP版本协议
  7. 服务器处理HTTP请求,并且返回响应.
  8. 断开链接
  9. 响应数据类型处理,Content-Type 是 HTTP 头中一个非常重要的字段, 它告诉浏览器服务器返回的响应体数据是什么类型,然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。一般有以下几种
  • text/html 网页
  • application/octet-stream 字节流类型,一般按照下载类型处理
  1. 准备渲染进程,默认情况下,Chrome会为每个页面分配一个渲染进程,也就是说每打开一个新的页面就会配套创建一个新的渲染进程, 但是对于同源页面(根域名和协议相同)则会渲染到一个进程中去.
  2. 按照渲染的时间顺序,渲染过程可以分为几个子阶段: 构建DOM树 —> 样式计算 —> 布局阶段 —> 分层 —> 绘制 —> 分块 —> 光栅化 —> 合成.
  • 构建DOM树: 把HTML文档变成一个有层级包含关系的节点树
  • 样式计算: 渲染引擎吧CSS文本解析转换成styleSheets(css引入有三种方式,link文件,style标记,DOM节点行内书写)
  • 转换样式表中的属性值,使其标准化(将名称,单位等等数据标准化)
  • 计算DOM树种每个节点的具体样式,__CSS继承__ CSS层叠
  • 创建布局树: 遍历DOM树中的所有可见节点,加入到布局中构建布局树
  • 分层: 拥有层叠上下文属性的元素会被提升为单独的一层,被裁减的元素会被提升为单独的一层
  • 栅格化: 把图块转换成位图保存在GPU内存中:
  • 绘制到屏幕上

缓存和重定向

当服务器返回HTTP响应头时,通过响应头中的Cache-Control字段设置是否缓存该资源,通常,我们还需要为这个资源设置一个缓存过期时长,而这个时长是通过 Cache-Control 中的 Max-age 参数来设置的,比如上图设置的缓存过期时间是 2000 秒。

Cache-Control:Max-age=2000

这也就意味着,在该缓存资源还未过期的情况下, 如果再次请求该资源,会直接返回缓存中的资源给浏览器。但如果缓存过期了,浏览器则会继续发起网络请求,并且在 HTTP 请求头中带上:

If-None-Match:"4f80f-13c-3a1xb12a"

服务器收到请求头后,会根据 If-None-Match 的值来判断请求的资源是否有更新。如果没有更新,就返回 304 状态码,相当于服务器告诉浏览器:“这个缓存可以继续使用,这次就不重复发送数据给你了。”如果资源有更新,服务器就直接返回最新资源给浏览器。

在接受服务器返回的响应头后,网络进程会开始解析响应头,如果发现返回的状态码是301或者302,那么说明服务器需要浏览器重定向到其他URL,这时网络进程就会从响应头的Location字段里读取重定向的地址.

标签: Chrome

非特殊说明,本博所有文章均为博主原创。

上一篇 你不知道的JS
下一篇 马拉车算法

评论啦~