HTML5 リンクのプリフェッチを使用して web サイトを高速化する_html5 チュートリアルのヒント

HTML5 のリンクのプリフェッチは砂に埋もれた宝石であり、その価値を知っている人はまだほとんどいません。 古くから有名な画像のプリロード機能はすでにご存知かもしれませんが、リンクのプリフェッチ機能は、この概念を画像から Web コンテンツに拡張します (AJAX コードなし)。
仕組みは次のとおりです: 次のようにページにリンクを追加します:

コードをコピーします

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

このように、マシンがアイドル状態のとき、ブラウザはバックグラウンドで自動的に page2.html をダウンロードします。 ユーザーが最終的に page2.html へのリンクをクリックすると、ブラウザはキャッシュからページをフェッチするため、ページは予想外に速く読み込まれます。
現在、この機能をサポートしているのは Firefox のみです。しかし、Firefox は現在、世界で 2 番目に大きなユーザー ベースを持つブラウザであるため、このようなコード行を HTML ページに追加する限り、かなりの数の訪問者がこの明らかなページの読み込み速度を体験できるでしょう。 。 改善する。なんてクールなんでしょう！

リンクの先読み機能はさまざまな場面で利用できます :
* 長い記事やオンラインチュートリアル、アルバムなどがある場合は、分割する必要があります複数のページを表示している場合。
* ユーザーがホームページ上でアクセスする可能性が最も高い次のページをプリロードします。 (製品 Web サイトの「強くお勧めする」製品ページ、またはブログ Web サイトの最近のブログである可能性があります)
* 検索クエリ ページには、検索された最初のいくつかのアイテムがプリロードされます。
静的コンテンツの場合、rel タグを使用してプリフェッチ機能を実装することもできます。

コードをコピー

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

他にもいくつかあります。ここで注目すべき興味深い点:
* リンクのプリフェッチは、Opera、Chrome、Safari ブラウザーには間もなく実装される予定ですが、Internet Explorer については、2020 年まで待たなければならない可能性があります。
* この機能が広範囲に使用されると、Web サイトのログとアクセス統計に影響を与えます。ページの 1 つが複数のページをプリフェッチしているが、ユーザーが実際にはこれらのページにアクセスしていない状況を考えてください。 サーバー (または統計ツール) は 2 つの違いを認識しません。
これを区別するために、Firefox は HTTP ヘッダーで X-moz: prefetch メッセージを送信しますが、このメッセージを認識するにはサーバー側に何かが必要です。