我们之前已经学到并非所有样式更改都是对等的，某些会触发布局，绘制和渲染层合成流程，某些只会触发绘制和渲染层合成流程，而某些仅触发渲染层合成流程，在这节课里，你将学习如何优化渲染管道的最后两个阶段，及绘制和渲染层合成。如果你想详细了解样式是如何影响到渲染管道的，请看https://csstriggers.com/，如果你想知道你要创建动画效果的内容是否会触发布局，绘制和合成流程也可以看看https://csstriggers.com/。
我们来看看我们的工具包中有没有解决绘制难题的工具，绘制流程通常是最能干扰帧率的方面，而这正是我们要避免的，我们看看https://www.html5rocks.com/static/demos/parallax/demo-1a/demo.html，当你向下滚动时看起来很正常，但是可以做的更好，该网站出现了大量的绘制工作，绘制问题会比你肯能遇到的任何其他性能瓶颈都要糟糕。我将打开开发者工作，看看发生了什么情况，打开rendering，如果你担心流程的话，就可以通过选中该项看看发生了什么情况，它会告诉你绘制流程在页面上的什么地方发生了，何时发生了。
知道需要页面的哪个图层时就会出现该记录，它会查看元素的样式并尝试弄清楚所有元素应该按照什么顺序，需要多少个图层。composite layershi另一种记录，此时浏览器会将页面合成到一起发送给屏幕，图层越多，图层管理和合成话费的时间就越多，所以我们需啊哟在降低绘制时间和增加图层管理时间之间做出权衡。
你可能认为图层是完全自动化的流程，大部分情况是这样。一般来说，你应该让浏览器来管理图层，因为它知道它在干什么。是的，但是如果你遇到了绘制问题，就需要考虑将某个元素放到一个图层里，你可能有疑问，如何创建图层呢？在介绍方法之前，你应该看看元素是否已经具有自己的图层，
打开开发者工具
这些线条表示每个图层拆分成的图块，作为开发者，我们是没法控制这些图块的，这只是浏览器拆分图层的方式，但是我们感兴趣的是这些方块，可以在圆圈周围看到，这些方框表示这些元素位于自救的合成图层上，那么我如何创建图层呢？图层看起来很有用，某些方式适用于几乎所有浏览器，而某些却比其他更具技巧性，我们从更新的不太技巧性的方式开始，在chrome和firefox中你可以使用will-change css属性，告诉浏览器将出现外观更改，浏览器然后可以选择将元素放到新的合成图层上，这里我们使用will-change：transform告诉浏览器我们打算在某个时间点更改元素transform，为此，浏览器会创建新的图层，除了transform之外，你也可以使用left，top，width，height或其他任何外观属性，但即使浏览器预料到会有这些更改，依然会为这些属性运行布局和绘制流程，所以提前警告你打算更改它们，也不会有多大改善，will-change：transfrom的好处是创建新的图层代价很高，因为需要创建并绘制新的图层，对于旧的浏览器和safari，你需要使用某种3d transform，实际上transform：translateZ(0)是最常见的形式，多数人称之为没有转换，他会应用3D转换，在Z空间内完全变动元素的位置，但是足以促使浏览器创建图层。
你不应该使用不必要的技巧，如今并非所有的浏览器都支持will-change所以你可能需要用到null transform 技巧强制浏览器采取操作，而will-change只是一个暗示，浏览器可以忽略，使浏览器具有更多选项。在可能时尽量让浏览器决定该如何操作，通过will-change向浏览器发出暗示，但是浏览器决定如何处理。
将元素放入独立图层中非常有助于避免绘制问题，尤其是与动作或透明度相关的更改，但是如果你更改的是文本或阴影时，将元素放入独立图层中也没有帮助，因为你依然需要绘制它，所以仅在合理的情况下使用新的图层。
所以应该提前警告所有元素，对吗？告诉浏览器我们将更改所有内容，对啊，我觉得有帮助。并非如此，我之前提到了图层管理和渲染层合成并不是独立分开的，我们需要在二者之间找到平衡点。至于应该要达到多少个图层并没有一个绝对数量，对于动画这样的关键性工作，要达到60帧 ／ 秒，更新图层不应该超过2毫秒，合成流程也不能超过2毫秒，当然了，虽然超过了这些时间，也没有那么糟，关键在于找到权衡点为自己的项目确定正确的图层数量。
之前我们讨论了你不会出发渲染管道的每个部分，实际上工作量很大程度上取决于你更改了哪个属性经常有人问我是应该用js还是CSS使样式产生动画效果，哪个更快，实际上根本关系不大，大部分情况下速度是一样的，原因在与无论如何更改，更改宽度都会出发布局，无论使用js还是css，如果你更改了宽度，高度，顶部，左侧就会触发布局，如果触发布局就会触发绘制流程，或者只是更改了元素的盒阴影，这不会触发布局，但是会触发绘制流程，而绘制流程代价非常高，尤其是在移动设备上，你不能触发布局而不触发绘制流程，需要小心都更改了哪些样式，何时更改的，在生命周期里，及RAIL过程，包括响应，动画，闲置和加载，你可以在加载，闲置和响应时间里执行这些代价高的样式更改，但是不能在动画过程，对，在动画过程里，你需要尽量避免，布局和绘制流程，因为通常时间成本实在太高，无法满足有限的时间预算，如果不行的话，则需要找到减少影响的方式，在下节课里我们将讨论着方面的知识。