Javascript 如何防止CSS渲染阻止我的网站？

我正在尝试优化我的移动网页的加载速度，为此，我正在使用该网站：

这个网站评估了我的来源，并告诉我可以改进的地方。在我的网站上，我下载了一种字体：

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

这很可能会阻止我的页面呈现。现在，如果这是JavaScript，我可以在标记中使用

async

这个词，它可以解决问题，但我正在加载的不是JavaScript文件

---

是否有任何方法可以阻止此资源阻止我的浏览器并强制其等待下载？

您可以使用JavaScript执行此操作：

<script>
(function() {
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700";
    document.querySelector("head").appendChild(link);
})();
</script>

现在这是有效的HTML（从HTML5.2的20170808草稿开始），但我从未遇到过一个浏览器关心它，如果你在

正文

中放置

样式

，甚至在它生效之前

与使用JavaScript相比，此方法的优点是：

理论上，浏览器的预取扫描器可能会找到

样式
元素并更早地开始下载（尽管如果将JavaScript放在
头部
，这种可能性不大），并且

即使用户禁用了JavaScript，它也可以工作

或者，您可以将

链接

元素移动到

正文

的末尾，但目前，这是无效的，

作用域的

属性似乎还没有应用。（为什么要将其应用于

样式

而不是

链接[rel=stylesheet]

？我不知道，也许这只是一个尚未实现的问题……

WebFont.load({
谷歌：{
系列：[“开放式SAN:400700400Italic，700italic']
}
});

您可以使用@import”//fonts.googleapis.com/css？family=Open+Sans:400700“。。。不过，这会导致FOUC，就像使用JS一样。你想让它们再等一会儿，还是让它们闪烁？就我个人而言，我会等待…@dandavis：当然，你是对的，尽管从技术上讲，

样式

和

链接

在

正文

（或者

html

，只是

标题

）（尽管夜间规范有一个

范围

属性允许它）。但我认为世界上没有一个浏览器会在意。用JavaScript来实现这一点可能是没有必要的。你可能希望通过将JS放在

头中来尽快开始下载，但更可能的是浏览器的预取扫描程序会尽快找到
链接
元素…@dandavis：谢谢，我会测试这个选项。我个人并不介意FOUC，所以我相信这就是我需要的@丹达维斯：FWIW，我会把它作为一个答案（参考新的）。让它工作起来。谁来公布答案？XD将此解决方案与dandavis相比，有什么区别？如果没有启用JS，他的解决方案仍然有效，对吗？而这个不会。这个解决方案的主要优点是什么？@Flame\u Phoenix:实际上，我想我可能会对Dan的做一点修改：将
链接
元素放在
正文
的末尾。它不是有效的HTML，但我认为地球上没有一个浏览器会真正关心它。或者使用
样式
元素；目前，这也将是无效的，但如果您在其上抛出
scoped
属性，显然是无效的。（不，我不知道为什么他们会在
样式
中添加
范围
，而不是
链接[rel=stylesheet]
。也许这只是“还没有”。）如果你加上这个作为回答，我将给予kudos++并接受它：D@Flame_Phoenix：dandavis似乎不想发布答案，因此，我已经更新了上述内容。@T.J.Crowder这是来自审阅队列的有效HTML：我可以请求您在您的答案周围添加更多上下文吗。只有代码的答案很难理解。如果你能在你的文章中添加更多的信息，这将有助于询问者和未来的读者。
<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,700,400italic,700italic']
    }
  });
</script>