上一篇，我们介绍了DOM，CSSOM和渲染树是怎么回事，如果有不知道的，最好先回顾一下这篇文章Web渲染性能，DOM，CSSOM和渲染，看完这个你就全懂了(一)， 接下来将继续我们的渲染历程。
渲染顺序
理解这个过程对开发设计人员来说很关键，它会帮助我们设计站点的时候充分考虑到用户体验和性能问题。页面加载后，浏览器会构造DOM，CSSOM和渲染树，当这些都创建好之后，就会开始在屏幕上绘制每一个元素。
布局操作
首先浏览器给每个渲染树节点创建布局(layout)信息, 它包含了节点的将来显示的位置数据(像素点位置)。这个过程叫布局(Layout)，也可以叫回流(reflow), 因为它也可能发生在窗口的大小改变，滚动等事件或DOM元素操作中。
注：我们应该尽量避免页面产生多次布局操作，因为这是代价昂贵的操作。
显示操作
到现在为止，我们已经有了一棵渲染树，也就是节点位置列表，包含了需要显示的所有信息。
因为渲染树上的节点可以重叠显示，它们的CSS属性，决定了它们的外观，位置，如何变化(动画)。我了更好的控制渲染，浏览器引入了层的概念。建立层，浏览器可以高效地在页面生命周期内执行显示操作。层也可以帮助元素以堆栈的形式显示(Z轴方向)。
在每一层，浏览器将会显示元素的每一个像素，比如边框，背景，颜色，阴影，文字等。这个过程也叫栅格化。为了改进性能，浏览器必须使用不同的线程去做这种栅格化操作。
这个层跟Photoshop中的层类似，你可以通过Chrome开发者工具看到页面中的不同层。打开开发者工具->更多工具->选择层，你将会看到更多细节。
注：栅格化通常是CPU完成的，但现在我们有新技术可以使用GPU来做这个操作，从而提高性能
合成操作
直到现在，我们还没有在显示器上画出任何一个像素。我们有的只是一些不同的层(位图Bitmap Image)，这些层将会以特定的顺序被显示出来。在合成操作中，它们将被发送给GPU，最终显示在显示屏上。
一次性发送所有层显然是低效的。因为如果有回流或者重绘操作，这个每次都会发生。所以一个层会被打碎成很多个可显示的小块(Tiles)。你可以在开发者工具的渲染面板中看到这些小块。
综合上面的信息，我们可以看到浏览器的事件顺序，我们把这个执行顺序叫做关键渲染路径，如下图。
关键渲染路径(Critical Rendering Path)
浏览器引擎
创建DOM树，CSSOM树和处理渲染逻辑的工作，是被一个叫做浏览器引擎的软件完成的。它内置于浏览器中。这个引擎包含了渲染所需要的所有东西，能够把从HTML字符串文档最终转化成屏幕上的像素点。
如果你听人们讨论WebKit, 他们就是在说浏览器引擎。WebKit是APPLE Safari浏览器的默认引擎。Google Chrome使用的是Blink, 微软最新的Edge浏览器也使用了跟Chrome一样的引擎。还有一些其他公司的，比如Firefox...
浏览器中的渲染过程
我们都知道，JavaScript语言是遵循ECMAScript标准的， 因此每个JavaScript引擎比如
