使用CSS3开启GPU硬件加速提升网站动画渲染性能

中文地址：http://www.cnblogs.com/rubylouvre/p/3471490.html

原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

你知道我们可以在浏览器中用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或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可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。

使用CSS3开启GPU硬件加速提升网站动画渲染性能相关推荐

css怎么使用gpu加速,用CSS3开启GPU硬件加速来提升网站的动画渲染性能
CSS3为咱们开发动画效果大大提升了效率,但有些动画效果,如果涉及的DOM元素比较多,会发现有"卡卡"的感觉,为动画DOM元素添加CSS3样式 -webkit-transform: ...
[Linux RK Debian 10] chrome浏览器开启GPU硬件加速｜CSDN创作打卡
platform:RK OS:Linux Kernel: 4.4.143 filesystem:debian10 文章目录简易查看GPU硬件加速开启GPU硬件加速 (1) 启动桌面的浏览器加速配置 ...
【windows通过修改注册表开启GPU硬件加速】
微软前些日子发布的Windows 10 v2004已经支持硬件加速GPU调度功能 , 可以用来提高中低端显卡的整体显示的性能. 然而并不是所有的用户都能用上高端显卡,像我这种穷的叮当响的都是用低端显卡 ...
matlab win10 gpu加速,win10怎么开启gpu加速有用吗 GPU硬件加速设置方法介绍
win10怎么开启gpu加速有用吗 GPU硬件加速设置方法介绍作为Windows 10的一项重要功能,微软在分享了GPU硬件加速细节后,现在还为大家送上了开启它的技巧,对于中低端设备来说,提升效果还 ...
安卓禁用硬件加速_开/关大不同 Android4.0 GPU硬件加速实测
你也许会觉得Android4.0的升级之处不够多,无法让你有足够动力升级,但很多东西是隐藏在其中等待发掘的.倘若你此前对于Android系统的流畅度(好吧,尤其是应用程序的流畅度)不满,一定不要错过这 ...
android gpu 参数,开/关大不同 Android4.0 GPU硬件加速实测
你也许会觉得Android4.0的升级之处不够多,无法让你有足够动力升级,但很多东西是隐藏在其中等待发掘的.倘若你此前对于Android系统的流畅度(好吧,尤其是应用程序的流畅度)不满,一定不要错过这 ...
[css] 说说你对GPU的理解，举例说明哪些元素能触发GPU硬件加速？
[css] 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速? GPU: 图形处理器,用于处理图形有关的任务,用于渲染页面在css中使用 transform: translateZ(0),可 ...
通过硬件层提高Android动画的性能
通过硬件层提高Android动画的性能转自http://www.devtf.cn/?p=1195 曾有许多人问我为什么在他们开发的应用中,动画的性能表现都很差.对于这类问题,我往往会问他们:你们有尝 ...
matlab win10 gpu加速,win10的Edge浏览器设置GPU硬件加速，大幅度提升浏览器性能
不知道大家对于GPU硬件加速是否有了解,这是现在的浏览器必备的功能,开启后能大幅度提升浏览器的性能,给我们更加顺滑的浏览体验.GPU硬件加速能够利用GPU的图形性能,加速渲染网页中的图像信息. 如果我 ...

使用CSS3开启GPU硬件加速提升网站动画渲染性能

在桌面端和移动端用CSS开启硬件加速

总结

使用CSS3开启GPU硬件加速提升网站动画渲染性能相关推荐

最新文章

热门文章