LouisTsang-jk.github.io

关键渲染路径(CRP)

Web 性能包含了服务器请求和响应、加载、执行脚本、渲染、布局和绘制每个像素到屏幕上。

涉及进程

• 浏览器进程 用户交互、文件存储
• 网络进程 资源下载
• 渲染进程 解析并显示、交互页面

流程

资源获取

1. 判断URL是否符合URL规则
2. 协议补充
3. 浏览器通过进程间通信(IPC)把URL发送至网络进程
4. 网络进程查询DNS缓存
   • hosts文件
   • DNS解析器缓存
5. 建立TLS连接(https)
6. 构建请求
   • cookie
7. 如果请求响应返回301/302状态码，根据Location重定向
8. 根据Content-Type显示响应体内容(text/html)
9. 当前URL和之前渲染进程的根域名是否相同，相同则复用渲染进程

   渲染

10. 构建DOM树
11. 样式计算
    • 样式收集
      • link标签引入
      • style标签引入
      • 内联样式 - 样式属性值标准化 - 计算样式属性
      • 继承规则
      • 层叠规则
12. 布局阶段
    • 创建布局树(LayoutTree)
    • 布局计算
    • 分层树(LayerTree)
13. 图层绘制(Paint)
    • 绘制列表
    • 栅格化
14. 绘制图块命令(DrawQuad)
15. 生成页面并显示到屏幕上