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 解析