search

creeperyang / blog

前端博客，关注基础知识和性能优化。
MIT License
2.63k stars 211 forks source link

从浏览器关键渲染路径聊起 #61

Open creeperyang opened 1 year ago

creeperyang commented 1 year ago

（一）浏览器关键渲染路径-CRP

关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。

我们这里只尽量精简描述这个渲染过程，更具体的可以去看MDN-关键渲染路径。

image

在浏览器接收html时（浏览器收到数据的第一块时就可以开始解析收到的信息）：

  1. 首先解析 HTML 并构建 DOM 树；

    1. 遇到非阻塞资源（如图片）会请求这些资源并且继续解析。
    2. 遇到阻塞资源如 Githubissues.
    3. Githubissues is a development platform for aggregating issues.