共计 1765 个字符，预计需要花费 5 分钟才能阅读完成。
渲染引擎简介
目前常用的浏览器：
Firefox . chrome . safari 是基于两种渲染引擎构建的，Firefox 使用 Geoko, 是 Mozilla 自主研发的渲染引擎，Safari 和 Chrome 都使用 webkit.
渲染主流程
概念解释
DOM Tree: 浏览器将 HTML 解析成树形的数据结构.
CSS Rule Tree: 浏览器将 CSS 解析在树形的数据结构.
Render Tree:DOM 和 CSSOM(CSS Object Model:CSS 对象模型) 合并后生成 Render Tree.
layout: 有了 Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的 CSS 的定义以及他们的从属关系，从而去计算出每个节点的屏幕中的位置.
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上.
reflow(回流): 当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，称此为回退的过程，叫 reflow.reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。feflow 几乎是无法避免的.
例如：树状目录的折叠，展开，实质上是元素的显示与隐藏等，都将引起浏览器的 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
主流程
渲染引擎首先通过网络获得所请求文档的内容，通常以 8K 分块的方式完成。基本流程为：
解析 HTML 以构建 DOM 树 -> 解析 CSS 构建 CSSOM -> 将 DOM 树与 CSSOM 树合并，构建 Render 树 -> 布局 render 树 -> 绘制 render 树
来看看 webkit 的流程：
接下来是 Gecko 的流程：
Gecko 里把格式化好的可视元素称做“桢树”（Frame tree），每一个元素就是一个桢，webkit 使用的是渲染树的术语，渲染树由渲染对象组成，webkit 里使用 layout 表示元素的布局，Gecko 则称为 reflow。webkit 使用 attachment 来链接 DOM 节点与可视化信息以构建渲染树。一个非语义上的小差别就是 Gecko 在 HTML 与 DOM 树之间有一个附加的层，称作 ”content sink”, 是创建 DOM 对象的工厂.
虽然 Webkit 与 Gecko 使用的术语略微不同，但是这个过程是基本相同的，如下：
1. 浏览器会将 HTML 解析成一个 DOM 树，DOM 树构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点.
2. 将 CSS 解析成 CSS Rule Tree.
3. 根据 DOM 和 CSSOM 来构造 Render Tree,Render tree 不等于 DOM Tree, 因为像 Header 或 display:none 的东西没有必要放在渲染树中.
4. 有了 Render Tree, 浏览器已经能知道网页中有哪些节点，各个节点的 CSS 定义以及他们的从属关系，下一步操作称之为 layout，顾名思义就是计算出每个节点在屏幕中的位置.
5. 下一步就是绘制，即遍历 render 树，并使用 UI 后端层绘制每个节点。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容.
