衬着主流程
衬着引擎起首经由历程收集获得所要求文档的内容，一般以8K分块的体式格局完成。下面是衬着引擎在获得内容以后的基础流程：
剖析html以构建dom树 -> 构建render树 -> 规划render树 -> 绘制render树
这里先解释一下几个观点，轻易人人明白：
DOM Tree：浏览器将HTML剖析成树形的数据结构。
CSS Rule Tree：浏览器将CSS剖析成树形的数据结构。
Render Tree: DOM和CSSOM兼并后天生Render Tree。
layout: 有了Render Tree，浏览器已能晓得网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每一个节点在屏幕中的位置。
painting: 依据算出来的划定规矩，经由历程显卡，把内容画到屏幕上。
reflow（回流）：当浏览器发明某个部份发作了点变化影响了规划，须要倒回去从新衬着，行家称这个回退的历程叫 reflow。reflow 会从 <html> 这个 root frame 最先递归往下，顺次计算一切的结点多少尺寸和位置。reflow 几乎是没法防止的。如今界面上盛行的一些结果，比方树状目次的摺叠、睁开（实质上是元素的显 示与隐蔽）等，都将引发浏览器的 reflow。鼠标滑过、点击……只需这些行动引发了页面上某些元素的占位面积、定位体式格局、边距等属性的变化，都邑引发它内部、四周以至全部页面的从新渲 染。一般我们都没法预估浏览器到底会 reflow 哪一部份的代码，它们都相互相互影响着。
repaint（重绘）：转变某个元素的背景色、笔墨色彩、边框色彩等等不影响它四周或内部规划的属性时，屏幕的一部份要重画，然则元素的多少尺寸没有变。
注重：
(1)display:none 的节点不会被到场Render Tree，而visibility: hidden 则会，所以，假如某个节点最最先是不显现的，设为display:none是更优的。
(2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，由于没有发明位置变化。
(3)有些情况下，比方修改了元素的款式，浏览器并不会立时reflow 或 repaint 一次，而是会把如许的操纵积累一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。然则在有些情况下，比方resize 窗口，转变了页面默许的字体等。关于这些操纵，浏览器会立时举行 reflow。
只管Webkit与Gecko运用稍微差别的术语，这个历程照样基础雷同的
- 浏览器会将HTML剖析成一个DOM树，DOM 树的构建历程是一个深度遍历历程：当前节点的一切子节点都构建好后才会去构建当前节点的下一个兄弟节点。
- 将CSS剖析成 CSS Rule Tree 。
- 依据DOM树和CSSOM来组织 Rendering Tree。注重：Rendering Tree 衬着树并不等同于 DOM 树，由于一些像Header或display:none的东西就没必要放在衬着树中了。
- 有了Render Tree，浏览器已能晓得网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操纵称之为layout，望文生义就是计算出每一个节点在屏幕中的位置。
- 再下一步就是绘制，即遍历render树，并运用UI后端层绘制每一个节点。
注重：上述这个历程是逐渐完成的，为了更好的用户体验，衬着引擎将会尽量早的将内容显现到屏幕上，并不会比及一切的html都剖析完成以后再去构建和规划render树。它是剖析完一部份内容就显现一部份内容，同时，能够还在经由历程收集下载其他内容。
