不阻塞渲染加载 CSS

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程各个阶段的云产品。立即开始使用 价值 200 美元的免费积分!

通常您确实希望 CSS 阻塞渲染。如果页面先加载没有 CSS 的内容,然后在 CSS 解析并应用到页面时才进行重新排列,页面将以非常奇怪的方式加载。

但是,在某些情况下您可能希望延迟加载 CSS - 例如,您不介意延迟下载的自定义字体样式表。或者,如果您正在进行关键 CSS,甚至您的主样式表。

Keith Clark 在这篇文章中介绍了一种非常简单的方法来实现这一点(没有依赖项)。Scott Jehl 在评论中提到 onload 的支持并不完善。他的 小型异步 CSS 加载器 可能是获得最佳浏览器支持的最佳方法。

延迟加载 CSS 的另一种方法是将其放在文档的底部,就像我们经常对脚本所做的那样。但是请记住,在头部执行此操作的优势是下载会立即触发,因此最终会更快一些。我们将脚本放在页脚的原因是,不仅脚本的下载会阻塞,而且脚本的执行也会阻塞(双重打击)。我不确定 CSS 是否具有阻塞执行(如果可以这样说),但我认为没有(?)。

直接链接 →