浏览器的主要工作流

[adodo0829]

浏览器的主要工作流

我们从url输入到页面渲染完成来梳理一下浏览器工作的相关流程...

流程总览

这里涉及几个进程的协作,还有网络相关的知识,前面都已经说过了,这里不再解释; 也不做细讲 :)

浏览器进程: 用户输入url → 处理输入↓  (如果30x则会重定向) ↓ ... 接受网络进程的数据,发送给渲染进程(commit navigation) -> 收到确认信息, 导航结束,让渲染进程开始干活 -> 解析完毕生成展示页面

网络进程:   DNS(先在缓存查找)解析出ip → 发起http/https请求(3次/tsl握手,建立tcp连接) → 读取响应数据并发送 ↑ -> 断开连接

渲染进程:   通过管道接受网络进程的html数据 → 向浏览器进程发送确认信息 -> 开始解析html

总结一下流程:

处理输入 -> 导航 -> 请求资源 -> 确认导航 -> 渲染进程接管... -> 页面呈现

渲染进程工作流

• 1.DOM Tree 构建

当渲染进程接收到导航的确认信息,开始接受HTML数据时,主线程会解析文本字符串为 DOM;
这里依靠 HTMl 解析器: 
接受字节流 -> 维护 token 栈 -> 生成节点node -> 组成 DOM;

遇到内嵌 script 时, DOM解析工作停止; js引擎介入执行(可能会修改dom结构);
执行完 js 后恢复解析工作, 所以 js 会阻塞 dom 解析.

遇到其他内联资源时(css,img)会通知网络进程去下载, 特别是 css;
js 在操作dom 样式时会依赖cssom,生成 layoutTree也需要 cssom; 
所以 css 又会阻塞 js 的执行

• 2.样式计算, 构建 cssom

这里会基于 CSS 选择器解析 CSS 获取每一个节点的最终的计算样式值;
对应的就是styleSheets

• 3.计算布局, 生成layout tree

想要渲染一个完整的页面,除了获知每个节点的具体样式,还需要获知每一个节点在页面上的位置,
布局其实是找到所有元素的几何关系的过程。

这里通过遍历 DOM 及相关元素的计算样式,主线程会构建出包含每个元素的坐标信息及盒子大小的布局树。
布局树和 DOM 树类似,但是其中只包含页面可见的元素,如果一个元素设置了 `display:none` ,
这个元素不会出现在布局树上,伪元素虽然在 DOM 树上不可见,但是在布局树上是可见的。

• 4.分层,绘制(layer -> paint)

为特定的节点生成专用图层(will-change属性), 生成 图层树;
为图层生成绘制表(记录了绘制指令和顺序), 提交到合成线程

• 5.分块,光栅化

合成线程将图层分为图块, 通过光栅化生成位图(GPU 进程)

• 6.合成,显示

图块被光栅化后会生成一个绘制命令, 通过 IPC 提交给浏览器进程去执行,
绘制到内存中然后展示在显示器上