同一CSS文件被多个link标签引入会触发多次CSSOM构建，即使href相同也会生成独立CSSOM树，造成冗余计算和布局阻塞；必须通过构建工具提取公共CSS或动态插入前手动去重，而非依赖浏览器自动 dedupe。
同一CSS文件被多个标签引入会触发多次CSSOM构建
浏览器不会因为href相同就跳过解析——每次遇到<link rel="stylesheet">，无论路径是否一致，都会走完整加载→解析→构建CSSOM流程。哪怕两次都是href="/common.css"，也会生成两套独立CSSOM树，造成冗余计算和布局阻塞。
重复解析的典型现象和验证方式
常见表现包括：DevTools Elements 面板中出现多个同名<link>标签；Network 面板里common.css发起多次请求（即使命中强缓存，仍要走HTTP往返）；样式调试时发现同一选择器被应用两次、计算样式面板显示重复来源。
- 用
grep -r "common.css" src/ --include="*.html"快速检查硬编码重复 - 打开 Chrome DevTools → Network → 切换到 CSS 类型，筛选文件名确认请求数量
- 在 Elements → 中手动数
<link href="common.css">出现次数
为什么动态插入也逃不过重复解析
像document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'stylesheet', href: '/common.css' }))这类JS操作，浏览器同样视为新资源请求。它不关心你是不是刚插过一模一样的href，只要DOM里新增了<link>，就会触发新一轮加载与解析。
- 没有内置去重机制——
type="module"脚本才支持自动dedupe，CSS link不享受该待遇 - 动态插入时机不可控，容易在组件重复挂载、路由切换时被反复执行
- 无法通过HTTP缓存头规避：即使返回304，CSSOM重建仍会发生
真正起作用的不是“复用标签”，而是“避免重复声明”
所谓“复用资源标签”是误解。浏览器从不复用已解析的CSSOM，也不会把第二次<link>指向第一次的结果。唯一有效路径是确保全局CSS只通过一个<link>加载，所有组件内样式改用CSS-in-JS、:host或scoped隔离，而不是靠删DOM节点或监听onload做补救。
立即学习“前端免费学习笔记（深入）”；
- 构建工具层面：Vite/Webpack需配置
manualChunks提取公共CSS，而非依赖运行时逻辑 - 模板层面：禁用
@import，不用相对路径混写（./css/a.cssvscss/a.css），统一配<base href="/>%0A - %E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%BF%85%E9%A1%BB%E5%B8%A6%E5%8E%BB%E9%87%8D%E5%88%A4%E6%96%AD%EF%BC%9A
if%20(!document.querySelector('link[href=" ...>
<link>，不记你上一秒干过什么。 
