http://www.cnblogs.com/PeunZhang/p/3510083.html
你知道我们可以在浏览器中用css开启硬件加速,使GPU (
Graphics Processing Unit) 发挥功能,从而提升性能吗?
现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。
在桌面端和移动端用CSS开启硬件加速
CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。
现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。
例如:
.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
可是在一些情况下,我们并不需要对元素应用3D变换的效果,那怎么办呢?这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
虽然我们可能不想对元素应用3D变换,可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
在webkit内核的浏览器中,另一个行之有效的方法是
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
原生的移动端应用(Native mobile applications)总是可以很好的运用GPU,这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用,因为它可以有效的减少资源的利用(麦时注:移动端本身资源有限)。
总结
只对我们需要实现动画效果的元素应用以上方法,如果仅仅为了开启硬件加速而随便乱用,那是不明智的。
小心使用这些方法,如果通过你的测试,结果确是提高了性能,你才可以使用这些方法。使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。
你有在项目中使用过这些方法吗?如果有,请分享你的精彩案例吧。
作者:白树
出处:http://peunzhang.cnblogs.com/
分享到:
相关推荐
主要介绍了详解CSS3开启硬件加速的使用和坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
css3硬件加速滑块
Accelerate.css 使用CSS强制启用硬件加速,以加快Web性能。 只需下载css文件并将其包含在您的项目中即可。 <link rel="stylesheet" type="text/css" href="accelerate.css" /> 或者...自己包括在内。 只需将其...
css3动画仿加速球水波流动效果 参考地址: https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
人民邮电(图灵)-CSS重构:样式表性能调优.201711.epub 人民邮电(图灵)-CSS重构:样式表性能调优
tinySlider 使用css3硬件加速滑块。 您可以通过移动尝试
在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种... 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画
主要介绍了CSS性能优化提高css性能的方法,不规范的css会导致很多性能问题,所以学习掌握css性能优化技巧是非常必要的,对css性能优化知识感兴趣的朋友一起学习吧
网站css格式网站css格式网站css格式
css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
本页面用于测试各个浏览器对CSS3的解释效果,左边的“图像”并非图片,而是纯CSS。目前各个浏览器对CSS3的支持效果不一样,其中IE系的浏览器支持效果最差。
CSS重构:样式表性能调优 CSS重构:样式表性能调优 CSS重构:样式表性能调优
在本文中,我将列出五个CSS性能工具,这些工具将帮助您将网站置于CSS架构上,以实现快速加载体验。 为什么页面速度如此重要? 快速加载的网站对于网站的成功至关重要。有研究发现支持以下观点:如果用户不得不等待...
Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画,不会引起页面的重绘,使它比其它CSS动画库具有更高的性能。
Morf.js 是一种用于硬件加速 CSS3 转换的 Javascript 解决方案,具有自定义缓动功能。是否曾经想要制作具有比linear、ease、ease-out或更引人注目的效果的 CSS 过渡ease-in?cubic-bezier那么现在你可以了!