如何定位并治理渲染卡顿、布局抖动与长任务？

# 核心结论

渲染卡顿、布局抖动和长任务都表现为用户输入或画面更新无法及时完成，但根因可能位于脚本执行、样式计算、布局、绘制或合成等不同阶段。治理流程应先用性能时间线把一次卡顿关联到具体交互和帧，再判断是计算量过大、主线程任务不可中断、强制同步布局、节点更新范围过宽，还是绘制与合成成本过高。优化目标是缩短单次主线程占用、减少无效渲染、控制每帧工作量，并在关键输入到来时及时让出主线程。

# 底层机制

浏览器更新画面通常需要经历样式计算、布局、绘制和合成。修改元素几何属性可能使布局失效，颜色和阴影等变化通常需要重新绘制，而transform与opacity在满足条件时可能主要由合成阶段处理，但是否创建独立图层仍由浏