解决Chrome动画”卡顿”的办法
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,这两个属性都会开启GPU硬件加速模式,从而让浏览器在渲染动画时从CPU转向GPU,其实说白了这是一个小伎俩,也可以算是一个Hack,-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式,但我们设置值为0后,并没有真正使用3D效果,但浏览器却因此开启了GPU硬件加速模式。
这种GPU硬件加速在当今PC机及移动设备上都已普及,在移动端的性能提升是相当显著地,所以建议大家在做动画时可以尝试一下开启GPU硬件加速。
当然也可以这样开启所有浏览器的GPU硬件加速:
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(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中渲染动画性能明显顺畅了许多,平均能达到55fps左右
chrome诡异的Bug
对所有动画DOM元素添加-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后,又出现了一个chrome诡异的Bug,当你有多个position:absolute;元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后,会有几个元素凭空消失,调试许久无果遂Google之,国内暂时没有人发表过关于这类问题的文章,于是在国外网站找呀找,找到了很多与我遇到同样问题的人,但都没有真正靠谱的解决办法,这可能是跟添加-webkit-transform之后chrome尝试使用GPU硬件加速有关系,最后还是要等待Chrome官方更新解决了,当前Chrome版本是33。如果谁发现比较好的解决办法,欢迎提出^_^
其他人遇到的类似问题:
3D CSS transform: translateZ causes elements to disappear in Chrome
Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
如何避免这个问题:
在使用-webkit-transform尝试对很多DOM元素编写3D动画时,尽量不要对这些元素及他们的父元素使用position:absolute/fixed。(其实这种情况很难避免)
所以我的临时解决办法是,减少使用-webkit-transform:transition3d(0,0,0)的DOM元素数量,从9个减至6个便没有元素消失的现象了。
PS:由于测试环境有限,如果大家发现在你的浏览器还有这个Bug,麻烦留言告诉我,万分感谢!
开启GPU硬件加速可能触发的问题:
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后,有些时候可能会导致浏览器频繁闪烁或抖动,可以尝试以下办法解决之:
-webkit-perspective:1000;
如何监测动画帧速率
推荐两种实时监测网页渲染帧速率的方法:
1.Chrome的DevTool中TimeLine的Frame模块
2.地址栏输入”chrome:flags”搜索”fps”,将”FPS计数器”开启,浏览器重启后右上角会实时显示帧速率。
我会再过些天单独写一篇关于通过Frame模块监测网站性能的教程,敬请留意^_^
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围:
- 使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
- 页面有很多大尺寸图片并且进行了css缩放处理,页面可以滚动时。
- 使用background-size:cover设置大尺寸背景图,并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)
- 编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
- 使用很多PNG图片拼接成CSS Sprite时
我能想到的暂时只有这五种情况,欢迎大家补充。
总结:
通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题,但使用仍需谨慎,使用前一定要进行严谨的测试,否则它反而会大量占用浏览网页用户的系统资源,尤其是在移动端,肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量,降低电池寿命等问题。
您还可以参考以下HTML5相关文章:
《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)》
《HTML5 Drag&Drop 拖拽、FileReader实例教程》
《关于HTML 5 canvas 的基础教程》
留意更新
订阅彬Go以查看HTML5最新资源、教程。
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html如需转载必须以链接形式注明原载或原文地址,谢谢合作
解决Chrome动画”卡顿”的办法的更多相关文章
- 【小知识点】解决Chrome动画”卡顿”的办法
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);这两个属性都会开启GPU硬件 ...
- 【C++】解决vs2015经常卡顿的办法
VS2015经常性的卡顿,参考了zhihu里问答的办法,编译和使用的时候的确快多了 为什么vs2015经常卡顿? https://www.zhihu.com/question/34911426 感谢z ...
- Chrome 下动画卡顿问题的另一种可能
[现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...
- performance面板使用,以及解决动画卡顿
https://googlechrome.github.io/devtools-samples/jank// 官方案例 https://juejin.im/post/5b65105f518825 ...
- javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...
- 彻底解决 Intellij IDEA 卡顿 优化笔记,重要的快捷键
由于工作中经常出现分支各种切换,使用Eclipse便不再像以前那么舒服了,不停的修改工作空间,每次修改完工作空间又是一堆一堆的个性化设置,来回的切换,真的很累.我们做软件的,怎么能不去尝试新鲜的呢,毕 ...
- 彻底解决 intellij IDEA 卡顿 优化笔记
由于工作中经常出现分支各种切换,使用Eclipse便不再像以前那么舒服了,不停的修改工作空间,每次修改完工作空间又是一堆一堆的个性化设置,来回的切换,真的很累.我们做软件的,怎么能不去尝试新鲜的呢,毕 ...
- Latex 3: 解决LaTeX编译卡顿问题
1.问题: 最近在编译latex时,老是在tulmr.fd处编译很久,但是以前不这样啊,那肯定就是我最近做了什么导致这样的了,是什么呢? 2.解决: 后来google下发现了解决办法,原来是我新安装了 ...
随机推荐
- iOS多线程——GCD与NSOperation总结
很长时间以来,我个人(可能还有很多同学),对多线程编程都存在一些误解.一个很明显的表现是,很多人有这样的看法: 新开一个线程,能提高速度,避免阻塞主线程 毕竟多线程嘛,几个线程一起跑任务,速度快,还不 ...
- C++ Primer 笔记 第三章
C++ Primer 第三章 标准库类型 3.1using声明 例: using namespace atd; using std::cin; 3.2string类型 初始化方式 string s1 ...
- C++ Primer 笔记 第一章
C++ Primer 学习笔记 第一章 快速入门 1.1 main函数 系统通过调用main函数来执行程序,并通过main函数的返回值确定程序是否成功执行完毕.通常返回0值表明程序成功执行完毕: ma ...
- python爆破定长密码脚本
def get_pwd(str, num):#str为可选字符集,num为密码长度 if(num == 1): for x in str: yield x else: for x in str: fo ...
- css 样式重置
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...
- 自己动手系列——实现一个简单的ArrayList
ArrayList是Java集合框架中一个经典的实现类.他比起常用的数组而言,明显的优点在于,可以随意的添加和删除元素而不需考虑数组的大小.处于练手的目的,实现一个简单的ArrayList,并且把实现 ...
- HTTP学习目录
前面的话 除了HTML.CSS.javascript这三门前端基础知识之外,HTTP恐怕是前端工程师最需要掌握的知识了,它是前端和后端沟通的桥梁,前端工程师需要能够调试HTTP.修复网络传输中可能遇到 ...
- ios 动画学习的套路 (二)
有它们俩你就够了! 说明:下面有些概念我说的不怎么详细,网上实在是太多了,说了我觉得也意义不大了!但链接都给大家了,可以自己去看,重点梳理学习写动画的一个过程和一些好的博客! (一) 说说这两个三方库 ...
- 自己动手系列——实现一个简单的LinkedList
LinkedList与ArrayList都是List接口的具体实现类.LinkedList与ArrayList在功能上也是大体一致,但是因为两者具体的实现方式不一致,所以在进行一些相同操作的时候,其效 ...
- python 模块加载错误总结
在运行yum时提示如下错误 There was a problem importing one of the Python modules required to run yum. The error ...