面试题15：Dom树 CSS树 渲染树(render树) 规则、原理

面试官：请说一下Dom树 CSS树 渲染树(render树) 规则、原理

答：

首先你要了解浏览器渲染的顺序：
  1.构建dom 树
  2.构建css 树
  3.构建渲染树
  4.节点布局
  5.页面渲染

其实DOM节点可以分为 可视化节点 和 非可视化节点，

像 div、p 等这种结构性的标签节点可被称为可视化节点，

而 script、meta 等这种在页面上显示不出来的节点则被称为非可视化节点；

那渲染树(render树)是什么呢？

浏览器是如何渲染 UI 的？

（1）浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree
（2）与此同时，进行 CSS 解析，生成 Style Rules
（3）接着将 DOM Tree 与 Style Rules 合成为 Render Tree
（4）元素在页面中布局，然后绘制
render 树就是根据 可视化节点 和 css 样式表 结合诞生出来的树；

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

什么是dom 树？

  浏览器将HTML解析成树形的数据结构，简称DOM。
  DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。

你还可以这样理解 dom 树：
  1.DOM树揭示了DOM对象之间的层次关系，这样就方便动态地对html文档进行增删改查。
  2.增删改查必须要遵循层次关系
  3.文本对象是最底层的节点
  4.获取 对象的值 .value

什么是CSS树？

 看着有点像 less 写法（less这种预处理语言，就是借用DOM树的思想，来将less这种语法结构，转译成普通的css语法，最终我们用的还是普通的css语法构成的css文件）。

渲染树构建(renderTree)

渲染树是dom树结合css树形成的一个新的树。当renderTree构建完毕后，浏览器会根据它去绘制页面。

特点:
(1)渲染树每个节点都有自己的样式。
(2)不包含隐藏节点(display: none)、不需要绘制的节点(html/head/style/title)，这些节点在renderTree形成之前就会被剔除。
(3)visibility: hidden相对应的节点是包含在渲染树上的，因为它影响布局(layout)。
(4)渲染树上的每一个节点都会被当成一个盒子，具有内容填充、边距、边框、位置、大小及其它样式。

 二、解析与加载

（1）解析与加载

概念

页面渲染机制主要分为解析和加载

解析：解析就是把整个html结构变成一个又一个的节点，然后挂在dom树上面形成dom树

加载：加载就是加载html里面的资源

先有解析，再有加载，而解析和加载的过程是一个异步的过程

示例1

<img src="baidu.png" alt="" />

先是解析img标签变成节点再挂到dom树上，图片的加载并不在解析的过程当中，加载在当前节点解析完成之后

示例2

在构建dom树的时候，span和div会挂在dom树上面吗？

<span style="display: none"></span>

var oDiv = document.createElement('div');
document.body.appendChild(oDiv);

会，因为节点树不会管样式，只管dom节点，动态创建也是dom节点