延迟加载非关键 CSS
1年前
超过561天
温馨提示
本文最后更新于2023年05月11日，已超过561天没有更新，若内容或图片失效，请留言反馈。
如何优化
比方说下面例子：（styles.css里是非关键CSS代码）
<link rel="preload" href="styles.css" as="style" onload="this.οnlοad=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
主要原理如下：
link rel="preload" as="style"异步请求样式表（详情可见 Preload critical assets guide）
onload属性允许CSS在加载完成之后执行一些处理，在这里执行null转化，可以避免在切换rel属性时重复处理
noscript元素对不支持javascript的浏览器做兼容。
在本指南中，您使用了普通代码来实现此优化。在实际的生产场景中，最好使用 loadCSS 之类的函数，它们可以封装该行为并且在不同的浏览器中都运行良好。
文章摘取自：https://web.dev/defer-non-critical-css/
none
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
