web-dev-qa-db-ja.com

link rel = "preload"はどのように機能しますか？

Chromeの新しいバージョンで<link rel="preload">のサポートが追加されました。彼らは、元のドキュメントへの参照を含む多くの情報を投稿しました。誰かがそれがどのように機能するか、rel="preload"がない場合と比較した場合の違いについて簡単な説明を提供できますか？.

csshtmlbrowserpreloading
18
Ilya Chernomordik

最も基本的な形式では、rel="preload"のあるlinkを高い優先度に設定します。プリフェッチとは異なり、ブラウザーはそれが適切かどうかを判断できますが、プリロードは強制的にブラウザーに強制します。

===より詳細な外観：===

これはW3cからの抜粋です

多くのアプリケーションでは、リソースをフェッチ、処理、およびドキュメントに適用するタイミングをきめ細かく制御する必要があります。たとえば、一部のリソースのロードと処理は、リソースの競合を減らし、初期ロードのパフォーマンスを向上させるために、アプリケーションによって遅延される場合があります。この動作は通常、リソースフェッチをアプリケーションで定義されたカスタムリソースロードロジックに移動することで実現されます。つまり、リソースフェッチは、特定のアプリケーション条件が満たされたときに、注入された要素またはXMLHttpRequestを介して開始されます。

ただし、一部のリソースをできるだけ早くフェッチする必要がある場合もありますが、それらの処理および実行ロジックは、アプリケーション固有の要件（例：依存関係の管理、条件付き読み込み、順序付けの保証など。現在、パフォーマンスを低下させることなくこの動作を実現することはできません。

既存の要素（img、script、linkなど）のいずれかを介してリソースを宣言すると、リソースのフェッチと実行が連動します。一方、アプリケーションはフェッチしたい場合がありますが、条件が満たされるまでリソースの実行を遅らせます。上記の動作を回避するためにXMLHttpRequestでリソースをフェッチすると、ユーザーエージェントのDOMおよびプリロードパーサーからリソース宣言が非表示になるため、パフォーマンスが大幅に低下します。リソースのフェッチは、関連するJavaScriptが実行されたときにのみディスパッチされます。これは、ほとんどのページに大量のブロッキングスクリプトがあるため、大幅な遅延が発生し、アプリケーションのパフォーマンスに影響します。 link要素のpreloadキーワードは、早期フェッチを開始してリソースの実行からフェッチを分離する上記のユースケースに対処する宣言型フェッチプリミティブを提供します。そのため、preloadキーワードは低レベルのプリミティブとして機能し、アプリケーションがユーザーエージェントからリソースを隠さずにリソースのフェッチとペナルティの遅延を招くことなく、カスタムリソースのロードと実行の動作を構築できるようにします。

たとえば、アプリケーションはpreloadキーワードを使用して、CSSリソースの早期、高優先度、非レンダリングブロッキングのフェッチを開始し、適切なときにアプリケーションで適用できます。

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="/styles/other.css" as="style">
<!-- or, preload stylesheet resource via JavaScript -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>

W3cの詳細は次のとおりです。 https://w3c.github.io/preload/

ただし、使用する予定がある場合は、ブラウザのサポートがそれほど優れていないことに注意してください。グローバルブラウザのサポートは82％です。

これが完全なリストです： http://caniuse.com/#search=preload

12
Sonny Prince

Google Developers CSSOMの準備ができたときにフォントを使用可能にするために、フォントを以前に要求するために使用するrel="preload"を提案します。

フォントの遅延読み込みには、テキストのレンダリングを遅延させる可能性のある重要な隠された影響があります。ブラウザは、テキストをレンダリングするために必要なフォントリソースを認識する前に、DOMおよびCSSOMツリーに依存するレンダーツリーを構築する必要があります。その結果、他の重要なリソースよりもフォントリクエストが大幅に遅延し、リソースがフェッチされるまでブラウザがテキストのレンダリングをブロックされる場合があります。

使用：

<link rel="preload" href="/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="/styles.min.css">

また、注意：

すべてのブラウザが<link rel="preload">をサポートしているわけではなく、それらのブラウザでは無視されるだけです。しかし、プリロードをサポートするすべてのブラウザはWOFF2もサポートしているため、常にプリロードする必要のある形式です。

2
Zanon