谈谈css的加载及加载循序

2018-01-10 984 1 编辑:深正互联 来源:互联网

通常的css加载循序

一般情况下,我们css样式表是放在头部,同时为了减少请求,我们通常对css进行一个合并压缩。 目前我们css一般是如下加载的:

<head>

  <link rel="stylesheet" href="/all-of-my-styles.css">

</head>

<body>

  …content…

</body>

这样可以,但是有几个性能问题,我们可以继续优化:

问题:

所有的css都合并压缩成一个文件,放在页面头部加载。可能首屏我们仅仅用到一点点css,却在头部加载了所有的css,造成资源的不合理加载和浪费。假如css很大,严重影响网页加载速度和首屏显示速度。

换个思路

假如不合并,单个css压缩引用,文件大小是小了,但是请求数量多了一些。 权衡二者,并且进行性能测试对比,发现如下写法确实比我们所有css放在头部一次性加载,首屏显示速度要快些:

<head>

</head>

<body>

  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->

  <link rel="stylesheet" href="/site-header.css">

  <header>…</header>

  <link rel="stylesheet" href="/article.css">

  <main>…</main>

  <link rel="stylesheet" href="/comment.css">

  <section class="comments">…</section>

  <link rel="stylesheet" href="/about-me.css">

  <section class="about-me">…</section>

  <link rel="stylesheet" href="/site-footer.css">

  <footer>…</footer>

</body>

但是还是有性能可以优化的地方!

例如:

我们首屏仅仅显示了头部和文章,其他模块首屏不显示。那么,其他模块的css我们可以完全异步来加载。如何异步加载呢?

请看下面

loadCSS 及 Preload

关于preload,推进2篇文章给大家看下:

1、通过rel="preload"进行内容预加载:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content

2、preload 的w3文档:https://www.w3.org/TR/preload/

对于一些不是首屏加载的css,我们可以如下写法:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">

防止浏览器禁止js,保险起见,也可以如下:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">

<noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>

为了避免有些浏览器会重新调用处理程序rel='stylesheet'这个属性,我们一般推荐如下写法:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>

为了更好的兼容rel=preload,可以使用loadCSS ,github地址:https://github.com/filamentgroup/loadCSS

因此,不考虑浏览器兼容问题的情况下(考虑兼容问题,可以使用loadCss,这里不多演示),我们对上面代码再次进行优化:

<head>

  <link rel="stylesheet" href="/首屏加载css.css">

  <link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

</head>

<body>

  <header>…</header>

  <main>…</main>

  <section class="comments">…</section>

  <section class="about-me">…</section>

  <footer>…</footer>

</body>

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联