性能优化中有一个重要的指标——首次有效绘制。即指页面的首要内容（primary content）出现在屏幕上的时间。
内联首屏关键CSS
内联CSS能够使浏览器开始页面渲染的时间提前,我们应当只将渲染首屏内容所需的关键CSS内联到HTML中。内联之后的CSS不会进行缓存，每次都会重新下载。必须将内联后的文件大小控制在了14.6kb以内。
异步加载CSS
下列方式可以实现浏览器异步加载CSS：
- 第一种方式是使用JavaScript动态创建样式表link元素，并插入到DOM中。
// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
- rel="preload"这一Web标准指出了如何异步加载资源，包括CSS类资源。
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
文件压缩
文件的大小会直接影响浏览器的加载速度，这一点在网络较差时表现地尤为明显。
解决方案：
利用构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。
去除无用的CSS
一般情况下，会存在这两种无用的CSS代码：
- 一种是不同元素或者其他情况下的重复代码
解决方案：尽可能地提取公共类，减少重复。
- 一种是整个页面内没有生效的CSS代码
解决方案：找到并去除这些无用代码，可以利用插件Uncss，可以用来移除样式表中的无用CSS，并且支持多文件和JavaScript注入的CSS。
优化重排与重绘
重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。
下列操作会触发重排：
- 改变font-size和font-family
- 改变元素的内外边距
- 通过JS改变CSS类
- 通过JS获取DOM元素的位置相关属性（如width/height/left等）
- CSS伪类激活
- 滚动滚动条或者改变窗口大小
当元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘。
避免使用@import
不建议使用@import的原因有两点：
- 使用@import引入CSS会影响浏览器的并行下载
使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。
- 多个@import会导致下载顺序紊乱
排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。
