CSS GPU加速与transform动画性能优化
请解释浏览器渲染管道(reflow→repaint→composite)、CSS GPU加速原理(硬件合成层)、以及如何利用transform/opacity触发GPU加速。
回答
我是大山
渲染管道：JavaScript→Style→Layout(reflow)→Paint(repaint)→Composite→GPU。
GPU加速原理：浏览器将页面分为合成层(Compositing Layers)，每层独立渲染为GPU纹理，GPU仅合成各层不重新绘制。
触发GPU加速：transform、opacity、filter只触发合成，不触发layout/paint。
/* ✅ GPU加速 */
transform: translateX(100px);
opacity: 0.5;
/* ❌ 触发reflow */
left: 100px; width: 200px;
最佳实践：1)动画用transform代替left/top；2)大量元素使用Canvas 2D/WebGL；3)使用contain: layout style paint限制影响范围；4)content-visibility: auto延迟屏外元素渲染。