ホームページ >ウェブフロントエンド >htmlチュートリアル >プリロード技術を使用して Web ページの読み込み速度を向上させるにはどうすればよいですか? _html/css_WEB-ITnose
プリロード技術を使用して Web ページの読み込み速度を向上させるにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:231610ブラウズ
プリローダー(Pre-loader)はブラウザのパフォーマンスを向上させるための最も重要な対策と言えます。 Mozillaは、Alexaがランキングした上位2,000のWebサイトをChromeでテストしたところ、プリローダー技術によりWebページの読み込みパフォーマンスが19％向上し、パフォーマンスが20％向上したというデータを正式に発表した。
これは新しい技術ではなく、Chrome だけがこの機能を備えていると考えている人もいます。ブラウザのパフォーマンスをこれまでに向上させる最も効果的な方法だと考える人もいます。初めてプリローダーに触れる場合は、数え切れないほどの疑問が頭に浮かぶかもしれません。プリローダーとは何ですか?ブラウザのパフォーマンスはどのように向上しますか?
まず、ブラウザが Web ページを読み込む方法を理解する必要があります
Web ページの読み込みは、スクリプト ファイルと CSS スタイル ファイルに依存します。ブラウザに Web ページを読み込むプロセスを見てみましょう。
ブラウザは複数のリクエストを並行して実行できますが、スクリプトファイルの操作と並行して実行することはできません。
テスト用にIE7でリンク先のWebページを開くことができます。 Web ページの head タグには 2 つのスタイル ファイルと 2 つのスクリプト ファイルが含まれていることがわかります。本体には3枚の画像と1つのスクリプトファイルが含まれています。
ウォーターフォール フローを通じて、リソースの読み込みプロセスを表示できます:
スクリプト ファイルのダウンロードと実行は、他のリソース ファイルのダウンロードをブロックし、間違いなくブラウザのパフォーマンスを大幅に低下させます。
プリローダーがネットワーク使用率を改善する方法
2008年、IE、WebKit、Mozillaはすべて、ネットワーク使用率を改善し、他のリソースファイル上のスクリプトファイルのブロック状態を改善するために、プリローダー機能を実装しました。
ブラウザがスクリプト ファイルによってブロックされると、別の軽量パーサーが残りのタグの参照を継続し、ダウンロードする必要があるリソース、つまりスタイル ファイル、スクリプト ファイル、画像などを探します。
検出されると、プリローダーはバックグラウンドでこれらのリソースの受信を開始し、メイン パーサーが現在のスクリプト操作を完了するのを待つことができるため、スクリプトのブロックによるパフォーマンスの低下が軽減されます。
次のウォーターフォール フローは、IE8 を使用してリンク内の Web ページを開いた結果です: IE8=7S > IE7=14S。
プリロード機能はまだ実験の領域であり、主要なブラウザ メーカーが喜んで実験しています。多くのブラウザは、リソースのダウンロードを優先しようとします。たとえば、Safari は、現在の表示領域に適用されないスタイル ファイルの優先順位を下げます。 Chrome は、スクリプト ファイルが HTML の下部にある場合でも、画像よりもスクリプト ファイルの優先順位を設定します。
プリローダーの罠
プリローダーは HTML タグ内の URL のみを取得でき、スクリプト コードを使用して追加された URL を検出できません。そのようなリソースは、スクリプト コードが実行されるまで取得できません。
かつて、JavaScript を使用して現在のウィンドウの幅を決定し、CSS スタイル ファイルをロードする例に遭遇しました。プリローダーはそのようなリソースを認識しません。
1
2
3
4
5
6
7
8
9
1011
12
13
14
15
16