我正在尝试优化我的移动网页的加载速度，为此我正在使用以下网站：
该网站评估我的源码并告诉我可以改进的内容。在我的网站中，我下载了一种字体：
<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>
字体将在主渲染外加载。当字体完成加载时，会有视觉变化……如果用户禁用了JavaScript，则不会加载字体。
或者，正如dandavis指出的那样，您可以在body结束标签</body>之前使用style元素：
<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>
现在它是有效的 HTML（截至 HTML 5.2 的 20170808 版草案），但即使在它变得有效之前，我从未遇到过放置 style 在 body 中并且让浏览器关心它的情况。
与使用 JavaScript 相比，这样做的优点是：
理论上，浏览器的预取扫描程序可能会找到 style 元素并更早地开始下载 (尽管如果你将 JavaScript 放在 head 中，这不太可能)，而且
即使用户禁用了 JavaScript，它也能起作用。
或者，您可以将您的 link 元素移到 body 的末尾，但目前这是无效的，并且 scoped 属性似乎不适用（还没有？）。 （为什么将其应用于 style 而不是 link[rel = stylesheet]？我不知道，也许只是因为还没有到达那里......）
<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>
body（或者html中只有head）中，style和link都不是有效的标签（尽管夜间规范有一个scoped属性可以允许它）。但我认为世界上没有一款浏览器会在意这个。用JavaScript做这件事可能是不必要的。通过将JS放在head中，我们可能希望能够稍微提前下载一点内容，但更有可能的是，浏览器的预取扫描程序会立即找到link元素... - T.J. Crowderscoped属性）。 - T.J. Crowder