页面变慢时，直觉很容易把责任归给“资源太大”或“框架太重”。更可靠的做法是回到浏览器的工作路径：HTML 和 CSS 如何变成像素，JavaScript 又在哪些环节阻塞了这条路径。

从两棵树开始

浏览器解析 HTML 得到 DOM，解析 CSS 得到 CSSOM。两者结合形成渲染树，只有需要显示的节点才会进入后续布局。CSS 放在页面早期，是为了让浏览器尽快得到稳定的样式规则，减少无样式内容闪烁。

布局、绘制与合成

布局阶段计算元素的位置和尺寸，绘制阶段生成颜色、文字、边框等绘制指令，合成阶段再把图层组合到屏幕上。修改 width 往往会触发布局，而只修改 transform 通常可以留在成本更低的合成阶段。

真正有效的优化顺序

先缩短首屏关键资源链路：压缩图片，推迟非关键脚本，减少阻塞样式。随后检查长任务，把一次占用主线程几十毫秒的工作拆开。最后再处理频繁读取布局属性后立刻写样式造成的布局抖动。

// 把读取与写入分开，避免反复强制布局
const width = panel.offsetWidth;
requestAnimationFrame(() => {
  panel.style.transform = `translateX(${width}px)`;
});

写在最后

性能优化不是追逐某个分数，而是让用户更早看到内容、更快得到响应。理解渲染路径后，每项改动都能对应到实际成本，排查也会从猜测变成验证。