javascript - 如何在没有内联脚本的情况下异步加载 CSS(符合 CSP)

Question

我想实现异步加载 CSS 文件以获得更快的性能。但是我也想要安全性，所以我希望我的网站有 CSP。

<link rel="stylesheet" media="print" class="AOcssLoad" .... onload="this.onload=null;this.media='all';" />

在不深入细节的情况下，它希望我避免像 onload 这样的事情以及作为元素一部分的许多其他 JS。

我希望它看起来像这样

<link rel="stylesheet" media="print" class="AOcssLoad" href="" />

请提出一种无需上述内联 JS 即可实现异步 CSS 文件的方法。

我们可以使用内联 <script>标签或单独的 JS 文件。

我尝试将下面的代码作为内联 JS。下面是 JS 的 HTML，

<script  nonce="" type="text/javascript" data-exclude="true">

var Script = document.getElementsByClassName("AOcssLoad");
for (var i = 0 ; i < Script.length; i++) {
    this.className += " Loading";
    Script[i].addEventListener("load", function({
        this.onload=null;this.media="all";
        this.className += " OnLoad";
    });
}
</script>

虽然它有效，但非常不可靠。

我无法理解这个问题，但我会说它只有 50% 的时间有效，有时只需重新加载页面就可以解决/解决问题，而 css/html/cache 本身没有明显的变化。

请帮助我对此进行改进，或为此构建更好的方法。

编辑:

按照评论中的建议，我尝试了不同的方法，包括从 GitHub 到其他资源的链接。

这些方法是不可靠的，我会说它们工作的次数不到 50%。 但是我尝试使用 jQuery(document).ready()和 add media="all"所有 css 文件，但这会增加 TBT(总阻塞时间)，从而影响我的网站性能

编辑 2:

正如你们中的许多人在答案中反复指出的那样，使用 DOMcontentLoaded 和许多其他方法可以帮助实现我想要实现的目标。

然而，这些方法都有助于显着增加 TBT(总阻塞时间)。

不损害 TBT 的方法将受到赞赏。

Answer 1

我建议使用 fetch().then() 并将其作为 style 元素注入(inject):

var stylesheetURLS = ["style.css", "style2.css"]
stylesheetURLS.forEach(url => {
  fetch(url).then(response => response.text()).then(stylesheet => {
    var styleElement = document.createElement("style");
    styleElement.textContent = stylesheet;
    document.head.append(styleElement);
  });
});

我不确定 fetch 是否很慢，但如果是这样我也不会感到惊讶。

---

替代fetch:XMLHttpRequest

var stylesheetURLS = ["style.css", "style2.css"];
stylesheetURLS.forEach(url => {
  var request = new XMLHttpRequest();
  request.open("GET", url);
  request.send();
  request.onload = function() {
    var styleElement = document.createElement("style");
    styleElement.textContent = request.responseText || request.response;
    document.head.append(styleElement);
  }
});

我再次不确定这是否比 fetch

快