合理使用内联关键CSS、异步加载非关键CSS，并通过defer延迟执行依赖DOM的JS脚本，可有效减少阻塞、提升首屏渲染速度与页面交互性能。
在现代前端开发中，CSS 和 JavaScript 的加载策略直接影响页面性能和用户体验。合理使用 async 和 defer 属性，配合正确的 CSS 引入方式，可以有效减少阻塞、提升首屏渲染速度。
常见的 CSS 引入方式
CSS 主要通过以下几种方式引入到网页中：
-
link 标签外链样式表：最常见的方式，通过
<link rel="stylesheet" href="style.css">引入外部 CSS 文件。浏览器会阻塞渲染直到 CSSOM 构建完成。 -
内联样式（inline style）：直接在 HTML 元素上写
，不涉及网络请求，适合小范围样式控制。 -
内部样式表（style 标签）：将 CSS 写在
<style></style>中，通常放在<head>内，仍会参与 CSSOM 构建。 -
@import 导入：在 CSS 文件中使用
@import url('other.css');，但会增加请求数且阻塞后续规则解析，一般不推荐。
其中，外链 link 方式最为常用，但也最容易造成渲染阻塞。因此需要结合脚本异步加载策略进行优化。
async 与 defer 对脚本加载的影响
默认情况下，<script src="app.js"></script> 会阻塞 HTML 解析，直到脚本下载并执行完成。为了缓解这个问题，可使用两个属性：
立即学习“前端免费学习笔记（深入）”；
- async：脚本异步下载，下载完成后立即执行，**执行时机不确定**，可能在 DOMContentLoaded 之前或之后，适用于独立脚本（如统计代码）。
- defer：脚本异步下载，但延迟到整个文档解析完毕后再按顺序执行，**保证执行顺序且不阻塞解析**，适合依赖 DOM 的脚本。
注意：这两个属性只对 外部脚本 有效，且必须有 src 属性才会生效。
CSS 与异步脚本的协作实践
当页面同时存在关键 CSS 和异步 JS 时，需注意资源加载顺序和执行依赖关系。
以下是几个实用建议：
-
关键 CSS 内联到 head 中：将首屏所需的关键样式直接写在
<style></style>里，避免外链阻塞，加快首次渲染。 -
非关键 CSS 异步加载：使用 JavaScript 动态插入 link 标签，或利用
rel="preload"预加载后切换为 stylesheet，例如：
- JS 脚本使用 defer 加载并操作样式：若脚本依赖特定样式已加载，应确保 defer 脚本在关键 CSS 后引入，以便正确获取元素尺寸等信息。
- 避免 defer 脚本修改尚未加载的 CSS 影响的布局：比如获取 offsetHeight 前确认相关样式已生效，否则可能读取错误值。
综合示例：优化的 HTML 结构
一个兼顾性能与功能的典型结构如下：
<head> <meta charset="utf-8"> <title>Optimized Page</title><!-- 内联关键 CSS --> <style> .header { color: #333; } .hero { height: 200px; } </style>
<!-- 预加载异步 CSS --> <link rel="preload" href="theme.css" as="style" id="theme-css">
<!-- 异步 JS 使用 defer，等待文档解析完成 --> <script src="app.js" defer></script> </head> <body> <div class="header">Header</div> <div class="hero">Hero Content</div>
<script> // 页面解析完成后执行 document.addEventListener('DOMContentLoaded', () => { const link = document.getElementById('theme-css'); if (link) link.rel = 'stylesheet'; // 激活预加载的 CSS }); </script> </body>
这样既避免了关键资源阻塞，又保证了脚本在合适时机运行。
基本上就这些。掌握 CSS 引入机制与 async/defer 的行为差异，能帮助我们构建更快更可靠的网页应用。
