0

我在一个简单的静态页面中有以下 JavaScript <head>，它指定a.css或b.css作为样式表使用，具体取决于一些附加 JavaScript 的结果（useA()此处未显示）。

<head>
   <script>
        var ss = document.createElement("link");
        ss.rel = "stylesheet";
        ss.href = (useA() ? "a.css" : "b.css");
        document.head.appendChild(ss);
   </script>
</head>

当我在 Firefox 和 Chrome 上加载或刷新页面时，这会导致出现无样式内容 (FOUC)。

使用普通<link rel="stylesheet" ...>的没有这个问题：<head>使用<link>中加载的 CSS 显然是render-blocking。有没有办法让 CSS 注入的样式表也有相同的行为？

约束：

我不能改变a.css，b.css所以我不是在寻找一种解决方案，它涉及加载两个样式表或一个组合样式集，并在根元素上设置一个指示器类以影响工作表之间的选择。我也不是在寻找延迟任何显示直到页面完全加载的技巧visibility:hidden。display:none

4

0 回答 0