CSS：CSS是否会阻塞页面的渲染？

站长

2024年06月28日 17:06 · 阅读数 30

在浏览器渲染网页的过程中，CSS会对页面的渲染产生影响。具体来说，CSS的加载和解析确实会阻塞页面的渲染。为了更清晰地理解这一过程，我们可以详细了解浏览器的渲染流程和CSS在其中的角色。

浏览器的渲染流程

浏览器渲染网页的主要步骤包括：

解析HTML：构建DOM树。
解析CSS：构建CSSOM树。
合并DOM和CSSOM：生成渲染树（Render Tree）。
布局（Layout）：计算每个元素的位置和尺寸。
绘制（Paint）：将元素绘制到屏幕上。

CSS在渲染中的角色

解析CSS：当浏览器遇到<link>标签或嵌入式<style>标签时，它会暂停构建DOM树并开始下载和解析CSS文件。这是因为浏览器需要完整的CSS信息来进行后续的布局和绘制步骤。
阻塞渲染：在CSS文件下载和解析完成之前，浏览器不会继续渲染页面的内容。原因如下：
- 样式依赖：布局和绘制都依赖于完整的CSS信息。如果CSS尚未加载完成，浏览器无法确定元素的最终样式。
- 重排和重绘：如果在DOM解析过程中继续渲染页面，而CSS尚未完全加载，可能会导致大量的重排和重绘，影响性能和用户体验。

优化CSS加载以减少阻塞

尽管CSS会阻塞渲染，但可以通过一些优化策略来减少这种影响：

减少CSS文件的数量：将多个CSS文件合并成一个，减少HTTP请求数。
使用<link>标签放置在<head>中：确保所有的CSS文件在HTML文档的头部加载，使得CSS尽早加载和解析。
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```
使用媒体查询：对于不需要立即应用的CSS，可以使用媒体查询（如media="print"）将其推迟加载。
```
<link rel="stylesheet" href="print.css" media="print">
```
CSS异步加载：使用JavaScript异步加载CSS文件，避免阻塞初始渲染。一个常见的方法是使用<link>标签和rel="preload"属性。
```
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
```

内联关键CSS：将首屏关键CSS直接内联到HTML中，确保首屏内容可以立即渲染，而其他CSS文件可以异步加载。

<style>
  /* Critical CSS */
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
  /* ... */
</style>
<link rel="stylesheet" href="styles.css">

示例

以下是一个完整的示例，演示了上述优化策略：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Optimized Page</title>
  <style>
    /* Critical CSS */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 1em 0;
    }
  </style>
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is an example page with optimized CSS loading.</p>
  </main>
</body>
</html>

总结

CSS会阻塞页面的渲染，因为浏览器需要等待CSS加载和解析完成后才能继续构建渲染树和进行布局和绘制。
优化CSS加载可以减少这种阻塞影响，包括减少CSS文件数量、将<link>标签放在<head>中、使用媒体查询、异步加载CSS以及内联关键CSS。
通过这些优化策略，可以显著提高页面的加载性能和用户体验。

转载自:https://juejin.cn/post/7381372851121750054