CSSOM 树和 DOM 树的解析时机
浏览器解析 DOM 和 CSSOM 的过程，以及 JavaScript 对解析的影响
问题
CSSOM 树和 DOM 树是同时解析的吗？它们的解析过程会相互阻塞吗？
解答
浏览器在解析页面时，DOM 和 CSSOM 的构建是并行进行的，但存在特定的阻塞情况。
正常解析流程
浏览器下载 HTML 并开始解析生成 DOM 树。当遇到 <link> 或 <style> 标签时，会同时开始解析 CSS 构建 CSSOM 树。这个过程不会阻塞 DOM 解析。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- 并行下载和解析 -->
</head>
<body>
<div>内容</div> <!-- DOM 继续解析 -->
</body>
</html>JavaScript 引起的阻塞
当浏览器遇到 <script> 标签时，情况会发生变化：
- 如果 CSSOM 还未构建完成，JavaScript 执行会等待 CSSOM 构建完成
- JavaScript 执行期间，DOM 解析会暂停
- JavaScript 执行完毕后，DOM 解析才会继续
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- 开始解析 CSS -->
<script src="app.js"></script> <!-- 等待 CSSOM → 执行 JS → 阻塞 DOM -->
</head>
<body>
<div>内容</div> <!-- 等待 JS 执行完才解析 -->
</body>
</html>这是因为 JavaScript 可能会查询元素的样式信息（如 getComputedStyle()），所以必须等待 CSSOM 准备就绪。
关键点
- DOM 和 CSSOM 的构建默认是并行的，互不阻塞
- JavaScript 执行会等待 CSSOM 构建完成
- JavaScript 执行期间会阻塞 DOM 解析
- 可以使用
async或defer属性避免 JavaScript 阻塞 DOM 解析
目录