如何避免主题切换时已禁用CSS文件被重复请求下载

你遇到的重复请求问题核心是：带disabled属性的样式表链接会被浏览器判定为非必要资源，页面初始加载阶段不会主动预取该文件，每次你移除disabled属性启用样式时，浏览器才会触发资源加载逻辑。哪怕文件之前已经加载过，部分浏览器在缓存策略不匹配时也会重新发起请求校验，进而导致渲染卡顿。这是浏览器的默认行为，不是代码bug。

按改动成本从低到高给你几个可落地的方案：

方案1：最小改动，提前预加载深色样式表 #

不需要改现有切换逻辑，只需要在页面头部加一行预加载声明，告诉浏览器在页面初始加载阶段就把深色样式文件拉取缓存，后续切换disabled属性时直接读本地缓存，不会触发网络请求：

<head>
  <!-- 新增预加载声明 -->
  <link rel="preload" href="/darkly.css" as="style">
  <!-- 原有样式表保持不变，初始给深色样式加disabled即可 -->
  <link rel="stylesheet" type="text/css" href="/flatly.css">
  <link rel="stylesheet" type="text/css" href="/darkly.css" disabled id="dark-style">
</head>

你原来写的disabled属性切换逻辑完全不需要改动。

方案2：用无效媒体查询触发预加载，兼容所有浏览器 #

如果需要兼容不支持rel="preload"的旧浏览器，可以把初始的深色样式表设为一个永远不匹配的媒体查询。浏览器会默认下载所有rel="stylesheet"的资源（无论媒体查询是否匹配，因为要考虑窗口缩放、设备切换等动态匹配场景），但不会应用不匹配媒体查询的样式，切换时只需要修改媒体查询为all即可生效：

<link rel="stylesheet" type="text/css" href="/flatly.css">
<!-- 初始用不可能匹配的媒体查询，文件会提前下载但不生效 -->
<link rel="stylesheet" type="text/css" href="/darkly.css" media="(max-width: 0px)" id="dark-style">

对应的切换逻辑稍作调整即可：

const darkLink = document.getElementById('dark-style')
// 启用深色
darkLink.media = 'all'
// 切回浅色
darkLink.media = '(max-width: 0px)'

这个方案没有兼容问题，所有浏览器都会提前缓存样式文件，切换时无网络请求。

方案3：长期最优方案，CSS变量+类名切换 #

如果后续要长期维护主题功能，最推荐把两套样式的差异抽离为CSS自定义属性（CSS变量），不需要维护两份完整样式表，切换时只需要修改根节点类名即可，零网络开销，还能避免样式切换的闪烁问题：

/* 浅色主题默认变量 */
:root {
  --bg: #ffffff;
  --text: #212529;
  --border: #dee2e6;
}
/* 深色主题变量，类名挂载后自动覆盖默认值 */
html.dark {
  --bg: #1a1d21;
  --text: #f8f9fa;
  --border: #495057;
}
/* 业务样式统一引用变量，不需要写两套重复规则 */
body {
  background: var(--bg);
  color: var(--text);
}
.container {
  border: 1px solid var(--border);
}

切换逻辑非常简单，还可以顺手把用户偏好存在本地，下次打开自动适配：

// 初始化时读取本地存储的主题偏好
if (localStorage.getItem('theme') === 'dark') {
  document.documentElement.classList.add('dark')
}
// 切换按钮点击逻辑
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark')
  localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
})

这个方案性能最好，切换是纯CSS层面的变量覆盖，连样式表重新解析的开销都极小，完全不会有卡顿。

记得检查CSS静态资源的响应头，不要给CSS文件设no-store之类的禁用缓存配置，带版本hash的静态资源可以直接设1年以上的强缓存，进一步避免不必要的网络请求。

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