Chrome GPU 加速怎么实现？合成层、will-change 和动画怎么取舍？

Chrome 的 GPU 加速主要发生在合成阶段：页面先经过样式计算、布局、绘制，再把部分内容交给 GPU 作为合成层处理。它能让 transform、opacity 这类动画更顺，但不是所有属性都适合丢给 GPU；如果滥用，反而会增加显存、纹理上传和合成成本。

追问

哪些 CSS 更容易触发 GPU 合成？

常见的是 transform、opacity，以及部分 filter、视频、Canvas、固定定位元素。开发里通常用 transform 做位移和缩放，不要用 left、top 频繁改位置。

will-change 是不是越多越好？

不是。它只是提前告诉浏览器这个元素可能要变，浏览器可能因此提前建层和分配资源。动画结束后应移除。

GPU 加速为什么有时反而变慢？

合成层不是免费的，层太多会占显存，内容变化频繁还会导致纹理反复上传。低端设备最容易出问题。

怎么确认页面真的用了合成层？

用 DevTools 的 Layers、Performance 和 Rendering 工具。看是否有大量 Layout、Paint，或异常多图层。

写段 CSS

css
.card { will-change: transform, opacity; }
.card.is-moving { transform: translate3d(0, 12px, 0); opacity: .92; }