ホームページ > 記事 > ウェブフロントエンド > プリロード技術を使用して Web ページの読み込み速度を向上させるにはどうすればよいですか? _html/css_WEB-ITnose

プリロード技術を使用して Web ページの読み込み速度を向上させるにはどうすればよいですか? _html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:28:231570ブラウズ

プリローダー(Pre-loader)はブラウザのパフォーマンスを向上させるための最も重要な対策と言えます。 Mozillaは、Alexaがランキングした上位2,000のWebサイトをChromeでテストしたところ、プリローダー技術によりWebページの読み込みパフォーマンスが19％向上し、パフォーマンスが20％向上したというデータを正式に発表した。

これは新しい技術ではなく、Chrome だけがこの機能を備えていると考えている人もいます。ブラウザのパフォーマンスをこれまでに向上させる最も効果的な方法だと考える人もいます。初めてプリローダーに触れる場合は、数え切れないほどの疑問が頭に浮かぶかもしれません。プリローダーとは何ですか?ブラウザのパフォーマンスはどのように向上しますか?

まず、ブラウザが Web ページを読み込む方法を理解する必要があります

Web ページの読み込みは、スクリプトファイルと CSS スタイルファイルに依存します。ブラウザに Web ページを読み込むプロセスを見てみましょう。

まず、ブラウザは HTML をダウンロードし、解析を開始します。ブラウザは外部 CSS リソースへのリンクを見つけると、ダウンロードリクエストを送信します。

ブラウザは CSS リソースのダウンロード中に HTML ファイルを並行して解析できますが、スクリプトファイルへの参照が見つかった場合は、解析を続行する前にスクリプトファイルのダウンロードと実行が完了するまで待つ必要があります。

スクリプトファイルがダウンロードされて実行された後、ブラウザは非ブロッキングリソースに遭遇した場合、HTML の解析を続行できます。つまり、画像ブラウザはダウンロードリクエストを送信して解析を続行します。

ブラウザは複数のリクエストを並行して実行できますが、スクリプトファイルの操作と並行して実行することはできません。

テスト用に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 スタイルファイルをロードする例に遭遇しました。プリローダーはそのようなリソースを認識しません。