HTML5网站性能提升之硬件加速

2016-10-25 11:32:13147

近日我公司官方网站发布的部分文章被其同行抄袭或转载,敬告哪些抄袭者,请尊重他人的劳动成果,我们希望创造的一个良性的环境,创新的产品和服务方能取胜。

HTML5网站的盛行之后,每次打开网站总感觉电脑力不从心的感觉,卡的不行,随之将电脑的硬件配置进行了升级,天晓得越升级越卡,有米有啊,当时就想是不是类似的HTML高端网站建设在技术上做了处理,比如是不是能够监控客户端配置,尽可能的提升客户端的性能,将电脑的性能发挥到极致,让其网站或其应用更为的流畅。当时也没去深入研究这个问题了。

近来发现确实存在这么牛逼的技术,在浏览器中通过CSS启动硬件加速(开启GPU)让其发挥性能,提升网站体验。现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

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

CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。

现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。