前言
关于前端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>为了避免有些浏览器会重新调用处理程序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>上面文章仅仅是个人对css加载及加载循序的浅陋粗显简介，不对之处，还望高手指正！！