浏览器工作原理与实践学习笔记(三)-- 从输入url到页面展示,都发生了什么呢

355 阅读3分钟

笔记说明

浏览器工作原理与实践是李兵【前盛大创新院高级研究员】在极客时间开的一个专栏,透过浏览器看懂前端本质, 笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入李兵老师的专栏学习。

一道经常会被问到的面试题,今天就来总结一下,从输入url到页面展示出内容,这中间具体 具体 具体 都发生了什么事呢?

从输入 URL 到展示出完整的页面,涉及到三个进程,如下

1. 浏览器进程
2. 网络进程
3. 渲染进程

从以上三个进程宏观的看

  1. 浏览器进程 -- 用户输入, 浏览器开始处理用户的输入
  2. 网络进程 -- url 请求
  3. 渲染进程 -- 渲染页面

一: 用户输入

用户输入的可以是关键字,也可以是url

当用户输入关键字 或 URL 回车之后,浏览器标标签页上的标签会进入一个加载的状态,但是这个时候页面内容没有替换为新的内容,依旧是之前打开的页面。

因为第一步浏览器进程内,是没有进行到 “提交文档阶段”(提交文档阶段是在网络进程发起 URL 请求,浏览器读取响应头信息,准备渲染进程后发生。),提交文档阶段后,页面开始渲染,这时候页面内容才会被替换成新的。

二: URL 请求

浏览器进程是通过进程间通信(IPC)把 URL 发送到网络进程

三: 准备渲染进程

  1. 在网络进程读取响应头信息之后,浏览器进程就会准备渲染进程。
  2. 浏览器进程发出 “提交文档” 的信息给渲染进程,渲染进程收到信息后,会和网络进程建立管道,进行文档数据传输。
  3. 传输完毕后,通知浏览器进程。
  4. 浏览器收到 “确认” 信息, 更新页面状态 (浏览器前进后退状态、url、安全状态、页面状态)。

四: 开始渲染,渲染后页面替换为新页面

渲染流水线可分为以下几个子阶段:

  1. 构建 DOM 树: 因为浏览器无法直接使用 html,所以要将 html 转换为 DOM 树。

  2. 样式计算:

    1. 将css文本转换为 styleSheet。
    2. 转换样式表中的属性值(em, rem, 字体的加粗(blod),颜色等)。
    3. 计算 DOM 树中的每个节点的样式。
    
  3. 布局: 计算 DOM 树中的 可见元素 的几何位置,生成布局树。

  4. 分层:为特定的节点生成专用的图层,生成图层树(图层叠加后合成最终页面)

    1. 并不是布局树中的每个节点都会生成图层。
    2. 如果这个节点没有对应的层,那么它属于父节点的图层。
    3. 拥有层叠上下文属性的元素会生成新的层。
    

    了解更多层叠上下文: 层叠上下文

  5. 图层绘制: 把图层绘制拆分为绘制指令,按照顺序组成待绘制列表,主线程把待绘制列表交给合成线程,合成线程把图层分为图块。

  6. 栅格化: 把图块转换成位图,生成的位图保存在 GPU 内存中。

  7. 合成和显示:提交给浏览器进程进行绘制,最终显示在屏幕上。

五: 重排、重绘、合成

重排: 如更改元素几何属性(宽、高、位置),重排发生在流水线的第二步,所以之后的所有流程都要进行更新。

重绘: 如更改元素的背景色,会更新绘制阶段。

合成: css3实现的一些动画效果会触发合成阶段更新,合成相对于重排和重绘,大大提升绘制效率。(合成阶段是在合成线程上处理,不在主线程)