在浏览器控制台输入 crtl + shift + P ,输入 rendering 选择 show rendering 。查看页面渲染过程等。
加载流畅的4个因素：RAIL Response Animate Idle Load
CSS Trigers 这个网站可以查询哪些属性回造成 layout paint composition
可以看到，大部分的属性都回造成 layout + paint + composition,占到 2/3 的属性，只会触发 composition 的属性是很少很少的。
而 transform 就是只会触发 composition 中的一员。
理想的情况下：任何涉及动作或屏幕手指操作的互动，都需要60帧/秒
浏览器中运行的代码可能不是我们编写的代码，因为现代浏览器引擎会编译代码，从而使运行速度更快，这一个过程是通过 Just In Time 即时编译器 JIT 完成的。
不要尝试微优化代码，因为我们不知道JavaScript 引擎到底把我们的代码编译成什么样子了。
每一帧 也就是16ms 内，JavaScript 执行的时间应该控制在3-4ms，其他的时间还要做 样式计算，图层管理，渲染合并（style calculation, layer management, compositing）。requestAnimationFrame 可以做这样的事情。
获取 offsetWidth 属性会导致 layout (Javascript -> style -> layout -> paint -> composition)
关于独立图层：
将元素放入独立图层里面，非常有助于绘制问题，特别是动作和透明度相关的属性的更改。如果是文本颜色或者阴影，将属性放入独立图层里面也不会有什么帮助，因为我们最终是要绘制它的，所以，需要再合理的情况下为元素创建新的图层。
使用 will-change :transform or transform: translatez(0) 属性将元素放入单独的图层。此属性就是提前一点时间告诉浏览器，我们将会改变此元素（移动等操作），让浏览器做好准备。
对于动画这种工作，需要达到60帧/秒， update layer and composite layer 不应该超过 2ms (在课程中给出的示例中确实没有超过2毫秒，0.31(低的) - 1.06（高的）)
以上的两个元素不能大量使用，因为会占用内存，使用的越多占用的内存就越大，特别是在移动端上，这个缺点会表现的很明显。
