HTML5 のプリロードにより、ページをすばやくレンダリングできます_html5 チュートリアルのヒント

ブラウザのメーカーと開発者が協力して取り組む方向性の 1 つは、Web サイトを高速化することです。 CSS スプライト (CSS スプライト、パズル) と画像の最適化、分散設定ファイル (.htaccess)、JS/テキスト ファイル圧縮、CDN アクセラレーションなど、よく知られたアクセラレーション ソリューションが多数あります。

ウェブサイトを高速化する方法を別のブログ投稿で紹介しました。
FireFox は、リンクのプリロードという新しい Web サイト高速化戦略を導入しました。リンクのプリロードとは何ですか? MDN では、これについて次のように説明しています。

プリロードは、ブラウザのアイドル時間を利用して、ユーザーが次に閲覧する可能性が高いページ/リソースを事前にダウンロード/ロードするブラウザ メカニズムです。このページは、プリロードする必要があるコレクションをブラウザーに提供します。ブラウザは現在のページの読み込みを完了すると、プリロードする必要があるページをバックグラウンドでダウンロードし、キャッシュに追加します。ユーザーがプリロードされたリンクにアクセスするときに、そのリンクがキャッシュからヒットした場合、ページはすぐに表示されます。

簡単な概要: ユーザー分析に基づいて、Web サイトはブラウザーがバックグラウンドで指定されたページ/ドキュメント/画像をダウンロードできるようにします。実装は非常に簡単です:

HTML5 プリロード タグ。

コードをコピーします

コードは次のとおりです:

<-- 画像、またはその他のタイプのパスを使用できます。 files-->

上記の HTML コードからわかるように、プリロードでは タグで rel="prefetch" 属性を指定し、href 属性はプリロードする必要があるファイル パスです。 Mozilla も同様のリンク rel 属性をいくつか実装しています:

コードをコピーします

コードは次のとおりです:

注: https プロトコルもサポートされています。

いつプリロードするか
Web サイトでプリロードを使用するかどうかは、ニーズによって異なります。以下にいくつかの提案があります:
- 一連のページ スライドが同じように表示される場合、次のようになります。前後 1 ～ 3 ページをプリロードできます
- Web サイト内の共通画像をロードします
- 検索結果ページの次のページをプリロードします

プリロードをブロックします
Firefox ではプリロード モードを無効にすることができます。コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

user_pref("network.prefetch-next", false);

注意事項
リンクのプリロードに関しては、次の注意事項があります。 🎜> - プリロードはドメイン間で実行できます。もちろん、リクエスト時に Cookie やその他の情報も送信されます。
- ユーザーが実際にアクセスしなくても、プリロードにより Web サイトの統計が破損する可能性があります。
- Mozilla Firefox は現在プリロード モードをサポートする唯一のブラウザです (2003 ～ 2010)
どう思いますか?アイドル時間を利用して追加ファイルをダウンロードすることは抜本的な最適化です