浏览器加载了html和css是怎样呈现在浏览器上面的呢？
这个底层的原理需要我们了解
这样我们才能够进一步做出一些性能优化
浏览器渲染大体上分为以下五步
- 处理html生成 DOM（Document Object Model） Tree
- 处理css生成 CSSOM（CSS Object Model） Tree
- DOM树与CSS-DOM树合并为Render树
- 对Render树进行布局计算
- 遍历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格栅化
