什么是GPU加速？GPU加速能做什么
众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画……
一。 GPU 加速能做什么?
首先我们要了解什么是 16ms 优化
大多数设备的刷新频率是 60 次/秒，(1000/60 = 16.6ms)也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。
浏览器在一帧里面，会依次执行以下这些动作。减少或者避免 layout，paint 可以让页面不卡顿，动画效果更加流畅。
1。 JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
2。 Style(计算样式)：确定每个 DOM 元素应该应用什么 CSS 规则。
3。 Layout(布局)：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
4。 Paint(绘制)：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
5。 Composite(渲染层合并)：按照合理的顺序合并图层然后显示到屏幕上。
利用 GPU 加速优先使用渲染层合并属性，避免 layout，paint。
从上图可以看出，可以通过改变元素的 transform 实现移动，伸缩变换而非改变物体的 left，top，width，height 避免 layout，paint。让动画效果更加流畅。
优化
二。 GPU 是什么，如何用 Chrome devtools 进行分析 debug?
浏览器渲染一个页面大致是按照下面这个步骤执行。
1。 获取 DOM 并将其分割为多个层(RenderLayer)
2。 将每个层栅格化，并独立的绘制进位图中
3。 将这些位图作为纹理上传至 GPU
4。 复合多个层来生成最终的屏幕图像(终极 layer )。
Chrome 开启查看 renderlayer
按上面的步骤之后，即可看到
