HTML5 のプリロードによりページのレンダリングが高速化されます

プリロードは、ブラウザーのアイドル時間を利用して、ユーザーが次に閲覧する可能性のあるページ/リソースを事前にダウンロード/ロードするブラウザーのメカニズムであり、ユーザーがプリロードされたリンクにアクセスしたときに、そのリンクがキャッシュからヒットした場合、そのページがレンダリングされます。素早く ブラウザのメーカーと開発者が協力して取り組む方向性の 1 つは、Web サイトを高速化することです。 CSS スプライト (CSS スプライト、パズル) と画像の最適化、分散設定ファイル (.htaccess)、JS/テキスト ファイル圧縮、CDN アクセラレーションなど、よく知られたアクセラレーション ソリューションが多数あります。

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

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

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

HTML5 プリロード タグ

コードをコピーします。

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

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

コードをコピーします

コードは次のとおりです: 注: https プロトコルもサポートされています。

いつプリロードするか

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

- 検索結果ページの次のページをプリロードします

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



コードをコピーします

は次のとおりです:

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

注意事項

リンクのプリロードに関しては、次の注意事項があります:

- もちろん、プリロードはドメイン間で実行できます。リクエスト時にはCookieが必要です。その他の情報も送信されます。

- ユーザーが実際にアクセスしなくても、プリロードによりウェブサイトの統計が破損する可能性があります。
- Mozilla Firefox は現在、プリロード モードをサポートする唯一のブラウザです (2003 ～ 2010)
どう思いますか?空き時間を利用して追加ファイルをダウンロードすると、根本的な最適化になります

さらに HTML5 のプリロードを行うと、ページをすばやくレンダリングできます。関連記事については、PHP 中国語 Web サイトに注目してください。