link 标签引入外部 CSS 是最稳妥的选择，支持并行下载、缓存复用和媒体查询，不阻塞 DOM 解析；应避免 @import、内联样式滥用及 JS 动态插入 link。
link 标签引入外部 CSS 是最稳妥的选择
静态页面没有服务端逻辑， 是唯一推荐的样式加载方式。它支持并行下载、缓存复用、媒体查询条件加载，且不会阻塞 DOM 解析（除非加上 blocking 属性，但该属性不存在）。
常见错误是误用 @import：写在 块里或 CSS 文件中，会导致串行加载、阻塞渲染，尤其多层嵌套时白屏时间明显增长。
- ✅ 正确：
- ❌ 避免：
- ❌ 更糟：
/* 在 styles.css 里再 @import "base.css"; */
内联 style 和 style 标签只用于极小范围、不可复用的样式
style 属性和 块适用于「仅此一页、仅此一元素、动态生成后立刻需要样式」的场景，比如邮件模板、单页快照、A/B 测试变体。它们无法被浏览器缓存，每次加载都重复传输，且破坏样式与结构分离原则。
性能上， 块会阻塞后续 JS 执行（因为 CSSOM 构建需同步完成），而 的加载是异步的（解析不阻塞，但渲染会等关键 CSS 就绪）。
立即学习“前端免费学习笔记（深入）”；
- 适合内联：
style="opacity: 0.8;"这类运行时计算出的临时状态 - 不适合内联：
.button { background: #007bff; padding: 8px 16px; border-radius: 4px; }—— 这种应抽到外部文件 - 注意：
块若含@import，同样触发串行加载，等同于自废武功
preload + link rel="stylesheet" 可提前触发关键 CSS 下载
当关键 CSS 文件路径明确、体积不大（建议 ≤ 20KB）、且必须首屏立即生效时，可用 提前发起请求，再用普通 加载——两者 href 必须完全一致，否则浏览器不会复用已 preload 的资源。
这个组合对 HTTP/2 支持友好，但不解决 CSS 解析和应用耗时；若 CSS 本身含大量 @font-face 或复杂选择器，仍可能造成 FOUC 或布局抖动。
- ✅ 正确写法：
- ❌ 错误：
href大小写不一致、带 query 参数差异（如critical.css?v=1vscritical.css?v=2）都会导致重复请求 - ⚠️ 注意：不要对所有 CSS 都 preload，仅限真正影响首屏渲染的那部分；多余 preload 会抢占带宽，反而拖慢其他资源
避免使用 import 规则或 JS 动态插入 link 标签来加载主样式
静态页面中，CSS 应在 HTML 解析早期就声明。用 JS 动态创建 （如 document.head.appendChild(link)）或依赖 import 规则，会让样式加载时机不可控，大概率出现 FOUC（Flash of Unstyled Content）或布局跳变。
即使加了 media="print" 再切换，也存在竞态：JS 执行时机晚于 HTML 解析完成，用户可能看到未样式化内容闪现。
- 不要这样写：
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'main.css'; document.head.appendChild(link); // 不可控，不推荐 - 也不要这样写：
- 真正需要 JS 控制样式加载？说明已不是纯静态页面，该考虑轻量构建流程（如 esbuild + postcss）而非硬塞逻辑
关键点始终是：静态即确定。路径、顺序、依赖关系在 HTML 发出前就该固定下来。任何把样式加载推迟到 JS 执行时的尝试，都在对抗浏览器默认渲染流水线，得不偿失。
