浏览器渲染原理及流程

为什么要了解浏览器加载、解析、渲染这个过程？

• 了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。
• 了解浏览器如何进行解析，我们可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
• 了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写js文件时，可以减少”重绘“”重新布局“的消耗。

渲染主流程

渲染引擎首先通过网络获得所请求文档的内容，下面是渲染引擎在取得内容之后的基本流程：
解析html以构建dom树->构建render树->布局render树->绘制render树

html的渲染过程就是:

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

解释下几个概念：

DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简