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

Posted 2023-02-22

【中文标题】如何防止 CSS 渲染阻止我的网站？

【英文标题】：How to keep CSS from render-blocking my website?

【发布时间】：2014-10-03 12:19:14

【问题描述】：

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

https://developers.google.com/speed/pagespeed/insights

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

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

显然这会阻止我的页面的呈现。现在，如果这是 javascript，我可以在标签中使用 async 字，它会解决问题，但这不是我正在加载的 JavaScript 文件！

有没有办法阻止这个资源阻止我的浏览器并强制它等到它被下载？

【问题讨论】：

您可以使用 加载正文末尾的字体。 . 仍然，这会导致 FOUC，就像使用 JS 一样。你想让他们再等一会儿，还是有闪烁？就个人而言，我会等待......

@dandavis：你是对的，当然，虽然从技术上讲，style 和 link 在 body 内部都无效（或 html，只是 head）（虽然每晚spec 有一个scoped 允许它的属性）。但我认为世界上没有浏览器在乎。使用 JavaScript 可能没有必要。人们可能希望通过将 JS 放入 head 中来尽快开始下载最微小的部分，但浏览器的预取扫描器更有可能尽快找到 link 元素...

@dandavis：谢谢，我会测试这个选项。我个人不介意 FOUC，所以我相信这是我需要的！

@dandavis：FWIW，我会把它作为答案发布（引用新的scoped attribute）。

搞定了。谁来发布答案？ xD

【参考方案1】：

你可以用 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 的末尾使用 style 元素，就在结束 </body> 标记之前：

<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

现在这是有效的 HTML（截至 HTML 5.2 的 20170808 草案），但如果您在 style 中放置 style 甚至在它生效之前，我从来没有遇到过关心它的浏览器。

与使用 JavaScript 相比，这样做的优点是：

理论上，浏览器的预取扫描器可能找到 style 元素并提前开始下载（尽管如果您将 JavaScript 放入 head，这种可能性不大） , 和

即使用户禁用了 JavaScript，它也能正常工作。

或者，您可以将link 元素移动到body 的末尾，但目前，这是无效的，scoped 属性（还没有？）似乎不适用。 （为什么让它适用于style 而不是link[rel=stylesheet]？我不知道，也许只是还没有到达那里......）

【讨论】：

这个方案和dandavis比较，有什么区别？如果没有启用 JS，他的解决方案仍然有效吗？而这个不会。这种解决方案的主要优势是什么？

@Flame_Phoenix：实际上我想我可能会对 Dan 的做法稍作修改：将 link 元素放在 body 的末尾。它不是有效的 HTML，但我认为地球上没有真正关心的浏览器。或者使用style 元素；在时刻，这也是无效的，但如果你在其上抛出scoped 属性，显然它是will be valid fairly soon。 （不，我不知道他们为什么要将scoped 添加到style 而不是link[rel=stylesheet]。也许只是“还没有”。）

如果您将其添加为答案，我将给予荣誉++并接受它：D

@Flame_Phoenix：dandavis 似乎不想发布答案，所以我更新了上面的内容。

@T.J.Crowder 这是有效的 HTML as of HTML 5.2

【参考方案2】：

<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>

【讨论】：

来自审核队列：我可以请求您为您的答案添加更多上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息，这将对提问者和未来的读者都有帮助。