CSS动画开始硬件加速及其原理

当我们需要高频交互的CSS动画时候，我们需要考虑使用css3硬件加速。

 

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

浏览器首先将页面解析成DOM树，DOM树和CSS让浏览器构建渲染树，渲染树包括渲染对象。每个渲染对象会被分配到一个图层中，每个图层会被更新到GPU中，

由于GPU中的transform等CSS属性不触发repaint，因此不需要重绘，单独处理，所以能大大提高网页的性能。

 

当浏览器引擎检测到页面中某个MOD元素应用了某些CSS规则时候就会开启，最显著的特征的元素是3D变换。

 

开启硬件加速：

1、transform

2、opacity

3、filter

 

强行开始加速：

transform：translate3d(0,0,0);

 

注意问题：

1、过多的使用GPU处理会导致内存问题，可能导致浏览器崩溃。

2、在GPU渲染字体会导致抗锯齿无效，因为GPU和CPU的算法不同，因此即使最终硬件加速停止了，文本还是会在动画期间显示的很模糊，尽量不要包含文字。