link要素でpreloadを使って非同期にファイルを読み込む
link要素でpreloadを使って非同期にファイルを読み込むメモ．
preloadとは
通常のlink要素では，読み込みが終わるまで処理がブロックされてしまう．
一方，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.
ファイルの読み込みを開始しても処理はブロックされない． また，読み込みのみを行い実行は切り離されており，任意に実行タイミングを決められる．
現在の対応状況
IEとEdgeは対応してないので注意が必要である．
Can I use... Support tables for HTML5, CSS3, etc
resource hint
preloadのように非同期に読み込み処理などをしておくといったことは，以前からあったようで，resource hint と呼ばれている．
日本語の記事では以下がまとまっていてわかりやすい．
従来のresource hintとpreloadの違いは以下となる．
- 従来のresource hint: 次に遷移するページのためのファイルなどを非同期処理・読み込み
- preload: 現在のページのためのファイルを読み込む
使用例
MDNがわかりやすい．
rel="preload"とする．asにファイル形式を指定する．以下の例ではCSSファイルとJSファイルになっている．
<head> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <script src="main.js"></script> </body>
読み込み後，即時実行(Async Loder)
preloadはファイル読み込みのみなので，
実行用のlink要素も必要になる．
即時実行したい場合は，onloadでインラインにJavascriptを書くことで再現できる．
以下の記事のコードを引用する．
<link rel="preload" as="style" > href="<style>.css" > onload="this.rel='stylesheet'">
preloadに対応しているファイル
W3Cの仕様ではCSS,JSと並んで以下のようになっている．
<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>:<link rel=preload as=document href=...>
