如何异步加载 CSS 文件

我们可以像这样异步加载 CSS:

<link rel="stylesheet" href="style.css" media="print" 
   onload="this.media='all'; this.onload=null;">

应该什么时候使用css异步加载?

CSS 渲染是阻塞的,所以要考虑性能问题,因为浏览器下载 CSS,会停止绘制页面。
因此,任何对首屏内容不重要的 CSS 都应该异步加载。另外,14kb-ish 是单个往返 HTTP 请求的大小,因此最好将关键 CSS 保持在此大小以下。

CSS是如何工作的?

因为我们(还)没有用于加载 CSS 异步的原生方法,我们需要使用上述解决方法。我们欺骗浏览器媒体类型与当前环境不匹配,因此它不会阻塞渲染。加载完成后,我们使用 javascript onload 事件告诉浏览器开始加载延迟 CSS。

为什么可以使用链接预加载属性来异步加载 CSS?

似乎 media="print" 方法会给出更好的结果。正如 Scott Jehl 解释的那样:
“但更重要的是,预加载很早就以最高优先级获取文件,可能会降低其他重要下载的优先级,这可能比非关键 CSS 实际需要的优先级更高。”

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ttt5cn@163.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论