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=...>
