使用css来开启硬件加速来提升网站性能

1、什么是硬件加速

硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器，这样就可使得animation与transition更加顺畅。咱们能够在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提高性能。

 

2、硬件加速的原理

浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后造成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每个渲染元素会被分到一个图层中，每一个图层又会被加载到GPU造成渲染纹理，而图层在GPU中transform 是不会触发 repaint 的，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

CSS transform 会建立了一个新的复合图层，能够被GPU直接用来执行 transform 操做。

浏览器何时会建立一个独立的复合图层呢？事实上通常是在如下几种状况下：

• 3D 或者 CSS transform
• <video> 和 <canvas> 标签
• CSS filters
• 元素覆盖时，好比使用了 z-index 属性

 

3、为何硬件加速会使页面流畅

由于 transform 属性不会触发浏览器的 repaint（重绘），而绝对定位absolute中的 left 和 top 则会一直触发 repaint（重绘）。为何 transform 没有触发 repaint 呢？简而言之，transform 动画由GPU控制，支持硬件加速，并不须要软件方面的渲染。

 

4、哪些css属性能够触发GPU的硬件加速

transform，opacity，filter

 

5、如何在桌面端和移动端用css开启硬件加速

SS 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)表现更好的缘由。硬件加速在移动端尤为有用，由于它能够有效的减小资源的利用(移动端自己资源有限)。

 

6、使用硬件加速的问题与解决方法

1.使用GPU渲染会影响字体的抗锯齿效果。这是由于GPU和CPU具备不一样的渲染机制。即便最终硬件加速中止了，文本仍是会在动画期间显示得很模糊。

2.使用GPU可能会致使严重的性能问题，由于它增长了内存的使用，并且它会减小移动端设备的电池寿命。若是GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤其明显，因此，必定要牢记不要让页面的每一个元素都使用硬件加速。

举个例子：

页面中头部的轮播动画元素的存在竟然会致使下面全部相对和绝对定位的元素都被放到复合层中。。。

跳坑方法：

使用3D硬件加速提高动画性能时，最好给元素增长一个z-index属性，人为干扰复合层的排序，能够有效减小chrome建立没必要要的复合层，提高渲染性能，移动端优化效果尤其明显。

.isaax{
  position: relative;
  z-index: 1;  // 能够设大点，尽可能设得比后面元素的z-index值高
}

 

该博文转自：

http://www.cnblogs.com/ranyonsue/p/8296983.html