CSS加载性能优化
将首屏页面要用到的CSS文件，放在页面头部加载，其他模块的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>
转自：https://www.tuicool.com/articles/Yfeeu2J
- 上一篇 »【web性能】让css更简洁、高效
- 下一篇 »CSS3 Loading，加载动画效果