preload

[hysryt]

<link rel="preload" href="..." as="...">

[hysryt]

• リソースを先読みする
• 先読みはレンダリングブロックしない
• それ自体がonloadを発火する

CSSの場合

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

先読みが完了すると onload が発火する。 onload の中で rel を stylesheet に変更することで先読みしたCSSを適用している。 this.onload=null; がないとなぜか rel を切り替えるタイミングで再度読み込みが走ってしまう。（Chromeでのみ確認、SafariとFirefoxでは正常に動作する）