浏览器解析文档资源并渲染

浏览器是这么解析文档资源并渲染页面的流程是咋样？

1.浏览器通过HTMLParser（HTML解析器）根据深度遍历的原则把HTML解析成DOM Tree（dom树） || 将HTML解析出DOM Tree

2.浏览器通过CSS Parser（CSS解析器）将CSS解析成CSS Rule Tree（CSSOM Tree --- css规则树） || 将CSS解析出CSS Tree

3.浏览器将JavaScript通过DOM API或者CSSOM API 将JS代码解析并应用到布局中，按要求呈现响应的结果。|| js引擎专门处理js脚本的虚拟机，解析js代码 并把 操作 DOM Api、CSSOM Api的解析到布局中，从而按程序要的要求呈现相应的结果

4.根据DOM Tree（dom树）和CSSOM Tree（cssom 树）来构造render Tree || 生成渲染树

5.layout || reflow: 重排（别名回流），当render tree 中任意一节点的几何尺寸发送变化，render tree就会重新布局，重新来计算所有节点在屏幕的位置 || 渲染中的一种行为。当rendertree中任一节点的几何尺寸发生改变了，render tree都会重新布局。

6.repaint（重绘）:当render tree 中任一元素样式属性（几何尺寸没有改变）发送改变时，render tree 都会重新画，比如字体颜色，背景颜色等变化 || 渲染中的一种行为。render tree中任一元素样式属性（几何尺寸没改变）发生改变了，render tree都会重新画，比如字体颜色、背景等变化。

7.paint（遍历）:遍历render tree ，并调动硬件图形API来绘制每个节点

参考：

一篇文章搞定前端面试（https://juejin.im/post/5bbaa549e51d450e827b6b13）

2019 面试准备 - JS 防抖与节流（https://juejin.im/post/5c87b54ce51d455f7943dddb）

浏览器渲染页面过程剖析（https://www.jianshu.com/p/32ca5f1c0768）