众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画……
一. GPU 加速能做什么？

首先我们要了解什么是 16ms 优化

  • 大多数设备的刷新频率是 60 次/秒，（1000/60 = 16.6ms）也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。
  • 浏览器在一帧里面，会依次执行以下这些动作。减少或者避免 layout，paint 可以让页面不卡顿，动画效果更加流畅。

image

  1. JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
  2. Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
  3. Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
  4. Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
  5. Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。
利用 GPU 加速优先使用渲染层合并属性，避免 layout，paint。

image

从上图可以看出，可以通过改变元素的 transform 实现移动，伸缩变换而非改变物体的 left，top，width，heigh