在 CSS 动画中使用硬件加速

近些年，我们总是听到硬件加速，以及它如何帮助我们提升网页的动画性能，让网页动画变得更好，在移动端更流畅。但是我想一大部分经验少的工程师是不知道硬件加速是如何工作的以及我们如何使用它来帮助我们让动画变得更流畅。

在GPU渲染元素

并不是所有的CSS属性变化都会直接在GPU处理。只有下面的属性会这样处理：

• transform
• opacity
• filter

因此为了页面更加流畅，高性能的动画，我们需要尽可能的使用GPU来处理

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围

• 使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
• 页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
• 使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)
• 编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
• 使用很多PNG图片拼接成CSS Sprite时

使用硬件加速需要注意的地方

天下没有免费的午餐。对于硬件加速，目前有几个问题

Memory

大部分重要的问题都是关于内存。GPU处理过多的内容会导致内存问题。