关键渲染路径

关键渲染路径 指浏览器从收到 HTML、CSS、JavaScript 的字节，到把像素画到屏幕之间必经的那几步：解析出 DOM、构建 CSSOM、合成渲染树、布局、绘制^[1]。优化它的目标是缩短首次呈现时间，也就是让首屏更早出现^[1]。

五步里谁会拖慢谁

CSS 会阻塞渲染。浏览器要拿到样式才能构建渲染树，外部样式表没回来之前首屏不画^[2]。

默认写法的同步脚本会阻塞 HTML 解析，解析停在脚本位置，等下载与执行完成才继续^[3]。DOM 与 CSSOM 都要就绪，渲染树才有内容。

三个方向的优化

第一步是减少关键资源数量，把首屏用不到的样式与脚本挪出阻塞路径。第二步是减少关键字节数，压缩与精简 CSS、JS、HTML。第三步是缩短资源加载顺序的长度，关键请求排在前面，非关键请求延后^[4]。

具体做法包括内联首屏所需的一小段 CSS、给非关键样式表降优先级、脚本改 defer、图片按视口决定是否延迟加载^[2][5]。

与搜索的关系

抓取分两步：先取 HTML 再渲染。渲染步骤要执行脚本、构建 DOM，站点渲染成本高时处理队列会更慢^[6]。首屏内容在静态 HTML 里就有，这条链路的负担最小。

LCP 衡量的正是首屏关键元素的完成时间，关键资源加载顺序对它就是直接影响^[5]。

常见误用

第一种是把全站 CSS 打成一个文件内联进每个页面，缓存复用消失。第二种是给全部图片加延迟加载，首屏主图也被推迟，LCP 变差^[5]。第三种是字体、样式、脚本同时 preload，带宽被次要资源占走。

附录

参见

• CSS 基础
• 渲染
• 首屏加载
• 延迟加载
• LCP

参考资料

官方（境外）

1. 《关键渲染路径》，web.dev，Google。
2. 《阻塞渲染的 CSS》，web.dev，Google。
3. 《使用 JavaScript 添加交互》，web.dev，Google。
4. 《优化关键渲染路径》，web.dev，Google。
5. 《Largest Contentful Paint》，web.dev，Google。
6. 《关于 Google 搜索运作方式的深度指南》，Google 搜索中心。

外部链接

• 测量关键渲染路径，web.dev，Google。