SEO 百科

渲染管线

本页目录

渲染管线把页面代码变成屏幕上的像素，中间要依次经过解析、样式计算、布局、绘制和合成^[1]。做 SEO 的人看它，是为了知道首屏在哪一段变慢：样式没算完不画，布局没定不画，主线程被占住也不画。理解这条链，就能把页面体验指标对到具体环节上。

管线的各个阶段

第一步是把标记变成文档树。MDN 说明，HTML 解析包括标记化和树构建，解析器把标记化的输入构建成文档树^[2]。

第二步是构建 CSSOM。浏览器遍历每一条样式规则，按选择器建成一棵带父子关系的节点树^[2]。

第三步是合成渲染树。DOM 提供内容，CSSOM 提供样式，两者合并成渲染树，每个可见节点带上计算后的样式^[1]。

第四步是布局。浏览器从渲染树的根开始遍历，算出每个节点的尺寸和位置^[1]。

最后一步是绘制与合成。绘制把每个盒子转成屏幕上的像素，必要时把内容分成多层再合成^[1]。

管线的节奏受制于两个源头，一个是样式，一个是脚本。

CSS 会让整个渲染等待。浏览器要收到并处理完所有 CSS，才开始渲染页面^[1]。

脚本会打断解析。<script> 不带 async 或 defer 时，它会阻塞渲染并暂停 HTML 解析^[2]。

主线程被占住时，管线整体停下。解析、编译、执行脚本期间，滚动和点击都无法及时响应^[2]。

布局在页面加载中可能被反复触发。第一次确定节点大小与位置叫布局，之后的重新计算叫重排^[2]。

图片没写尺寸是常见诱因。浏览器先按占位空间布局，拿到图片真实尺寸后再重排一次^[2]。

合成能让重绘变快。把内容提升到独立的层，由图形处理器绘制，可以减轻主线程负担^[2]。

分层也有成本。分层占用内存，层数过多反而拖慢整体表现^[2]。

引擎执行脚本时，同样要跑一遍这条链。Google 用无头 Chromium 渲染页面，再把渲染后的 HTML 用于编入索引^[3]。

管线越长，爬虫等待越久。节点数量多、脚本重、样式复杂，都会拉长渲染时间。

渲染失败就等于内容缺失。脚本报错或资源被挡，爬虫拿到的还是外壳，正文进不了索引^[3]。

百度把收录概括为抓取网页、建立索引数据库，再把库里的数据展现给用户^[4]。管线对应的是抓取之后、建库之前的那一段。

无。