简述浏览器渲染机制

这次简单聊聊我对浏览器的渲染机制的理解。首先需要提到几个基本概念：
DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：

Layout: 计算出Render Tree每个节点的具体位置。
Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。

---

下面我们来说说具体的流程。
如何通过url获取对应的html文件的过程我就不详细介绍了，不熟悉的同学可以看看输入url到页面返回的全过程

当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
加载说的就是获取资源文件的过程，如果在加载的过程中，遇到外部css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。
但是如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

为什么html需要等待javascript呢？因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。

好了，接下来我们介绍渲染的细节，html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。
css文件下载完后也会进行渲染，生成相应的CSSOM。
当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。
接下来，浏览器就会进入Layout环节，将所有的节点位置计算出来。
最后，通过Painting环节将所有的节点内容呈现到屏幕上。

我们理解的重排和重绘也就是分别触发了Layout环节和Painting环节。现在是不是清晰多了呢？

---

我们以百度为例通过Timeline来看看：

可以看到，html文件，css文件和部分javascript是在一开始就加载完成的。然后html和css配合进行render阶段，最后大量的javascript进行加载。而整个过程中都伴随着零散文件如图片的加载。

当然，每个浏览器对于渲染的实现机制都不相同，比如说chrome会在一开始就将不影响DOM结构的javascript也异步加载从而进一步提高性能等。以上的过程也只是我个人的理解，如果有什么不严谨的地方，还望大神提出。