• 使用 transform 来做动画，避免回流重绘：transition: transform 300ms linear；启用GPU加速，避开重排和重绘的环节，将进度条单独提升到一个图层，即不影响其它元素
• will-change: transform ：will-change 能告知浏览器元素会有哪些变化，这样浏览器能在变化之前做好优化准备工作，将一部分复杂计算提前准备好，所以页面的反应更加快速灵敏；最好的使用方式是在动画在要开始的时候加上这个属性，结束移除。如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。
• transitionend 函数：监听动画结束之后移除 transition

node.addEventListener("transitionend", OnTransitionEnd, false);

• 将要进行动画的动态节点和静态节点，在 HTML 上进行结构分离，避免可能影响静态节点

浏览器渲染的关键步骤

• Styles（样式）: 浏览器计算要应用于元素的样式；
• Layout（布局）：浏览器计算每个元素生成形状和位置，比如 width、height、margin、left/top/right/bottom 这些；
• Paint（渲染）：浏览器将每个元素的像素填充到图层中；
• Composite（合成）：浏览器开始在屏幕上绘制所有图层的时候；

在第四步合成上，使用 transform 和 opacity 两个属性实现四种最常用的动画：

• 位置动画：translateX(n) translateY(n) translateZ(n);
• 大小动画：transform: scale(n);
• 旋转动画：transform: rotate(ndeg);
• 不透明度动画：opacity: n;