渲染主流程渲染引擎首先通过网络获取请求文档的内容，一般以8K块为单位。下面是渲染引擎获取内容后的基本流程：解析html构建dom树->构建渲染树->布局渲染树->绘制渲染树这里有几个概念给大家讲解一下理解：DOM树：浏览器将HTML解析成树状的数据结构。CSSRuleTree：浏览器将CSS解析成一个树状的数据结构。RenderTree：RenderTree是DOM和CSSOM合并后生成的。layout：通过RenderTree，浏览器已经可以知道网页中有哪些节点，每个节点的CSS定义以及它们的从属关系，从而计算出每个节点在屏幕上的位置。绘画：根据计算出的规则，通过显卡在屏幕上绘制内容。Reflow（回流）：当浏览器发现某个部分发生了变化，影响了布局，就需要返回去重新渲染。专家称此回退过程为回流。reflow会递归地从根框架开始，依次计算所有节点的几何尺寸和位置。回流几乎是不可避免的。现在界面上流行的一些效果，比如树状目录的折叠和展开（本质上是显示和隐藏元素）等，都会导致浏览器回流。鼠标悬停、点击……这些行为只要引起页面上某些元素的占用区域、定位方式、边距等属性发生变化，就会引起其内部、周围乃至整个页面的重新渲染.通常我们无法预测浏览器会回流代码的哪一部分，它们相互影响。repaint（重绘）：当改变一个元素的背景色、文字颜色、边框颜色等属性，但不影响其周围或内部布局时，需要重绘屏幕的一部分，但元素的几何尺寸有没有改变。注意：（1）带有display:none的节点不会被添加到RenderTree中，但是visibility:hidden会。因此，如果一开始不显示某个节点，最好设置display:none。(2)display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现position变化。(3)在某些情况下，比如修改一个元素的样式，浏览器不会立即回流或重绘一次，而是会批量累积这样的操作，然后再做一次回流，也称为异步回流或增量异步回流焊。但在某些情况下，比如调整窗口大小、更改页面默认字体等，对于这些操作，浏览器会立即回流。尽管Webkit和Gecko使用的术语略有不同，但过程基本相同。浏览器将HTML解析为DOM树。DOM树的构建过程是一个深度遍历过程：构建当前节点的所有子节点。构建当前节点的下一个兄弟节点。将CSS解析为CSS规则树。基于DOM树和CSSOM构建渲染树。注意：RenderingTree不等同于DOM树，因为像Header或display:none这样的东西没有必要放在渲染树中。通过RenderTree，浏览器已经可以知道网页中有哪些节点，每个节点的CSS定义，以及它们的隶属关系。下一步称为布局。顾名思义，就是计算每个节点在屏幕上的位置。接下来就是绘制，也就是遍历渲染树，使用UI后端层绘制每个节点。注：以上过程是一步步完成的。为了更好的用户体验，渲染引擎会尽早将内容渲染到屏幕上，不会等到所有的html都解析完才构建和布局渲染树。.它在解析部分内容后显示部分内容，同时可能还在通过网络下载其余内容。
