はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > HTML > link要素でpreloadを使って非同期にファイルを読み込む

link要素でpreloadを使って非同期にファイルを読み込む

HTML CSS JavaScript

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

preloadの対応環境(CanIUse)

resource hint

preloadのように非同期に読み込み処理などをしておくといったことは，以前からあったようで，resource hint と呼ばれている．

日本語の記事では以下がまとまっていてわかりやすい．

blog.kazu69.net

従来の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を書くことで再現できる． 以下の記事のコードを引用する．

www.smashingmagazine.com

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