浏览器内核渲染引擎渲染原理

浏览器加载了html和css是怎样呈现在浏览器上面的呢？
这个底层的原理需要我们了解
这样我们才能够进一步做出一些性能优化

---

浏览器渲染大体上分为以下五步

1. 处理html生成 DOM（Document Object Model） Tree
2. 处理css生成 CSSOM（CSS Object Model） Tree
3. DOM树与CSS-DOM树合并为Render树
4. 对Render树进行布局计算
5. 遍历Render树的每一个节点绘制到屏幕

下面我们细化一下这些步骤

DOM树生成

浏览器把得到的html代码转换为一个DOM树
我们html文档中的每一个tag标签都是一个DOM树的节点（文本节点也是）
DOM树的根节点就是我们的document对象
这里要注意，我们用js动态生成的DOM节点也在DOM树上

CSSOM树生成

浏览器会把所有的样式解析为样式结构体
（包括css样式和浏览器默认样式）
当然浏览器识别不了的样式不能解析
最后生成了CSSOM树

Render树生成

Render树我们叫它渲染树
它是由DOM树和CSSOM树合成的
渲染树的每一个节点都有自己的style样式
渲染树上没有隐藏的节点，比如display：block和无样式head节点
因为这些节点不会呈现也不影响呈现
（visibility:hidden会存在渲染树，因为它占有空间，会影响布局）

布局计算

在这个阶段会根据Render树的样式计算布局
输出的结果称为box盒模型（width,height,margin,padding,border,left,top,…）
盒模型精确表示了每一个元素的位置和大小
所有相对度量单位都转化为了绝对单位

绘制

最后将信息渲染到屏幕中每一个真实的像素点
这个过程叫绘制或者rasterizing格栅化