Create 先说问题，有些页面在客户端动画卡顿。

怎么解决呢，双方比较简直就和买家秀和卖家秀一样

老生常谈之硬件加速

就是所谓的 浏览器内置加载VS硬件加载（GPU：他娘的太冷了，终于轮到我发热了么），将浏览器的渲染过程交给GPU处理，
而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能

现在大多数客户端（电脑，手机，老旧机顶盒{Android>=4.0,4.0以下回归ie6深渊}）的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。

那么咱么首先翻翻谷歌硬件加速原理

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

简单来说就是文本渲染归浏览器本体，脱离图层由GPU硬件来渲染，transform 属性不会触发浏览器的 repaint（重绘），transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染，而绝对定位absolute中的 left 和 top 则会一直触发 repaint（重绘）。

那可能有人会问半脱离文档和全脱离文档流不也算脱离文档图层嘛，还不能算的

浏览器什么时候会创建一个独立的复合图层呢？事实上一般是在以下几种情况下：

1 3D 或者 CSS transform
2

开启按钮之 指鹿为马

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

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

在一些情况下，我们并不需要对元素应用3D变换的效果，那怎么办呢？这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速（指鹿为马）。

虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。举个栗子：transform: translateZ(0); 来开启硬件加速 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.cube {  
  
 -webkit-transform: translateZ(0);  
  
 -moz-transform: translateZ(0);  
  
 -ms-transform: translateZ(0);  
  
 -o-transform: translateZ(0);  
  
 transform: translateZ(0);  
  
 /\*GPU劳工：指鹿为马\*/  
  
}

使用硬件加速的问题 （国不将国）

1内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。

2使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

总结

慎行。如果通过你的测试，结果确是提高了性能，你才可以使用这些方法。使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。(一切为客户体验服务第一位的前端之说)

下面是华为机顶盒强行硬件加载坏掉的栗子。

Image text;

下一篇咱们讨论一下css抗锯齿优化