TypechoJoeTheme
页面优化之CSS异步加载

即刻学术-学术论文写作-linux前后端开发-体系结构-存储架构-分布式-VPS logo

导航
统计
登录/注册
文章目录

页面优化之CSS异步加载

2021-01-11
/
2 评论
/
60 阅读
/
检测收录...
01/11

通常来说,我们都是在 header 中直接写上我们需要的css,比如:

<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet" media="all">

这样存在的一个问题就是多个css会串行加载,而作为开发人员我们希望只加载了主要css之后就可以开始渲染页面,不关键的css留着慢慢加载。

如何优化?

比方说下面例子:(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 函数来很好地进行优化
您的大名:
万水千山总是情,给个打赏行不行。 打赏
打赏
朗读
赞 · 0
版权属于:

即刻学术-学术论文写作-linux前后端开发-体系结构-存储架构-分布式-VPS

本文链接:

https://ijkxs.com/archives/88/(转载时请注明本文出处及文章链接)

评论 (2)
  1. TYPECHO合集站 作者
    Windows 10 · Google Chrome

    我昨天就在看这个 js css nginx 同步加载

    但是我发现 我cdn 不需要这个。。。

    2021-01-15 回复
    1. gogobody 作者
      Windows 10 · Google Chrome
      @TYPECHO合集站

      和cdn没关系,比如说你的 css 之间存在覆盖关系,比如你先引入bootstrap 再引入你自己的样式去覆盖,那这种情况必然得同步加载。不然你的样式就会错乱。

      2021-01-15 回复