HTML5 リソースのプリロード (リンクプリフェッチ) の詳細な紹介-htmlチュートリアル-php.cn

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

不言

リリース： 2018-05-05 14:25:03

オリジナル

1883 人が閲覧しました

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

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

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

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

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

HTML5ページリソースのプリロード(リンクプリフェッチ)の書き方

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

<!-- 预加载整个页面 -->
<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 ページをプリロード/先読みします。

2. ウェブサイト全体に共通の画像をプリロードします。

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

ページリソースのプリロード (リンクプリフェッチ) を無効にする

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

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

2. ページリソースのプリロード (リンクプリフェッチ) に関する注意事項

以下は、ページリソースのプリロード (リンクプリフェッチ) に関するいくつかの注意事項です: