DOM树 CSS树 render渲染树的规则和原理。

想理解这些规则和原理，我们得先知道浏览器渲染UI（用户界面）的顺序。

浏览器渲染的顺序

1. 浏览器解析HTML文档构建DOM树
2. 然后通过css解析生成样式规则（style rules），构建css树
3. 通过DOM树和css树合成渲染树（render tree）
4. 元素进行布局，绘制
5. 页面渲染

• 注意：display:none的元素出现在DOM树中，但是不会出现在render树中。

• 简单理解

1. 构建DOM树
2. 构建CSS树
3. 构建渲染树（render tree）
4. 元素页面布局
5. 页面渲染

什么是DOM树

浏览器将HTML文件解析成树形结构的DOM数据。叫做DOM树。DOM树由许多DOM节点组成。 DOM树使得DOM对象的层级分明，这样方便HTML文档进行增删改查。 增加删除必须遵循层次关系 文本节点（DOM）是最底层的节点（DOM）

DOM节点又分为可视化节点和非可视化节点

• 可视化节点，例如div p span等等标签节点
• 非可视化节点，例如script meta等等

什么是css树

css树类似于less，借用DOM树的思想，有层级结构，利用浏览器将less语法结构转译为浏览器可识别的普通css。

什么是渲染树

渲染树是根据DOM可视化节点（DOM树）和CSS样式树合成的一个新的树，当他构建完成后，浏览器会根据他绘制页面。

特点

• 渲染树每一个节点都有独立的样式
• 渲染树不会渲染display：none的节点，不会=需要绘制html style head title等节点，这些节点绘制构成渲渲染树之前被剔除
• 会渲染（绘制）visibility：hidden的节点，因为他会影响布局。
• 渲染树上每个节点都是一个盒子，具有内边距，外边距，内容填充，位置，大小，样式等等。

DOM树是如何被构建的

DOM树是通过HTML解释器构建的，HTML先是将字节流解码成字符流，然后通过词法分析器将字符流转义为词语，然后通过语法分析器转义为节点，然后这些节点被组建成一棵DOM树。