大家都知道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 树中;