渲染树(Render Tree) 是什么

转载: https://zhuanlan.zhihu.com/p/...
大家都知道DOM节点，

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

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

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

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

浏览器是如何渲染 UI 的？

浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree

与此同时，进行 CSS 解析，生成 Style Rules

接着将 DOM Tree 与 Style Rules 合成为 Render Tree

元素在页面中布局，然后绘制

render 树就是根据 可视化节点 和 css 样式表 结合诞生出来的树；

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