CSSOM 与 DOM 的解析时机
浏览器解析 HTML、CSS 和 JavaScript 的执行顺序
问题
CSSOM 树和 DOM 树是同时解析的吗？
解答
浏览器在解析页面时，DOM 和 CSSOM 的构建是并行进行的，但 JavaScript 的执行会受到 CSSOM 的影响。
解析流程
-
HTML 解析：浏览器下载 HTML 并开始解析，生成 DOM 树
-
CSS 解析：遇到
<link>或<style>标签时，开始解析 CSS，构建 CSSOM 树。这个过程不会阻塞 DOM 解析 -
JavaScript 执行：遇到
<script>标签时会阻塞 DOM 解析。如果此时 CSSOM 还未构建完成，JavaScript 需要等待 CSSOM 构建完毕后才能执行
阻塞示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css"> <!-- CSSOM 构建中 -->
<script src="app.js"></script> <!-- 等待 CSSOM 完成 -->
</head>
<body>
<div>Content</div> <!-- DOM 解析被阻塞 -->
</body>
</html>在上述代码中，app.js 的执行会等待 styles.css 加载并解析完成，因为 JavaScript 可能需要访问样式信息（如 getComputedStyle）。
关键点
- DOM 和 CSSOM 的构建是并行的，互不阻塞
- JavaScript 执行会阻塞 DOM 解析
- JavaScript 执行前必须等待 CSSOM 构建完成
- 建议将
<script>标签放在</body>前或使用defer/async属性
目录