前言
关于前端css性能优化，网上很多类似文章，我之前也写过，《 网站前端性能优化之javascript和css 》，感兴趣的可以去看下。今天我们旧事重提，再来谈谈css的加载，及加载顺序。
通常的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> |
