下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？

下载 CSS 文件会对页面的渲染过程产生影响，具体是否阻塞 DOM 树的构建和页面的显示，取决于浏览器的渲染机制。

1. CSS 文件下载是否会阻塞 DOM 树的构建？

• 一般情况下，CSS 文件下载不会阻塞 DOM 树的构建：

  • DOM 树的构建是由 HTML 解析器完成的，解析器会逐行解析 HTML 并构建 DOM 树。

  • 即使 CSS 文件正在下载，HTML 解析器仍然会继续工作，构建 DOM 树。

• 但如果 JavaScript 访问了样式，CSS 文件下载会间接阻塞 DOM 树的构建：

  • 当 JavaScript 代码试图访问或修改元素的样式时（如 element.style.color），浏览器需要确保 CSSOM（CSS Object Model）已经构建完成，因为样式计算依赖于 CSSOM。

  • 如果 CSS 文件尚未下载并解析完成，浏览器必须暂停 JavaScript 的执行，直到 CSSOM 准备就绪。

  • 由于 JavaScript 的执行会阻塞 DOM 解析，因此在这种情况下，CSS 文件的下载和解析会间接阻塞 DOM 树的构建。

2. CSS 文件下载是否会阻塞页面的显示？

• 会阻塞页面的显示：

  • 浏览器在构建渲染树之前，需要同时具备 DOM 树和 CSSOM 树。

  • 如果 CSS 文件尚未下载并解析完成，浏览器会阻塞页面的渲染（即不会显示任何内容），以避免出现"无样式内容闪烁"（Flash of Unstyled Content, FOUC）的问题。

  • 这种阻塞行为被称为 "渲染阻塞"。

• 即使 DOM 树已经构建完成，页面也不会显示，直到 CSSOM 树也准备就绪。

3. 浏览器的具体行为

• 阻塞渲染：

  • 浏览器会等待所有 CSS 文件下载并解析完成后，才会开始渲染页面。

  • 这意味着，即使 DOM 树已经构建完成，页面也不会显示，直到 CSSOM 树也准备就绪。

• 优化策略：

  • 现代浏览器会通过预加载扫描器（Preload Scanner）提前发现并下载 CSS 文件，以减少阻塞时间。

  • 如果 CSS 文件是通过媒体查询（Media Query）指定的（如 media="print"），则不会阻塞页面的渲染。

4. 示例说明

假设有以下 HTML 和 CSS 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css"> <!-- 阻塞渲染的 CSS 文件 -->
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <script>
    let e = document.getElementsByTagName('p')[0]
    e.style.color = 'blue' <!-- 访问样式 -->
  </script>
</body>
</html>

• 过程分析：

  1. 浏览器解析 HTML，开始构建 DOM 树。

  2. 遇到 <link> 标签时，浏览器开始下载 theme.css 文件。

  3. 继续解析 HTML，直到遇到 <script> 标签。

  4. 浏览器暂停 DOM 解析，开始执行 JavaScript 代码。

  5. JavaScript 代码尝试访问 <p> 元素的样式（e.style.color）。

  6. 由于 theme.css 尚未下载并解析完成，浏览器必须等待 CSSOM 构建完成，才能正确计算样式。

  7. 在 CSS 文件下载并解析完成之前，JavaScript 代码的执行会被阻塞，DOM 解析也会被阻塞。

  8. 一旦 CSS 文件下载并解析完成，浏览器继续执行 JavaScript 代码，并恢复 DOM 解析。

  9. 最后，浏览器结合 DOM 树和 CSSOM 树生成渲染树，并显示页面内容。

5. 如何优化 CSS 加载

• 减少 CSS 文件大小：

  • 通过压缩 CSS 文件（如使用工具 cssnano）来减少下载时间。

• 使用媒体查询：

  • 将非关键 CSS 文件标记为 media="print" 或其他非阻塞媒体类型。

• 内联关键 CSS：

  • 将首屏渲染所需的关键 CSS 直接内联到 HTML 中，避免阻塞。

• 异步加载 CSS：

  • 使用 JavaScript 动态加载非关键 CSS 文件。

总结

• CSS 文件下载不会阻塞 DOM 树的构建，但会阻塞渲染树的构建。

• CSS 文件下载会阻塞页面的显示，浏览器会等待 CSS 文件下载并解析完成后才开始渲染页面。

• 通过优化 CSS 加载策略（如压缩、内联关键 CSS、使用媒体查询等），可以减少阻塞时间，提升页面加载性能。

6. 总结

• CSS 文件下载是否会阻塞 DOM 树的构建？

  • 一般情况下，CSS 文件下载不会阻塞 DOM 树的构建。

  • 但如果 JavaScript 访问了样式，CSS 文件下载会间接阻塞 DOM 树的构建（因为 JavaScript 的执行会阻塞 DOM 解析）。

• CSS 文件下载是否会阻塞页面的显示？

  • 会阻塞页面的显示。浏览器会等待 CSS 文件下载并解析完成后，才会开始渲染页面。

• 优化建议：

  • 将 JavaScript 代码放在 CSS 文件之后，或使用 async/defer 属性异步加载 JavaScript。

  • 内联关键 CSS，减少阻塞时间。

  • 使用 <link rel="preload"> 提前加载 CSS 文件。

通过理解这些机制，可以更好地优化页面加载性能，避免不必要的阻塞。