前端与浏览器 / 进阶

从 HTML 到像素：浏览器渲染流水线怎么工作

浏览器不会直接把 HTML 画到屏幕上。本文拆解主线程上的解析、样式计算、布局和绘制，以及合成线程如何复用图层。

9 分钟Rendering · DOM · CSSOM · Performance

五个关键阶段

Style：为元素匹配选择器并计算最终样式。复杂选择器通常不是首要瓶颈，大量节点和频繁失效才值得关注。 Layout：根据盒模型、包含块和字体度量计算几何位置。读取 offsetWidth 后立即修改样式，容易造成同步布局。 Paint：把背景、文字、边框、阴影等记录为绘制指令；Composite：把不同图层栅格化后组合到屏幕。

用 Performance 面板确认长任务发生在哪个阶段；检查 Layout 是否由脚本强制触发；用 Layers 或 Rendering 工具查看图层和重绘区域；优先减少工作量，再考虑提升图层。

EXAMPLE / 01Rendering

const cards = [...document.querySelectorAll('.card')];
const widths = cards.map(card => card.getBoundingClientRect().width);

requestAnimationFrame(() => {
  cards.forEach((card, index) => {
    card.style.setProperty('--card-width', `${widths[index]}px`);
  });
});

把实现拆成可验证的小块

transform 和 opacity 通常可以跳过布局与绘制

最后回到真实页面检查

性能优化应以性能录制中的证据为起点