浏览器渲染页面的详细过程是怎样的？

从收到 HTML 到显示画面，浏览器做了这五步：

1. 解析 HTML → DOM 树：字节 → 字符 → Token → 节点 → DOM 树。遇到 <script> 暂停解析，先下载执行 JS（因为 JS 可能修改 DOM）。遇到 CSS/图片等资源不阻塞解析，并行下载。

2. 解析 CSS → CSSOM 树：类似 HTML 解析过程。CSS 解析不阻塞 DOM 构建，但阻塞渲染（没 CSSOM 不能渲染）。

3. DOM + CSSOM → Render 树：合并两棵树，可见元素进树，display: none 的元素排除。

4. Layout（重排）：计算每个可见元素的精确位置和大小。

5. Paint（绘制）：将 Layout 结果转成屏幕像素。

之后还有 Composite（合成）——把页面分层，GPU 做变换和合成，这就是为什么 transform 和 opacity 动画不触发重排。

追问

为什么 CSS 要放在 head 中，JS 要放在 body 底部？

CSS 放 head：浏览器尽早下载 CSSOM，避免渲染出无样式的白屏（FOUC）。JS 放底部：<script> 会阻塞 DOM 解析，放在底部能先渲染出页面内容再加载 JS，用户感知更快。<script defer> 下载不阻塞解析，DOM 构建完后执行，也是好选择。

重排和重绘哪个更贵？

重排贵得多。重排要重新计算布局，可能触发整个子树的级联重排。重绘只重新画像素。transform 和 opacity 不触发重排重绘（在合成线程处理），性能最好。能动画就用 transform。

为什么 transform 动画不卡？

因为它发生在合成器线程（Compositor Thread），而不是主线程。主线程被 JS 阻塞时，合成器线程照常工作。top/left 动画会触发 Layout → Paint → Composite 全流程，走主线程，会卡。