Dom树 CSS树渲染树

最新推荐文章于 2024-09-01 10:56:23 发布

原创最新推荐文章于 2024-09-01 10:56:23 发布 · 357 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #python

本文介绍了DOM树、CSS树和渲染树的概念及其在网页渲染中的作用。DOM树是HTML文档的节点结构，提供了操作接口；CSS树是由解析CSS后的样式信息构成；渲染树结合了DOM和CSSOM，用于布局和页面呈现。浏览器渲染过程包括解析HTML和CSS，构建DOM和CSSOM，生成渲染树，布局和绘制。

1.构建dom 树
2.构建css 树
3.构建渲染树
4.节点布局
5.页面渲染

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

写几个常用的API, 来操作DOM节点。
(1)document.getElementById()这个是最基本的了。
(2)object.innerHTML该属性设置或返回object之间的HTML
(3)document.createElement()创建节点对象。
(4)document.body.appendChild()尾部插入结点。
(5)object.parentNode.removeChild(oChildNode);移除结点
remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法可以删除元素中所有的子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除结点的引用，因此可以使用该引用，再使用被删除的元素。

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

css树

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

渲染树

浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树。我们知道DOM树为javascript提供了一些列的访问接口（DOM API），但这棵树是不对外的。它的主要作用就是把HTML按照一定的布局与样式显示出来，用到了CSS的相关知识。从MVC的角度来说，可以将render树看成是V，dom树看成是M，C则是具体的调度者，比HTMLDocumentParser等。

深入浅出浏览器渲染原理

首先浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 开发的。

浏览器工作大体流程

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
下面是渲染引擎在取得内容之后的基本流程：
1.解析html为dom树，解析css为cssom。渲染引擎开始解析html，并将标签转化为内容树中的dom节点。
2. 把dom和cssom结合起来生成渲染树(render)。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
3. 布局渲染树，计算几何形状。Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。
4. 把渲染树展示到屏幕上。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。