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进程将合成后的帧绘制到屏幕上。