解决Chrome动画 卡顿 的办法
解决Chrome动画”卡顿”的办法,为动画DOM元素添加CSS3样式
-webkit-transform:transition3d(0,0,0);//或-webkit-transform:translateZ(0);-
这两个属性都会开启GPU硬件加速模式，从而让览器在渲染动画时从CPU转向GPU;
-
其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform
，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。 -
这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。
-
当然也可以这样开启所有浏览器的GPU硬件加速：
webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);- 或者:
webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);- 使用
-webkit-transform:transition3d(0,0,0)开启GPU硬件加速的chrome中渲染动画性能明显顺畅了许多
chrome诡异的Bug
-
对所有动画DOM元素添加
-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后，又出现了一个chrome诡异的Bug -
当你有多个
position:absolute;元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后，会有几个元素凭空消失 -
这可能是跟添加
-webkit-transform之后chrome尝试使用GPU硬件加速有关系，最后还是要等待Chrome官方更新解决了，当前Chrome版本是33。如果谁发现比较好的解决办法，欢迎提出^_^
如何避免这个问题
-
在使用
-webkit-transform尝试对很多DOM元素编写3D动画时，尽量不要对这些元素及他们的父元素使用position:absolute/fixed。(其实这种情况很难避免) -
临时解决办法是,减少使用
-webkit-transform:transition3d(0,0,0)的DOM元素数量，例如从9个减至6个就没有元素消失的现象了。
开启GPU硬件加速可能触发的问题
- 通过
-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之:
-webkit-backface-visibility:hidden;-webkit-perspective:1000;如何监测动画帧速率
- 推荐两种实时监测网页渲染帧速率的方法：
- 1.
Chrome的DevTool中TimeLine的Frame模块 - 2.地址栏输入”
chrome:flags”搜索”fps”，将”FPS计数器”开启，浏览器重启后右上角会实时显示帧速率。
- 1.
通过-webkit-transform
-
使用很多大尺寸图片(尤其是
PNG24图)进行动画的页面。 -
页面有很多大尺寸图片并且进行了
css缩放处理，页面可以滚动时。 -
使用
background-size:cover设置大尺寸背景图，并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw) -
编写大量
DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left) -
使用很多
PNG图片拼接成CSS Sprite时 -
暂时只有这五种情况，欢迎大家补充
通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。
参考地址:http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
