GPU加速.md

前言

大纲:

• 什么是 GPU 加速
• 哪些属性会触发 GPU 加速
• 何时该(不)使用 GPU 加速

什么是 GPU 加速

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。

• Layout（布局）： 当页面上的元素位置、大小或布局发生变化时，浏览器需要重新计算整个页面的布局，这称为 "layout" 或 "reflow"。"Layout" 是一项开销较大的操作，因为它需要重新计算每个元素的位置和尺寸
• Paint（绘制）： 一旦页面的布局被确定，浏览器将根据元素的样式和属性绘制页面，这称为 "paint" 或 "repaint"。"Paint" 操作会根据元素的外观，将像素绘制到屏幕上.

"transform" 属性通过使用硬件加速来进行元素的变换。这意味着变换的计算和绘制是在 GPU 上进行的，而不需要触发重新布局（"layout"）或重新绘制（"repaint"）操作。因为元素的位置和尺寸没有改变，只是在屏幕上进行了变换，所以只需在 GPU 上对元素进行变换操作，而不需要涉及到重新计算布局或重新绘制像素。

哪些属性会触发 GPU 加速

CSS 中的以下几个属性能触发硬件加速：

• transform
• opacity
• filter
• will-change

何时该(不)使用 GPU 加速

由于优化会带来一定的开销，will-change 应该被谨慎使用。只有在确实需要进行复杂的变换、动画或特效时，才应该使用这个属性。不必要地过度使用 will-change 可能会造成性能问题。

要注意的问题

• 过多地开启硬件加速可能会耗费较多的内存，因此什么时候开启硬件加速，给多少元素开启硬件加速，需要用测试结果说话。
• GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

参考

• MDN will-change