浏览器加载HTML和CSS后，通过五个主要步骤呈现页面：生成DOM Tree、CSSOM Tree、合成Render Tree、布局计算及绘制。DOM树包含文档的所有标签节点，CSSOM树解析样式，两者结合形成渲染树，不包含隐藏节点。布局计算确定元素位置和大小，绘制阶段将信息渲染到屏幕。了解这一流程有助于性能优化。
tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و
浏览器加载了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会存在渲染树，
最低0.47元/天 解锁文章
扫一扫
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
