13 — 页面渲染全链路 ​

里可以把页面渲染拆成两条线：导航到文档，以及 文档到像素。

导航到文档 ​

1. 用户输入 URL、点击链接或脚本触发导航。
2. Browser 进程创建和管理导航状态。
3. 通过 Network Service 获取资源，处理重定向、CSP、CORS、ORB 等策略。
4. Browser 选择合适的 SiteInstance 和 Renderer 进程。
5. Renderer 收到提交信息，Blink 开始解析 HTML、CSS、执行 JS。

首屏速度同时受网络、Renderer 主线程、资源加载和首帧光栅影响。

文档到像素 ​

Renderer 侧主路径：

1. HTML 解析成 DOM。
2. CSS 解析并计算样式。
3. Layout 计算位置和尺寸。
4. Paint 生成绘制记录。
5. cc 组织图层、tile 和光栅任务。
6. 生成 CompositorFrame。
7. viz 聚合帧，GPU 提交显示。

一帧的大致流程 ​

1. vsync 触发 BeginFrame。
2. 如果只是滚动或合成动画，可能直接在合成线程更新。
3. 如果有 DOM / 样式 / 布局变化，进入 Renderer 主线程。
4. 主线程完成样式、布局、绘制后 Commit 给合成线程。
5. Pending 树光栅完成后 Activate 成 Active 树。
6. 提交 CompositorFrame。
7. viz 聚合并显示。

为什么有时主线程忙但还能滚 ​

如果滚动可以在合成线程完成，浏览器可以用已有 active 树响应滚动，不必每帧等 Blink 主线程。

但如果页面注册了同步 wheel / touch 监听，或滚动依赖主线程计算，就可能被主线程长任务卡住。

总结 ​

页面渲染从 Browser 管导航开始，到 Renderer 解析和布局，再到 cc / viz / GPU 合成显示。性能问题要分清是网络慢、主线程忙、光栅慢、合成慢，还是 GPU 提交慢。