date
type
status
slug
summary
tags
category
password
icon
1. 检查缓存
如果浏览器有本地的静态资源缓存，并且未过期，则直接从缓存中读取，而不会发送网络请求。
2. DNS解析
将输入的url对应的域名解析成ip，DNS解析过程根据 本机的hosts文件->本地DNS缓存->本地域名服务器的优先级解析域名，在域名解析过程还可能涉及和顶级域名服务器、根域名服务器、根域名服务器的交互。
3. 发送HTTP请求
建立TCP连接，如果是HTTPS还需要建立TLS连接，然后发送HTTP请求，并接收响应，如果响应状态码为301/302还需要进行重定向。
4. 将响应数据提交给渲染进程处理
渲染进程解析HTML，这个过程中，会提前解析外链（link和script）并提前下载。
5. 构建DOM
将HTML数据转换为DOM。
6. 样式计算
将CSS转换为CSSOM（document.styleSheets），并使用CSSOM，根据继承规则和层叠规则，计算每个DOM节点的具体样式，得到ComputedStyle树。
7. 布局
根据DOM树和ComputedStyle，计算所有可见元素的坐标，生成一个新的树：布局树。
8. 分层
根据布局树生成不同的图层，得到分层树（LayerTree）。
9. 绘制
对每个层生成绘制指令。然后渲染引擎将绘制指令提交给合成线程处理。
10. 分块
合成线程会先将每个图层分块（tile），优先渲染视口附近的块。合成线程把tile提供给栅格化线程。
11. 栅格化
栅格化线程把每个块转成位图，并写到显存中。一旦所有图块都被栅格化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。DrawQuad是一系列的指令，这些指令引用了显存中的tile位图。
12. 合成
浏览器进程接收到DrawQuad，并用指令将tile合成完整的帧，然后调用GPU进程将合成后的帧绘制到屏幕上。
- 作者:NotionNext
- 链接:https://tangly1024.com/article/46d7f4b4-89d0-4a70-9b49-307fe7702e8a
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。