标签：调用 尺寸 效果 注意 one 动态 frame 交互 html
方法：
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
标签：调用 尺寸 效果 注意 one 动态 frame 交互 html
原文地址：https://www.cnblogs.com/greengreencui/p/9552633.html
