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

情報・Web系技術・Englishの勉強メモ・備忘録です。

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

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

広告を非表示にする