转载: 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 树中；