文章已同步至掘金：https://juejin.cn/post/6844903888751968264
欢迎访问😃，有任何问题都可留言评论哦~

1.DOM(DOM树)：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。

2.CSSOM(CSS树)：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。

3.Render Tree(渲染树): DOM和CSSOM合并后生成Render Tree，如下图：
browser-render-1
4.Layout: 计算出Render Tree每个节点的具体位置。

5.Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。

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

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

browser-render-2

1.当用户输入一个URL时，浏览器就会向服务器发出一个请求，请求URL对应的资源

2.接受到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一棵DOM树，DOM树的构建是一个深度遍历的过程，当前节点的所有子节点都构建完成以后，才会去构建当前节点的下一个兄弟节点。

3.将CSS解析成CSSOM树（CSS Rule Tree）

4.根据DOM树和CSSOM树，来构建Render Tree（渲染树）,注意渲染树，并不等于DOM树，因为一些像head或display:none的东西，就没有必要放在渲染树中了。

5.有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义，以及它们的从属关系，下一步操作就是Layout,顾名思义，就是计算出每个节点在屏幕中的位置。

6.Layout后，浏览器已经知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置是哪里，就进入了最后一步painting,按照算出来的规则，通过显卡，把内容画到屏幕上。

至此，整个页面就在浏览器上渲染成功了

浏览器是如何把代码渲染到页面上的？

^_<