我正在尝试优化移动网页的加载速度，为此我正在使用该网站：
- https://developers.google.com/speed/pagespeed/insights https://developers.google.com/speed/pagespeed/insights
该网站评估我的来源并告诉我可以改进的地方。在我的网站中我下载了一种字体：
<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 指出的那样，你可以使用style末尾的元素body, 就在收盘前</body> tag:
<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>
现在这是有效的 HTML（截至 HTML 5.2 的 20170808 草案），但如果您将style in body甚至在其生效之前。
与使用 JavaScript 相比，这样做的优点是：
理论上，浏览器的预取扫描器might找出style元素并提前开始下载（尽管如果您将 JavaScript 放入head), and
即使用户禁用了 JavaScript，它仍然可以工作。
或者，您也可以移动您的link元素到末尾body，但目前这是无效的，并且scoped属性（还？）似乎不适用。 （为什么要让它适用于style并不是link[rel=stylesheet]？我不知道，也许这只是还没有到达那里的问题......）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
