浏览器拿 HTML 的过程大致分五步：解析标签构建 DOM 树，解析 CSS 构建 CSSOM 树，两者合成渲染树（隐藏元素被剔除），然后布局计算每个节点的几何位置，最后绘制与合成出画面。理解这条流水线就能理解很多性能常识：改颜色只触发重绘，改尺寸位置会触发更贵的回流，JS 直接读写 offsetWidth 会强制同步布局。
这条链路上的几个角色值得记住：script 默认会阻塞解析（遇到就停下来等下载执行），所以放底部或加 defer/async；CSS 解析与 DOM 解析可并行但会阻塞渲染；img 不阻塞但加载完会回流。所以经典策略是关键 CSS 内联、非关键 CSS 异步、图片设宽高防抖动——每个都对应渲染流水线上的一个具体环节。
<style> .flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px; border: 1px solid #4a9eff; border-radius: 8px; font-size: 13px; } .step { background: #4a9eff; color: #fff; border-radius: 6px; padding: 5px 10px; } .arrow { color: #e78a3e; font-weight: bold; } </style> <div class="flow"> <span class="step">解析 HTML</span><span class="arrow">→</span> <span class="step">构建 DOM 树</span><span class="arrow">→</span> <span class="step">解析 CSS</span><span class="arrow">→</span> <span class="step">CSSOM 树</span><span class="arrow">→</span> <span class="step">渲染树</span><span class="arrow">→</span> <span class="step">布局</span><span class="arrow">→</span> <span class="step">绘制合成</span> </div> <p style="font-size:13px">脚本放底部或加 defer 可减少对这条流水线的阻塞。</p>