因为动画导致卡闪的解决方法

Posted 2021-01-02 greengreencui

方法：

1、对使用-webkit-transform:translate() 移动的标签，使用translate3d 替换 translate

2、增加-webkit-transform-style: preserve-3d; 样式

3、增加-webkit-backface-visibility:hidden; 样式

4、尽量使用-webkit-transform 代替 -webkit-animation

5、减少@-webkit-keyframe 的定义和 使用

6、减少图片，降低图片大小；避免大图片压缩成小图片显示，或者小图片放大成大图片显示；图片显示尺寸尽量还原真实（高清@x2）情况

7、-webkit-transform 的时候，不用同时使用其他动画（例如 opacity）

8、不要使用all，也就是不要使用-webkit-transiton：all 1s；应该尽量详细定义 -webkit-transiton 的属性，例如-webkit-transiton：-webkit-transform 1s;

9、查看附近的webview 是否加载太多内容，太多动画，若是请添加离开当前页面时把动画效果暂时取消的功能；

10、对于运用了硬件加速的元素（例如元素A），与它重叠的元素如果没有同样运用硬件加速的属性，也会影响整个动画效果

11、尽量对使用动画的元素 设置成“非布局元素”，例如 position:absolute/fixed。

12、元素 从display:xxx 到 display:none;会使浏览器layout计算。要隐藏元素，请用visibility:hidden，或者translate(9999px,9999px)

13、对于多个png比较大的图片，建议把其改为一个jpg的图片和一个填充区域为黑色的图片，采取-webkit-mask-image:url()来降低图片大小。

14、如果连续多篇大交互文章，存在太多的动画，建议在中间插入引导页或其他文章隔开，多图片，并且动画效果多，效果一定会卡机，我们可以避免减少使用图片，如10张数字的图片，尽量找相近的字体动态生成数字

 

补充，ios6 及以上的系统不再支持上面的前两条的属性触发硬件加速，请用以下属性(经过测试得出，最起码3个属性一起用的时候是有效的)代替之：

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;

-webkit-backface-visibility:hidden;

 

解释：

第1、2条，在iOS 6 之前，是web 触发 浏览器启动硬件加速（GPU 渲染）的方法

第3条，一种调用 GPU 渲染的 hack

第4、5条，animation 会比 transform 多消耗性能

第11条，对于“布局”元素，当它进行动画的时候会触发浏览器的重绘

第12条，对于被改变成display:none 的元素，浏览器会停止绘制，也就触发了浏览器重新计算当前文档需要绘制图形的个数，消耗量cpu 的计算导致影响其他JS 和 css 的动画计算能力。

第13条，采用jpg和png的混合使用方法来实现遮罩，大大节省了空间。

 

特别注意：

硬件加速不能大量地，随意地用，因为大量的使用 GPU 渲染同样会拖慢 渲染效果。

 

相关资料：

iOS6 html hardware acceleration changes and how to fix them:http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

CSS3 TRANSITION 的背后:http://newhtml.net/behind-css3-transitions/

高性能 CSS3 动画:http://www.qianduan.net/high-performance-css3-animations.html