CSS性能优化的技巧

1、内联首屏关键CSS

将CSS直接内联到HTML中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。所以说，内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。
如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。因此，我们应当只将渲染首屏内容所需的关键CSS内联到HTML中。

2. 异步加载CSS

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'"> // prefetch降低优先级；preload提高优先级

注意，as是必须的。忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。

consumer	Preload directive
<audio>	<link rel=preload as=audio href=...>
<video>	<link rel=preload as=video href=...>
<track>	<link rel=preload as=track href=...>
<script>, Worker's importScripts	<link rel=preload as=script href=...>
<link rel=stylesheet>, CSS @import	<link rel=preload as=style href=...>
CSS @font-face	<link rel=preload as=font href=...>
<img>, <picture>, srcset, imageset	<link rel=preload as=image href=...>
SVG's <image>, CSS *-image	<link rel=preload as=image href=...>
XHR, fetch	<link rel=preload as=fetch crossorigin href=...>
Worker, SharedWorker	<link rel=preload as=worker href=...>
<embed>	<link rel=preload as=embed href=...>
<object>	<link rel=preload as=object href=...>
<iframe>, <frame>	<link rel=preload as=document href=...>

3. 压缩文件、去除无用css