HTML5 リソースのプリロード (リンク プリフェッチ) の詳細な紹介

この記事では主に HTML5 リソースのプリロード (リンク プリフェッチ) の詳細を紹介します。これは、ブラウザー開発者であっても、通常の Web アプリケーションであっても、必要な友人全員と共有できます。開発者は皆、Web ブラウジングをより速く感じられるようにするという共通の取り組みを行っています。 Web サイトを高速化できる既知の手法は数多くあります。CSS スプライトの使用、画像最適化ツールの使用、.htaccess を使用したページ ヘッダー情報とキャッシュ時間の設定、JavaScript 圧縮、CDN の使用などです。

以前紹介しました。このサイトで使用されている最適化テクニック。 HTML5 では、Web サイトの速度を最適化するための新しい機能、ページ リソースのプリロード/プリフェッチ (リンク プリフェッチ) が登場しました。

ページリソースのプリロード/プリフェッチ(リンクプリフェッチ)とは何ですか? MDN からの説明:

ページ リソースのプリロード (リンク プリフェッチ) は、ブラウザーがアイドル時間中に一部のドキュメント リソースをダウンロードまたは事前に読み取ることを可能にするブラウザーによって提供される技術であり、ユーザーは将来これらのリソースにアクセスします。 Web ページでは、ブラウザーに対して一連のプリロード命令を設定できます。ブラウザーは、現在のページのロードを完了すると、指定されたドキュメントをバックグラウンドでサイレントにロードし、キャッシュに保存します。ユーザーがこれらのプリロードされたドキュメントにアクセスすると、ブラウザーはそれらをキャッシュから迅速に取得してユーザーに提供できます。

簡単に言うと、ユーザーが現在のページにアクセスした後にアクセスする可能性が高い他のリソース (ページ、写真、ビデオなど) をブラウザーにプリロードさせます。そしてその方法は超簡単！

コードをコピーコードは以下の通りです:

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.jb51.net/misc/3d-album/" /></p>
<p><!-- 预加载一个图片 -->
<link rel="prefetch" href=" <a href="http://www.jb51.net/wordpress/">http://www.jb51.net/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5ページリソースのプリロード/プリフェッチ(リンクプリフェッチ)機能は、 Linkタグはい。rel属性に「プリフェッチ」を指定し、href属性に読み込むリソースのアドレスを指定します。 Firefox は追加の属性サポートも提供します:

コードをコピーします コードは次のとおりです:

<link rel="prefetch alternate stylesheet" 
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link rel="next" href="2.html" />

プリフェッチは HTTPS プロトコル リソースでも使用できます。

どのような種類のリソースをページにロードするか、いつそれらをロードするかは完全にあなた次第です。いくつかの提案があります:

1. ページにスライドショーのようなサービスがある場合、次の 1 ～ 3 ページと前の 1 ～ 3 ページをプリロード/先読みします。

3. Web サイト上の検索結果の次のページをプリロードします。

Firefox には、ページ リソースのプリロード (リンク プリフェッチ) 機能を無効にするオプションがあります:

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

1. プリロード (リンク プリフェッチ) ) はドメインをまたがって機能することはできません。 、ドメイン間で Cookie を取得することも含まれます。

3. Firefox は 2003 年からこのプリロード (リンク プリフェッチ) テクノロジーをサポートしています。

ブラウザのアイドル時間を利用して追加のリソース ファイルを読み込むのは刺激的で危険なように思えますが、これらのテクニックを試してみませんか?

以上がHTML5 リソースのプリロード (リンク プリフェッチ) の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。