17370845950

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=1 vs critical.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 执行时的尝试，都在对抗浏览器默认渲染流水线，得不偿失。