性能方向的前端面试会死磕——能答出"transform走GPU"的过，只会说"减少DOM操作"的被筛。
流水线：JS→样式计算（匹配CSS）→布局/重排（几何）→绘制（填像素）→合成（图层上屏）。
触发重排的属性：width/height/top/left/display/font-size——所有几何相关。贵，还会级联到子元素。
跳过布局但触发重绘：color/background-color/visibility。相对便宜。
跳过布局和绘制（只合成）：transform/opacity。由合成线程处理——动画首选。
will-change或translateZ(0)能把元素提升到独立图层——费内存但启用GPU加速。
流水线从上到下：JS改DOM→样式重算→布局→绘制→合成。改几何属性（width/top/font-size）触发布局，这一步最贵因为会级联。改颜色/可见性触发绘制跳过布局，便宜些。transform/opacity两步都跳——走合成线程，60fps动画就靠它们。实操：动画用`transform: translateX()`而不是`left: Xpx`；批量先读后写避免layout thrashing（每次写都使布局失效，后续读会强制同步布局）。重动画的元素用will-change: transform提升成独立图层。教新人一句话：如果在做位移动画，十有八九你该用transform。
Performance面板→Rendering→Layout Shift Regions，直接看实际影响。
循环里调getBoundingClientRect()会强制同步布局——layout thrashing经典来源。
即答侠把流水线配上具体"该这样/别那样"的代码片段——答得实际，不像照本宣科。
Flex和Grid确实比Block流贵，但几千项以下可忽略。布局成本取决于子树复杂度，不是布局模型。
每个合成层都占显存。几百个元素都提升会在低端机OOM。只对要动的元素提升。