《浏览器原理》学习笔记Day45

HTTP请求流程

• HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础。

• 浏览器端发起HTTP请求流程

  1. 构建请求

     1. 首先，浏览器构建请求行信息，构建好后，浏览器准备发起网络请求。

  2. 查找缓存

     1. 在真正发起网络请求之前，浏览器会先在浏览器中查询是否有要请求的文件。如果缓存查找失败，就会进入网络请求过程了。
     2. 好处：
     1. 缓解服务器压力，提升性能(获取资源的耗时更短了)
     2. 对于网站来说，缓存是实现快速资源加载的重要组成部分。

  3. 准备IP和端口

     1. 第一步浏览器会请求DNS返回域名对应的IP。如果某个域名解析过了，浏览器会缓存解析的结果，以供下次使用。拿到IP之后，接下来就需要获取端口号。通常没有特别指明端口号，那么HTTP协议默认是80端口。

  4. 等待TCP队列

     1. 同一个域名同时最多只能建立6个TCP连接。

  5. 建立TCP连接

     1. 排队等待结束之后，终于可以和服务器握手了。- TCP连接

  6. 发送HTTP请求

     1. 首先浏览器会向服务器发送请求行，包括请求方法，请求URL，HTTP版本协议

     1. 如果是POST方法，浏览器还要准备数据发送给服务器，这里准备的数据通过请求体发送

        2. 发送请求行之后，还需要发送请求头，携带浏览器的一切基础信息。

• 服务器端处理HTTP请求

  1. 返回请求

     1. 首先是返回响应行，包含协议版本和状态码
     2. 随后服务器会随同相应返回响应头。包含服务器自身信息。
     3. 发送完响应头后，服务器就可以继续发送响应体数据。

  2. 断开连接

     1. 通常情况下，一旦服务器向客户端返回了请求数据，他就要关闭TCP连接。
     2. 如果浏览器或者服务器在头信息中添加了Connection:keep-Alive,那么TCP连接会在发送后让然保持打开状态。

  3. 重定向

     1. 响应行的状态码为301，告诉浏览器要重定向到另一个网址。
     2. 需要重定向的网址包含在响应头中的Location字段中。

导航流程

用户发出的URL请求到页面解析的这个过程，就叫做导航。

• 从输入URL到页面展示

  1. 用户输入

     1. 浏览器先判断是搜索内容还是请求的URL
     2. beforeunload

  2. URL请求过程

     1. 浏览器通过进程间通讯(IPC)把URL内容发给网络进程
     2. 网络进程发起请求流程
     1. 查找缓存
     2. DNS解析
     3. 建立TCP连接[，https建立TSL连接]

     4. 构造请求

        3. 重定向

     5. 在导航过程中，如果服务器响应行的状态码包含301、302一类跳转信息，浏览器会跳转到新的地址继续导航；如果响应行的状态码是200，那么表示浏览器可以继续处理该请求。

        4. 响应数据类型处理
     6. Content-Type是HTTP中一个非常重要的字段，他告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器根据Content-Type的值来决定如何显示响应体的内容
     7. 如果是下载类型，该请求会提交给下载管理器，同时该URL的导航流程就此结束。
     8. 如果是HTML，那么浏览器会继续导航流程

  3. 准备渲染进程

     1. 默认情况下，浏览器会为每个页面分配一个渲染流程
     2. 如果是从一个站点打开另一个站点，而新页面与当前页面属于同一站点(根域名加上协议，还包含该域名下所有子域名和不同端口)，那么新页面就会复用父页面的渲染流程。

  4. 提交文档

     • 浏览器进程将网络进程接收到的HTML数据交给渲染流程
     • 流程：
     1. 首先浏览器进程收到网络进程的响应头数据，便向渲染流程发起“提交文档”的消息
     2. 渲染流程收到“提交文档”的消息后，会和网络进程建立传输数据的“通道”
     3. 等文档数据传输完成后，渲染流程会返回“确认文档”的消息给浏览器进程
     4. 浏览器进程在收到“确认文档”的消息后，会更新浏览器界面状态，包括安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面

  5. 渲染阶段

     1. 一旦文档被提交，渲染流程便开始页面解析和子资源加载了

渲染流程

1. 构建DOM树

   1. 将HTML转换为浏览器能够理解的结构--- DOM树
   2. DOM是保存在内存中树状结构

2. 样式计算

   1. 将css文本转换为浏览器能够理解的结构---styleSheets
   2. 转换样式表中的属性值，使其标准化
   3. 计算DOM树中每个节点的具体样式

   1. CSS继承：每个DOM节点都包含父节点的样式
   2. 样式层叠（核心）：定义了如何合并来自多个源的属性值的算法。

3. 布局阶段

   - 计算出DOM树中可见元素的几何位置
   1. 创建包含可见元素布局树
   2. 布局计算
   3. 分层

   • 渲染引擎为特殊的节点生成专用的图层，并合成一颗对应的图层树
   • 并不是每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层
   • 拥有层叠上下文属性的元素会被提升为单独的图层

   • 需要被剪裁(clip)的地方也会创建为图层

     4. 图层绘制

   • 渲染引擎会将一个图层绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序生成组成一个待绘制列表

     5. 栅格化(raster)操作
   • 合成线程会按照视口(viewport)附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，就是将图块转换为位图。

   • 栅格化的过程都会使用GPU来加速生成，使用GPU生成位图的过程叫快速栅格化或GPU栅格化，生成为位图保存在GPU中。

     6. 合成和展示
   • 一旦所有的图块被光栅化，合成线程就会生成一个绘制图块指令---"DrawQuad"，然后将该命令提交给浏览器进程。

   • 浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的"DrawQuad"指令，然后根据DrawQuad指令，将其页面内容绘制到内存，然后将内存展示在屏幕上。

     • 重排
   • 更新了元素的几何位置
   • 重排需要更新完整的渲染流水线

   • 内存消耗是最大的

     • 重绘
   • 更新了元素的绘制属性

   • 省去了布局和分层阶段，执行效率比重排要高一些

     • 合成
   • 直接合成阶段
   • 相对于重绘和重排，合成能大大提高绘制效率

此文章为3月Day1学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪