link rel='preload' を使ってリソースの優先順位を付ける

Jeff Posnick

ブラウザに対して重要なフォント、スクリプト、 そのページで必要な他のリソースにすばやくアクセスできます。 onload 件の予定はありますか？<link rel="preload"> により、ウェブ デベロッパーは いくつかの重要な属性を持つ、使い慣れた HTML 要素の構文を使用して、 決定します。Google 配送サービスの一部として配送する Chrome 50 リリース。

<link rel="preload"> を介して読み込まれたリソースは、ブラウザにローカルに保存されます。 実質的には、DOM、JavaScript、または CSS。たとえば、次の例は、スクリプト ファイルがファイルの内容に プリロードされますが、すぐには実行されず、 <script> タグを介して DOM に追加されます。

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

ここでは何が起こっているのでしょうかこの例で使用されている href 属性は、 これはウェブ デベロッパーにとっては、 URL を返します。

as 属性は次のとおりです。 おそらく初めてで、<link> 要素のコンテキストで使用されます ブラウザが警告を出して、 宛先 プリロード リクエスト中。この追加情報により 適切なリクエスト ヘッダー、リクエストの優先順位、 関連するコンテンツ セキュリティ ポリシー 適切なリソース コンテキストに配置されている可能性のあるディレクティブの参照。

もっと学ぶ

Yoav Weiss の記述 決定ガイド <link rel="preload"> を使用します。興味があり、使用を開始したい場合 詳しく知りたい場合は、彼の記事をお読みになり、 クリエイティブのユースケースを紹介しました。

<link rel="preload"> は <link rel="subresource"> よりも優先されます。 重大なバグとデメリット これは Chrome 以外のブラウザには実装されませんでした。そのため Chrome 50 サポートがなくなり、 <link rel="subresource">。