多个独立标签是加载CSS最直接兼容的方式，浏览器并行加载且无JS依赖；禁用逗号分隔、@import串行加载及内@import；动态加载适用于按需场景；HTTP/2+下合理拆分优于合并。
多个 <link> 标签是最直接且兼容性最好的方式
浏览器原生支持并行加载多个 <link rel="stylesheet">，只要它们是独立的标签，就会被并发请求（受浏览器并发连接数限制，通常 6~8 个）。这种方式无 JS 依赖、无渲染阻塞意外风险，适用于绝大多数场景。
常见错误是把多个样式合并写成一个 <link>，比如：<link href="a.css,b.css"> —— 这完全无效，浏览器不会解析逗号分隔的路径。
- 每个
<link>必须单独写，例如：
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css"> <link rel="stylesheet" href="responsive.css">
- 加载顺序决定层叠优先级：后引入的 CSS 中相同选择器会覆盖前面的
- 避免在
中插入<link>，部分旧版 Safari 可能触发 FOUC（Flash of Unstyled Content）
@import 在 CSS 文件内引入其他 CSS 的风险点
@import 虽然语法上允许在一个 CSS 文件里导入另一个，但它是串行加载的：浏览器必须先下载并解析完当前文件，遇到 @import 才发起下一个请求。这会显著拖慢整体样式就绪时间，尤其在多层嵌套时。
更严重的是，@import 在 <style></style> 标签或 CSS 文件中使用时，不支持 media 查询的条件加载优化（而 <link> 支持）。
立即学习“前端免费学习笔记（深入）”；
- 不要这样写（性能差、不可缓存分离）：
/* main.css */
@import url("reset.css");
@import url("layout.css");
@import url("components.css");- 如果真要用
@import，只限于开发阶段做 Sass/Less 模块化组织，最终构建时应由预处理器展开为单文件或转为<link> - 绝对不要在 HTML 的
<style></style>块里写@import—— 大多数现代浏览器已将其视为低优先级，甚至延迟到 DOM 解析完成后才加载
动态加载多个 CSS（JS 控制）适合按需场景
当某些样式只在特定交互、路由或设备条件下才需要（比如暗色主题、打印样式、第三方组件皮肤），用 JS 动态创建 <link> 更合理。它不会阻塞初始渲染，也便于卸载（removeChild）。
注意：动态插入的 CSS 默认是异步加载的，但一旦插入 DOM 就立即参与样式计算，所以仍可能触发重排/重绘。
- 基本写法（无 Promise 封装）：
function loadCSS(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
loadCSS('dark-mode.css');
loadCSS('animation.css');- 若需确保加载完成后再执行逻辑（如初始化依赖样式的 JS 组件），得监听
link.onload或用link.addEventListener('load', ...)；onerror也建议监听 - 重复调用同一
href不会重复加载（浏览器自动去重），但多次创建同名<link>标签仍会多出 DOM 节点
HTTP/2 或 HTTP/3 下多个文件反而比合并更优？
过去为了减少请求数常把多个 CSS 合并成一个，但在 HTTP/2+ 支持多路复用的前提下，多个小 CSS 文件可以共享同一个 TCP 连接，并发传输效率高，且利于缓存复用（比如 base.css 长期不变，feature-x.css 频繁更新，分开加载可避免缓存失效）。
真正该警惕的是「过度拆分」：把每个 class 单独抽成一个文件，导致几十个 <link>，既增加 DNS 查找和 TLS 握手开销（尤其 HTTP/1.1），也加大 HTML 体积和解析负担。
- 推荐粒度：按功能域划分，例如
typography.css、forms.css、vendor/bootstrap.css - 构建工具（如 Webpack、Vite）默认对 CSS 做 code-splitting，但要检查输出是否生成了真实独立的
.css文件，而非仅 JS 中的字符串 - 使用
rel="preload"提前提示关键 CSS 加载，但仅对首屏必需样式用，别滥用
实际项目中最容易被忽略的，是样式层叠顺序与加载时机的组合效应——比如某个 <link> 因 CDN 故障加载失败，后续依赖它的样式规则就彻底丢失，而浏览器不会报错。加 onerror 监听和 fallback 机制不是锦上添花，是上线前必须验证的环节。
