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

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

浏览器加载了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会存在渲染树，