总体上来说，下面这些是为什么CSS对性能这么重要的原因：
- 浏览器必须等到渲染树完全渲染才能渲染页面；
- 渲染树的DOM和CSSOM整合到一起的结果；
- DOM是阻塞JavaScript渲染的HTML等；
- CSSOM是所有被应用到DOM上的CSS规则；
- 可以给JavaScript设置async和defer属性，使JavaScript不被闭塞；
- 要设置CSS异步有很大的不同；
- 所以，最重要的一个规则就是：你的页面渲染能有最快，依赖于最慢的样式文件的渲染时间。
综上，CSS是页面渲染的一个瓶颈，如何打破这个瓶颈，让页面渲染变得更快，减少首次渲染的时间？下面给出几种方法。
1. 提取主要的CSS
一个很有效的减少首次渲染时间的方法，是利用主要CSS类型：将首次渲染需要的所有公共样式抽出来，单独用<style>标签内联地放到文档的<head>内，再异步地加载剩下的样式。
虽然这个方法很有效，但是不是那么简单。高度动态化的网站很难拆分样式，这个过程应该自动化，要假定以上的目录是主要样式，很难去界定边缘场景下的情况。随着项目越来越大，这个工作会变得更难。
2. 分割媒体类型
如果实现提取主要CSS比较复杂，可以使用另一个方法：根据媒体查询来将CSS文件拆分成单独的文件，这样方法可以让浏览器根据当前环境（媒介，屏幕尺寸，分辨率和方向等）需要的CSS以高优先级进行下载，阻塞关键路线。对那些不是当前环境需要的CSS文件会以低优先级进行下载，在关键路线下全部完成之后再开始。
以下为一个CSS文件和拆分成多个CSS文件的示例代码：
<!-- 合并成一个CSS文件 -->
<link rel="stylesheet" href="all.css" />
<!-- 根据媒体查询，拆分成多个CSS文件 -->
<link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
以下为两种方式的加载对比，注意优先级（Priority）的区别。
3. 避免在CSS文件中使用 @import
之所以不要在CSS文件中使用@import去引入其他CSS文件，是因为被import的CSS文件，不是异步引入，而是等HTML树和CSS文件加载成功之后，才会去加载被import的CSS文件。
以下为使用@import和不使用@import的示例代码。
<!-- 使用@import -->
<link rel="stylesheet" href="all.css" />
/* all.css中引用内容 */
@import url(imported.css);
<!-- 不适用@import，将imported.css单独引用 -->
<link rel="stylesheet" href="all.css" />
<link rel="stylesheet" href="imported.css" />
以下为这两种方式下，CSS文件的加载过程：
4. Firefox和IE/Edge浏览器中，将@import放到JS和CSS之前
在Firefox和IE/Edge浏览器中，预加载扫描器不会选择任何定义在<script src="" />和<link rel="stylesheet" />后面的@import内容。这些被import的CSS文件，会在它前面的JavaScript或CSS文件被完全加载之后才开始被下载。
这种情况的解决方案，是避免使用@import，再使用一个<link rel="stylesheet" />标签来加载CSS文件。
还有更多的提高CSS性能的方法，可以访问原文进行查看。
- Blink和Webkit浏览器中，将@import地址用引号引起来
- 不要将
<link rel="stylesheet" />放到异步代码前面 - 将所有非CSSOM查询JavaScript放到CSS前面；将所有CSSOM查询JavaScript放到CSS后面
- 将
<link rel="stylesheet" />放到<body>中
希望这篇文章能给你启发，让你更好地理解CSS及其性能优化方法，更好地优化你的网站。
1707
2019.4.1