<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">
と記述すると、PreloadでCSSを取得して、読み込みが終わったらstylesheetを適用させるみたいな感じになる。Preloadはレンダリングをブロックしないので、非同期にCSSを読み込みつつ、読み込み終わったら適用させるみたいなことができる。シンプルでいい。
これは Preload: What Is It Good For?
の MARKUP-BASED ASYNC LOADERの箇所に書いてある話で、現在はChrome Canaryのみで対応されていて、問題なければ4月中頃にChromeで使えるようになるらしい。
Preloadについては、仕様には下記のように書いてある。
The preload keyword on link elements provides a declarative fetch primitive that addresses the above use case of initiating an early fetch and separating fetching from resource execution. As such, preload keyword serves as a low-level primitive that enables applications to build custom resource loading and execution behaviors without hiding resources from the user agent and incurring delayed resource fetching penalties.
リソースを取得するタイミングは仕様のProcessingの項目に詳細が記されているのですが、まあ、HTMLがパースしてpreloadのタグがDocumentに挿入されたタイミングとかで、読み込まれる。だからすぐ読み込まれるけど、リソースのexecutionはされない。HTMLのパースも止まらない。
Preload: What Is It Good For?では、すでに存在しているprefetchやsubresourceとの違いについても触れられている。prefetchは次の画面で必要なリソースを「prefetch」するもの。subresourceとは現在の画面で使うリソースなんだけど、低いプライオリティでリソースを取得するので、subresourceを設定してもしなくても結局同じタイミングぐらいで取得されたりするらしい。その点、preloadはすぐにダウンロードがされていくので有用と。
あとHTTP/2 Pushの機能との比較も書かれていて、ひとつにはpreloadはloadのeventが発生するので、リソースがロードされたタイミングがわかると。あとブラウザのキャッシュとかとの相性もpreloadの方が良さそう。
Preloadの実装ではCSSの他にもいろんなリソースをPreloadすることができて、いろいろと便利に使えそうな気がする（たぶん）。
詳しくはPreload: What Is It Good For?を。一読の価値はあると思います。