重复的CSS <link>标签是否会引发布局或其他类型的问题？

首先明确：当前未出现布局问题，是因为完全相同的CSS内容重复解析、层叠后，最终计算出的样式和只引入一次完全一致，所以不会触发可见的布局异常，但确实存在多个可能触发故障的场景：

• 不必要的性能损耗
  虽然同一份静态资源浏览器会优先走本地缓存，但首次无缓存访问、缓存过期、用户手动禁用缓存的场景下，每一个<link>标签都会触发至少一次HTTP请求（哪怕返回304协商缓存也会产生往返开销）。如果页面内重复引入次数较多，弱网环境下页面加载速度会明显变慢。同时浏览器每加载一份CSS都需要执行样式解析、层叠计算逻辑，多余的计算会占用CPU资源，低配置移动设备上出现页面卡顿的概率会显著提升。
• 预期外的样式覆盖问题
  当后续迭代调整CSS加载顺序、修改样式内容时，重复引入的<link>很容易导致样式优先级异常，举个常见的反例：

  页面结构顺序：

  1. 顶部区块引入 <link rel="stylesheet" src="block.css">
  2. 全局公共样式引入 <link rel="stylesheet" src="global.css">
  3. 底部区块再次引入 <link rel="stylesheet" src="block.css">
     这种场景下，最后引入的block.css的样式优先级会高于中间的全局样式，直接覆盖掉预期生效的全局规则，这类问题隐藏性极强，排查难度很高。

• 依赖样式API的前端逻辑异常
  如果你的业务代码中用到了document.styleSheets统计样式表数量、监听<link>的load事件执行后续逻辑，重复的标签会导致事件触发多次、样式表统计结果偏大，进而引发回调逻辑重复执行、计数错误等问题，严重时可能出现页面重复渲染、数据重复提交等故障。
• 后续迭代的维护风险
  现有正常运行不代表后续迭代不会出问题：如果后续需要做静态资源合并、CDN域名切换、CMS架构升级，未处理的重复引入逻辑很容易引发上线后样式异常，且排查时很难第一时间定位到根因，会大幅提升维护成本。

如果暂时无法修改CMS的区块生成逻辑，可以临时加一段前置JS做去重：当插入新的<link>标签前，先判断当前DOM中是否已经存在相同src的标签，存在则跳过插入即可。

内容的提问来源于stack exchange，提问作者TD540