描述浏览器的渲染过程，DOM树和渲染树的区别

路人贾！

已于 2023-07-24 21:27:28 修改

阅读量243

点赞数

文章标签： javascript

于 2023-07-16 18:34:22 首次发布

本文链接：https://blog.csdn.net/m0_71125105/article/details/131675077

版权

描述浏览器的渲染过程，DOM树和渲染树的区别

浏览器的渲染过程可以分为以下几个步骤：

HTML解析：浏览器将接收到的HTML文档解析成DOM树。DOM（文档对象模型）树是由HTML标记组成的树形结构，表示了文档的逻辑结构和内容。
CSS解析：浏览器解析CSS样式表，并将其应用于DOM树上的元素。这个过程称为样式计算。浏览器会计算每个元素的最终样式。
渲染树构建：浏览器根据DOM树和样式信息构建渲染树（Render Tree）。渲染树只包含需要显示的元素，如可见的块级元素、内联元素和一些特殊元素。它是构建在DOM树和样式信息之上的一棵树，用于确定页面上的哪些内容需要渲染。
布局（Layout）：渲染树的每个节点都有对应的布局（Layout）信息，也称为盒模型。布局过程会计算每个元素的位置和大小。
绘制（Painting）：根据布局信息，浏览器将渲染树中的每个节点绘制成屏幕上的像素。这个过程叫做绘制。
合成（Compositing）：如果页面中有多个层叠的元素，浏览器会对它们进行合成，将最终的像素发送给GPU进行显示。

DOM树和渲染树的区别在于它们的作用和内容：

内容不同：
- DOM树：DOM树表示整个HTML文档的结构，包括HTML标签、属性和文本内容等。它是由浏览器解析HTML文档生成的，反映了文档的逻辑结构和层次关系。
- 渲染树：渲染树是基于DOM树和CSS样式信息构建的树，它只包含需要显示的元素。渲染树中的节点包括块级元素、内联元素和一些特殊元素（如表单元素）。渲染树的节点根据其样式信息进行布局和绘制。
对象类型不同：
- DOM树：DOM树中的每个节点都是一个对象，可以通过JavaScript来操作和修改。每个节点都有对应的方法和属性，可以用于对文档进行增删改查等操作。
- 渲染树：渲染树中的节点是浏览器根据DOM树和CSS样式计算得到的，它们与显示和布局有关，不同类型的节点会有不同的渲染行为。
包含范围不同：
- DOM树：DOM树包含整个HTML文档的结构，即使是隐藏的或不可见的元素也会被包括在内。
- 渲染树：渲染树只包含需要显示的元素，即可见的块级元素、内联元素和其他一些特殊元素。它会根据CSS样式的可见性和布局属性进行筛选。
用途不同：
- DOM树：DOM树主要用于提供对文档结构和内容的访问和操作，可以使用JavaScript等编程语言进行DOM操作，实现动态的交互效果和内容修改。
- 渲染树：渲染树用于页面的绘制和布局，它是浏览器进行页面渲染的基础。渲染树中的节点会根据其样式信息进行布局和绘制，最终呈现在屏幕上。