CSS 阻塞渲染是指浏览器在加载和解析 CSS 时，会阻止页面的渲染，直到 CSS 被完全下载和解析完毕。这会导致页面加载变慢。以下是一些防止或减轻 CSS 阻塞渲染的策略：
1. 使用 media 属性
通过使用 media 属性将 CSS 文件标记为在特定条件下才需要加载，可以防止不必要的 CSS 阻塞渲染。
<link
rel="stylesheet"
href="styles.css"
media="print"
onload="this.media='all'"
/>
- 解释：
media="print"属性使得该 CSS 文件只在打印时被加载。onload事件触发后将media属性改为all，使其对所有媒体有效。这样，浏览器可以优先渲染页面，CSS 文件在下载完成后应用。
2. 将 CSS 文件置于 <head> 中
虽然将 CSS 文件放在 <head> 部分会阻塞渲染，但它是保证页面样式准确加载的必要方式。要确保在 <head> 部分中尽量精简和优化 CSS 以减少阻塞时间。
3. 内联关键 CSS
将关键 CSS 直接嵌入到 HTML 的 <head> 中，减少外部请求：
<style>
/* 关键 CSS 代码 */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* 其他关键样式 */
</style>
- 解释：关键 CSS 是首次加载页面时必须应用的样式，可以提高渲染速度。将其内联到 HTML 中，可以避免额外的网络请求。
4. 延迟加载非关键 CSS
使用 rel="preload" 或 rel="stylesheet" 来延迟加载非关键 CSS 文件，这些 CSS 文件对首屏渲染不是必需的：
<link
rel="preload"
href="non-critical.css"
as="style"
onload="this.rel='stylesheet'"
/>
- 解释：
rel="preload"会使浏览器提前加载资源，但不会立即应用，直到onload事件触发并将rel属性改为stylesheet。
5. 使用 CSS 分块
将 CSS 文件拆分为多个较小的文件，仅加载当前视图所需的 CSS 文件。这样可以减少单个 CSS 文件的体积，提高加载效率。
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="home.css" media="(min-width: 600px)" />
- 解释：将 CSS 文件按功能分块，并在需要时加载，有助于减少初始加载时的 CSS 量。
6. 优化 CSS 文件
- 压缩 CSS：使用工具（如 CSSnano 或 Clean-CSS）来压缩 CSS 文件，去除空格和注释，以减少文件大小。
- 删除未使用的 CSS：通过工具（如 PurgeCSS）去除未使用的 CSS 代码，减小文件体积。
7. 使用 CSS 自定义属性（变量）
尽量减少 CSS 文件中的重复代码，使用 CSS 变量来优化样式的管理。
:root {
--primary-color: #3498db;
}
body {
color: var(--primary-color);
}