当我们需要高频交互的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的算法不同,因此即使最终硬件加速停止了,文本还是会在动画期间显示的很模糊,尽量不要包含文字。