如何避免head内JS注入CSS时出现无样式内容闪烁（FOUC）

核心方案是使用document.write将link标签直接写入HTML解析流，让浏览器将其识别为普通的静态头部样式标签，继承原生的阻塞渲染特性，从根源避免FOUC问题。

实现代码 #

<head>
   <script>
        var ssHref = useA() ? "a.css" : "b.css";
        document.write('<link rel="stylesheet" href="' + ssHref + '">');
   </script>
</head>

方案说明 #

• 该方案的效果和直接在head内手写<link rel="stylesheet">完全一致，浏览器会默认阻塞后续页面渲染，直到对应的样式表加载完成，不会出现无样式内容闪烁。
• 完全符合所有约束要求：不需要修改两个CSS文件的内容，同一时间只会加载一个样式表，不需要添加任何隐藏页面等待资源加载的逻辑。
• 注意该用法仅适用于head内的同步执行脚本，不要在异步脚本、DOM加载完成后的回调中使用document.write即可。

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