如何防止 CSS 阻塞渲染？

参考答案：

CSS 阻塞渲染是指浏览器在加载和解析 CSS 时，会阻止页面的渲染，直到 CSS 被完全下载和解析完毕。这会导致页面加载变慢。以下是一些防止或减轻 CSS 阻塞渲染的策略：

通过使用 media 属性将 CSS 文件标记为在特定条件下才需要加载，可以防止不必要的 CSS 阻塞渲染。

html

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

解释：media="print" 属性使得该 CSS 文件只在打印时被加载。onload 事件触发后将 media 属性改为 all，使其对所有媒体有效。这样，浏览器可以优先渲染页面，CSS 文件在下载完成后应用。

虽然将 CSS 文件放在 <head> 部分会阻塞渲染，但它是保证页面样式准确加载的必要方式。要确保在 <head> 部分中尽量精简和优化 CSS 以减少阻塞时间。

将关键 CSS 直接嵌入到 HTML 的 <head> 中，减少外部请求：

html

<style>
  /* 关键 CSS 代码 */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  /* 其他关键样式 */
</style>

使用 rel="preload" 或 rel="stylesheet" 来延迟加载非关键 CSS 文件，这些 CSS 文件对首屏渲染不是必需的：

html

<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">

解释：rel="preload" 会使浏览器提前加载资源，但不会立即应用，直到 onload 事件触发并将 rel 属性改为 stylesheet。

将 CSS 文件拆分为多个较小的文件，仅加载当前视图所需的 CSS 文件。这样可以减少单个 CSS 文件的体积，提高加载效率。

html

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="home.css" media="(min-width: 600px)">

尽量减少 CSS 文件中的重复代码，使用 CSS 变量来优化样式的管理。

css

:root {
  --primary-color: #3498db;
}
body {
  color: var(--primary-color);
}