如何基于localStorage值用JS加载CSS并避免FOUC问题？

针对你遇到的动态加载主题CSS时SVG图标闪烁、FOUC的问题，给你几个实用的解决方案，不用大规模重构现有代码：

1. 同步执行主题判断JS，优先插入标签 #

把主题判断的内联JS放在<head>的最底部（外部脚本之前），并且不要加async/defer，让它同步执行：

<head>
  <!-- 元数据、默认meta标签 -->
  <script>
    // 同步读取主题，立即创建样式标签
    const savedTheme = localStorage.getItem('theme') || 'default';
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = `${savedTheme}.css`;
    // 插入到<head>的最前面，确保优先加载
    document.head.insertBefore(styleLink, document.head.firstChild);
  </script>
  <!-- 外部脚本放在这个JS之后 -->
  <script src="external-script.js"></script>
</head>

这样JS会在外部脚本执行前完成主题样式标签的插入，避免样式标签被挤到脚本之后导致加载延迟，同步执行的开销可以忽略不计。

2. 内联图标关键样式，避免裸奔闪烁 #

既然FOUC主要出现在SVG图标上，直接在<head>里内联图标的基础样式，让图标在主题CSS加载前就有默认样式：

<head>
  <style>
    /* 覆盖主题CSS里的图标样式，先给基础展示 */
    .svg-icon {
      fill: #333; /* 默认主题颜色 */
      width: 24px;
      height: 24px;
      visibility: visible !important;
    }
    /* 如果是深色主题，提前设置深色图标样式 */
    :root[data-theme="dark"] .svg-icon {
      fill: #fff;
    }
  </style>
  <script>
    // 提前设置主题属性，配合上面的内联CSS
    const savedTheme = localStorage.getItem('theme') || 'default';
    document.documentElement.setAttribute('data-theme', savedTheme);
    // 再加载主题CSS
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = `${savedTheme}.css`;
    document.head.appendChild(styleLink);
  </script>
</head>

主题CSS加载后会覆盖内联样式，用户只会看到最终的主题样式，不会出现图标无样式的闪烁。

3. 预加载主题CSS，提升加载速度 #

用rel="preload"提前加载主题CSS，加载完成后再转为样式表，这样JS判断主题后能更快拿到已预加载的文件：

<head>
  <script>
    const savedTheme = localStorage.getItem('theme') || 'default';
    // 创建预加载标签
    const preloadLink = document.createElement('link');
    preloadLink.rel = 'preload';
    preloadLink.as = 'style';
    preloadLink.href = `${savedTheme}.css`;
    // 加载完成后转为stylesheet
    preloadLink.onload = function() {
      this.rel = 'stylesheet';
    };
    document.head.appendChild(preloadLink);
  </script>
</head>

预加载不会阻塞页面渲染，但会让浏览器优先加载主题CSS，减少样式加载延迟。

为什么display:none方案会导致两次闪烁？ #

设置body { display: none }后，浏览器会暂停渲染整个页面，当JS恢复display时，页面开始渲染，但此时如果主题CSS还没加载完成，就会先渲染默认样式，等主题CSS加载后再切换，导致第二次闪烁。所以不要隐藏整个页面，而是针对闪烁的元素做样式兜底。

内容的提问来源于stack exchange，提问作者Рауль Каримов