前言说到浏览器硬件加速，大家必须知道的一个技巧就是在使用CSS3做动画的时候给元素加上transform:translateZ(0)或者transform:translate3d(0,0,0)。GPU的硬件加速会开启，本该由浏览器处理的动画效果会被转移到GPU中处理，让动画看起来更流畅，移动端体验更好。本文将进一步探究其中的奥秘，比如什么条件下可以触发GPU硬件加速？硬件加速背后的工作原理是什么？是不是开启GPU硬件加速的动画越多越好？首先我们来看一个动画效果，利用CSS3的动画属性，让一个球从坐着的位置向右移动200px。现在有两种实现方式：第一种方式是改变元素的top属性：.ball1{width:100px;高度：100px；边框半径：100px；背景：红色；}.ball1{动画：mymove3s无限线性；-moz-动画：mymove3s无限线性；-webkit动画：mymove3s无限线性；-o-animation:mymove3sinfinitelinear;}@keyframesmymove{from{top:0px;}to{top:200px;}}第二种方法通过translate实现：.ball1{animation:translateMove3sinfinitelinear;-moz-animation:translateMove3s无限线性；-webkit-animation:translateMove3s无限线性；-o-animation:translateMove3sinfinitelinear;}@keyframestranslateMove{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,200px,0)}}两种方式都可以达到同样的效果，但是浏览器在内部渲染它的过程是完全不同的。哪个实现更好？在回答这个问题之前，我们先来看看浏览器的渲染过程。在浏览器渲染过程中众所周知，JS是单线程工作的，但是浏览器是可以开多线程的。渲染一个网页需要两个重要的线程一起完成：MainThreadMainThreadCompositorThreadCompositorThread主线程干的工作：运行JS计算HTML元素的CSS样式布局页面，并将元素绘制成一张或多张位图手这些bitmapstotheCompositorThread处理compositorthread所做的工作：通过GPU将位图绘制到屏幕上通知主线程更新页面可见或即将可见部分的位图计算哪些页面部分可见计算滚动页面时页面哪些部分即将可见滚动页面时将相应位置的元素移动到可见区域了解了这两个线程负责的部分后，我们来看在浏览器的渲染过程中。大致过程如下：当我们通过某种方法导致浏览器回流时，我们需要再次经过样式和布局阶段，导致浏览器重新计算页面中每个dom元素的大小并重新-布局，伴随着重绘，这个过程非常耗时。为了尽量降低成本，当然最好只留下复合步骤。假设当我们改变一个容器的样式时，只影响它自己，不需要重新绘制。直接在GPU中改变贴图的属性来改变样式不是更好吗？elements如何实现这种效果呢？就是让元素有自己的层（layer）。有了图层的概念，我们再从图层的概念来看浏览器的渲染过程：获取DOM并将其分成多个图层（RenderLayer），将每一图层光栅化，独立绘制成位图，这些位图作为纹理上传到GPU合成多个层以生成最终的屏幕图像（最终层）。这个过程可以理解为设计师的Photoshop文件。在ps源文件中，一张图片是通过叠加几层来显示的。分成多层的好处是每一层都相对独立，易于修改。对单个图层的修改不会影响页面上的其他图层。因此，图层（layer）的意义在于：以最小的代价改变某个页面元素。可以将一个css动画或者js交互效果提取到一个单独的渲染层，达到加速渲染的目的。那么如何创建图层呢？3dtransform属性backface-visibilityishidden元素使用加速视频解码
