DOM树的构建

最新推荐文章于 2025-05-19 00:15:00 发布

寻瀑

最新推荐文章于 2025-05-19 00:15:00 发布

阅读量883

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/smell201611010513/article/details/129035260

web前端专栏收录该内容

5 篇文章

订阅专栏

DOM是HTML的内部数据结构，用于连接网页和JavaScript，确保安全。JavaScript可以通过DOM接口操作页面，而CSSOM用于构建布局树，影响页面展示。加载JavaScript和CSS可能阻塞DOM解析，async和defer属性用于异步加载，预解析优化能提前下载相关文件，减少页面渲染延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、是什么？

DOM是表述HTML的内部数据结构，它会将web页面和JavaScript脚本连接起来，并过滤一些不安全的内容。

2、作用？

从页面角度来看，DOM是生成页面的基础数据结构；从JavaScript角度来看，通过DOM提供给JavaScript的接口，JavaScript可以对DOM进行访问，从而改变文档的结构、样式和内容；从安全视角看，DOM是一道安全防护线，一些不安全的内容在DOM解析阶段就被拒之门外了。

3、DOM树如何生成？

渲染引擎内部有一个HTML解析器模块，负责将HTML字节流转换为DOM结构。HTML解析器如何工作：网络进程加载了多少数据，HTML解析器便解析了多少数据。

HTML解析过程：网络进程在收到响应头之后，根据请求头中的content-type判断文件类型。如果是text/html，那么浏览器会判断出这是一个HTML类型的文件，然后为该请求选择或者创建一个渲染进程。渲染进程准备好之后，网络进程和渲染进程之间会建立一个共享数据的管道，网络进程接收到数据后就放入共享管道中，渲染进程从管道的另一端进行读取数据，并同时将读取到的数据给HTML解析器，HTML解析为DOM。

字节流转换为DOM：字节流Bytes-->分词器Tokens-->生成节点Node-->DOM。

字节流转换为DOM的过程：通过分词器将字节流转换为Token，Token分为Tag Token和文本Token。Tag Token又分为StartTag和EndTag，TagToken会压入到栈中的是StartTag Token，HTML解析器会为该Token（Start Token）创建一个DOM节点，然后将该节点加入到DOM树中，父节点即栈中相邻的元素生成的节点。如果解析的是文本Token，会生成一个文本节点，然后将该节点加入到DOM树中，文本Token是不需要压入到栈中的。它的父节点就是当前栈顶Token对应的DOM节点。如果分词器解析的是EndTag div，HTML解析器会查看当前栈顶元素是否是StartTag div，如果是则将栈顶元素从栈中弹出，表示该div元素解析完成。通过分词器产生的新Token就这样不停地压栈和出栈，整个解析过程就这样一直持续下去，直到分词器将所有字节流分词完成。

4、JavaScript对DOM树构建和渲染的影响

4.1、JavaScript脚本在页面中

<div>1</div>
<script>
let div1=document.getElementsByTagName('div')[0]
div1.innerText='script time'
</script>
<div>2</div>

在两段div中间插入了一段JavaScript脚本，即还未解析完字节流文件，就出现了script标签。

此时HTML解析器暂停工作，JavaScript引擎介入，并执行script标签中的脚本。脚本执行完成之后，HTML解析器恢复解析过程，继续解析后续的内容，直至生成最终的DOM。

4.2、html页面引入JavaScript文件

<div>1</div>
<script type="text/javascript" src="foo.js"></script>
<div>2</div>

和第一种情况一样，执行到JavaScript标签时，暂停整个DOM解析，执行JavaScript代码。此时需要先下载文件。下载过程会阻塞DOM解析，且下载又是非常耗时的，会受到网络环境、JavaScript文件大小等因素的影响。

一些优化：

Chrome浏览器有作预解析优化，当渲染引擎收到字节流之后，会开启一个预解析过程，用来分析HTML文件中包含的JavaScript、CSS等相关文件，解析到相关文件之后，预解析线程会提前下载这些文件。

使用CDN来加速JavaScript文件的加载，压缩JavaScript文件的体积。

如果JavaScript文件中没有操作DOM相关代码，可以将该JavaScript脚本设置未异步加载，通过async或defer来标记代码。<script async type="text/javascript" src="foo.js"></script>或<script defer type="text/javascript" src="foo.js"></script>

async：脚本并行加载，加载完成之后立即执行，执行时机不确定，仍有可能阻塞HTML解析，执行时机在load事件派发之前。

defer：脚本并行加载，等待HTML解析完成之后，按照加载顺序执行脚本，执行时机在DOMContentLoaded事件派发之前。

async和defer的相同点：
都是异步加载script，加载的过程都不会阻塞html的解析。

async和defer的不同点：
①执行时机不同：async是在加载完后立即执行，执行过程中仍会阻塞html的解析；defer是在html解析完，DomContentLoaded之前执行。
②是否阻塞html的标签：async会阻塞，defer不会阻塞。
③script标签的执行顺序：async不能保证script标签的执行顺序（谁先加载完谁先执行），defer在html解析完成后按顺序执行。

5、CSS对DOM树构建的影响

//main.css
div{
    color:coral;
    background-color:black;
}

<html>
<head><link href="main.css" rel="stylesheet"></head>
<body>
    <div>12e44</div>
    <script>console.log('hello world')</script>
    <div>fdsfg</div>
</body>
</html>

含有CSS的页面渲染过程：首先发起主页面的请求（发起方可能是渲染进程、浏览器进程），发起的进程会到网络进程中去执行。网络进程接收到返回的HTML数据后，将其发送给渲染进程，渲染进程会解析HTML数据并创建DOM。请求HTML数据和构建DOM中间有一段空闲时间，这个空闲时间有可能称为页面渲染的瓶颈。

当渲染进程接收HTML文件字节流时，会先开启一个预解析线程，如果有遇到JavaScript文件或者CSS文件，那么预解析线程会提取下载这些数据。对于上面的代码，预解析线程会解析外部的main.css文件，并发起main.scss的下载。这里也会有一个空闲时间，即DOM构建结束之后，main.css文件还未下载完成的这段时间内，渲染流水线无事可做，因为下一步是合成布局树，而合成布局树需要CSSDOM和DOM，所以这里需要等待CSS加载结束并解析成CSSOM。

CSSOM的作用：①提供给JavaScript操作样式表的能力②为布局树的合成提供基础的样式信息。

等DOM和CSSOM都构建好之后，渲染引擎就会构造布局树。布局树的结构基本就是复制DON的结构，区别在于会过滤DOM树中不需要显示的元素（如display:none的元素、head、script标签等）复制好基本的布局树结构之后，渲染引擎会为对应的 DOM 元素选择对应的样式信息，这个过程就是样式计算。样式计算完成之后，渲染引擎还需要计算布局树中每个元素对应的几何位置，这个过程就是计算布局。通过样式计算和计算布局就完成了最终布局树的构建。