发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
翻译文章,原文地址:http://blog./increase-your-sites-performance-with-hardware-accelerated-css。
你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?
现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。
CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。
现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。
例如:
.cube {
-webkit-transform: translate
3
d(
250px
,
)
rotate
-120
deg)
scale
0.5
);
}
可是在一些情况下,我们并不需要对元素应用3D变换的效果,那怎么办呢?这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
虽然我们可能不想对元素应用3D变换,可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。
-webkit-transform: translateZ(
0
-moz-transform: translateZ(
-ms-transform: translateZ(
-o-transform: translateZ(
transform: translateZ(
/* Other transform properties here */
在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:
-webkit-backface-
visibility
:
hidden
;
-moz-backface-
-ms-backface-
backface-
-webkit-perspective:
1000
-moz-perspective:
-ms-perspective:
perspective:
在webkit内核的浏览器中,另一个行之有效的方法是
-moz-transform: translate
-ms-transform: translate
transform: translate
原生的移动端应用(Native mobile applications)总是可以很好的运用GPU,这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用,因为它可以有效的减少资源的利用(麦时注:移动端本身资源有限)。
只对我们需要实现动画效果的元素应用以上方法,如果仅仅为了开启硬件加速而随便乱用,那是不明智的。
小心使用这些方法,如果通过你的测试,结果确是提高了性能,你才可以使用这些方法。使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。
你有在项目中使用过这些方法吗?如果有,请分享你的精彩案例吧。
如果您觉得这文章对您有帮助,可以打赏点钱给我,鼓励我继续写博,我的支付宝
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
[css] 第118天 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速?
[css] 第118天 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速?前端面试每日3+1,以面试题来驱动学习,每天进步一点!学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯...
用IE9 Beta之前你应该了解的9件事
第二,安装IE9 Beta版后,系统中原有的IE7或IE8将被覆盖,你将只有IE9可以使用,如果你因为工作原因必须要使用旧版IE浏览器,那一定要慎...
IE9:九个不得不说的秘密
IE9:九个不得不说的秘密IE9:九个不得不说的秘密。IE9已经越来越近,我们曾为大家介绍过IE7、IE8和IE9的差别,如果这还不足以让你对IE9...
关闭硬件加速 解决IE9假死现象
关闭硬件加速 解决IE9假死现象。IE9可通过硬件加速实现网页渲染。但如果你的电脑配置有点旧,那么Vista和Win7的图像加强效果就不好,打...
前端性能优化(CSS动画篇)
比如一个图层包含很多节点,其中有个gif图,gif图的每一帧,都会重回整个图层的其他节点,然后生成最终的图层位图。所以这需要通过特殊的方式来强制gif图属于自己一个图层(translateZ(0)或者translate...
前端性能优化之更平滑的动画 | w3cTrain
前端性能优化之更平滑的动画 | w3cTrain.执行动画尽量使用CSS3 keyframes和 trainsition如果需要JS执行动画,使用requestAnimationFrame...
浏览器极致性能调优之——浏览器合成与渲染层优化
浏览器极致性能调优之——浏览器合成与渲染层优化一个 CSS 属性引发的血案。构建 DOM 树:浏览器将 HTML 解析成树形结构的 DOM 树,一般...
Javascript高性能动画与页面渲染
m++) { // DEMO 版本 //movers[m].style.left = ((Math.sin(movers[m].offsetTop + timestamp/1000)+1) * 500) + ''px''...
GPU 加速是什么
GPU 加速是什么。7. 元素A有一个 z-index 比自己小的元素B,且元素B是一个合成层(换句话说就是该元素在复合层上面渲染),则元素A会提...
微信扫码,在手机上查看选中内容