利用GPU渲染加速CSS动画

“Lift not the painted veil which those who live

Call Life: though unreal shapes be pictured there,

And it but mimic all we would believe”

每个网页或多或少都涉及到一些CSS动画 通常简单的动画对于性能的影响微乎其微 然而如果涉及到稍显复杂的动画 不当的处理方式会使性能问题变得十分突出 几个礼拜前在公司做了个presentation 标题是Faster Animation with GPU accelerated CSS本文是对此的文字总结

之前参与过的两个项目里都要求用原生JS去实现对于网页中某个元素的位置进行持续而频繁的改变 我遇到的问题是动画的卡顿甚至停滞 搜寻了很久解决方法 甚至比对了我的代码和Github上完成相同功能的插件代码的差异 最后通过改变几个CSS属性很大程度上改善了动画

我们都知道 如果要在一个页面上移动一个现有的元素 通常有四种方法 比如说改变元素的margin而这几种方法的性能各异 通过测试不难看出 给元素的transform属性设置translate3d(x,y,z)是最快的方法

这其实和网页的渲染过程有关transform: translate3d(x,y,z)这一行代码使得GPU去渲染动画主体所在的层 而并非CPU 所以一定程度上提高了动画的速度 各大浏览器对于GPU渲染过程并没有一个清晰明了的概念 于是我参照了唯一较为详细叙述整个流程的一篇文章GPU accelerated compositing in chrome

网页渲染过程

关于Chrome浏览器渲染网页的过程及其与GPU的关系 可以总结出以下三点：

    DOM中的每个节点都直接或间接地对应一个层

    一些层有自己的支撑平面(backing surface) 这些层被称为复合层(compositing layers)

    对于复合层(compositing layers)来说compositor是利用GPU将它最终渲染到屏幕上的

复合层形成条件

而形成由GPU渲染的复合层(compositing layers) 需要满足以下条件之一：

    这个层对应的元素里有

    这个层里的元素使用了CSS动画去改变透明度或者使用了-webkit-transform属性

    这个层里的元素使用了CSSfilter

Tips

对于那些即将参与CSS动画的HTML元素 可以加上will-change这个属性 使浏览器提前有所准备 但是注意不能滥用

当需要不断改变一个元素的位置时 最好的方式是使用transform: translate3d(x,y,z)

我们还可以参照csstriggers这个网站去查看我们使用的单个的CSS属性会给浏览器带来哪些工作量