异步加载 CSS 的最简单方法 | CSS-Tricks

Scott Jehl

为了提升页面性能和弹性，我们可以采取的最有效的措施之一是以一种不会延迟页面渲染的方式加载 CSS。这是因为默认情况下，浏览器会同步加载外部 CSS，这会阻塞所有页面渲染，直到 CSS 下载和解析完毕，这两种操作都可能导致延迟。

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

不过，不要对所有样式表都这样做，否则您会在页面加载时遇到非常难看的“未样式内容闪烁”（FOUC）。您需要将此技术与一种交付关键 CSS 的方法配对。不过，就像 Scott 在开头所说的那样，这样做确实非常有效。

有趣的小故事…… 在 CodePen 上的我们的 Pen 编辑器页面上，我们遇到了一个 FOUC 问题（注意，此视频中有非常快的白色闪烁）

在 @firefox 中，CodePen 已经这样做了（几年？）

我们页面顶部的 <link rel=“stylesheet”> 非常正常，应该阻塞渲染，阻止 FOUC，对吧？

很想知道原因。 pic.twitter.com/HGTHwpemiy

— Chris Coyier (@chriscoyier) 2019 年 6 月 20 日

奇怪的是，我们在 <head> 中的 <link> 标签中完全正常地加载了我们的 CSS，这应该会阻塞渲染并防止 FOUC。但是，这里存在一些难以重现的错误。幸运的是，我们找到了一个奇怪的解决方案，因此现在我们在 <head> 中添加了一个空 <script> 标签，它以某种方式解决了这个问题。

直接链接 →

评论