ブロックなしでスクリプトを読み込みます.
4067 ワード
英語の原文の住所【翻訳：
基調ネットワーク
性能分析エンジニアzhenzh】
ますます多くのウェブサイトが「Web 2.0」のアプリケーションに関連するにつれて、JavaScriptスクリプトの数も急激に増加しています.これは心配されています.シナリオがページの性能に悪影響を与えるからです.主流のブラウザ(例えばIE 6、7)は次の2つの方法でブロックされます.リソースがスクリプトの下にあると、彼らはブロックされてダウンロードされます. 要素がスクリプトの下にあると、ブロックされてレンダリングされます.
このスクリプトブロックのダウンロード例（Scrippts Block Downloads example）は、上記の状況を示しています.2つの外部スクリプトを含み、後は1つのピクチャ、1つのパターンテーブル、および1つのiframeです.IE 7を用いてこの例をロードしたHTTP滝図は、最初のシナリオがすべてのダウンロードをブロックし、その後、2つのスクリプトがすべてのダウンロードをブロックし、最後のピクチャスタイルテーブルとiframeが並行してロードされます.ページのレンダリング状況を観察します.台本の上の文字はすぐにレンダリングされます.しかし、HTMLドキュメントの他の部分のテキストはすべてのスクリプトがダウンロードされるまでブロックされます.
IE 6 7では、Firefox 2 3.0、Safari 3、Chrome 1、Operaダウンロードと実行javascriptは全部シングルスレッドです.
ブラウザが単一スレッドの場合、スクリプトが実行されている場合は、ブラウザが他のリソースをダウンロードできないことは理解できますが、スクリプトがダウンロードされている場合はブラウザが他のリソースをダウンロードできないという理由はありません.スクリプトをダウンロードしながら、他のリソースを並行してダウンロードすることは、最新のブラウザの機能であり、Internet Explorer 8、Safari 4、Chrome 2を含みます.IE 8でスクリプトブロックのダウンロード例（Scrippts Block Downloads example）のHTTP滝図を開いてスクリプトが並列にダウンロードされていることを示しています.スタイルシートも並行しておりますが、画像とiframeは依然としてブロックされています.(中間の空き部分はjavascriptの運行時間で、4秒ぐらいです.)Safari 4とChrome 2の行為も似ています.並列ダウンロードは一部改善されましたが、まだ達成できる最高の効果がありません.
IE 8,Safari 4,Chrome 2のダウンロードは並行していますが、動作は依然としてブロックされています.
幸いにも、より古いブラウザでも、スクリプトが他のページのリソースをブロックしないようにする方法があります.残念なことに、これはウェブ開発者がこれらの重い仕事を引き受けるかどうかにかかっています.
次の6つの非ブロッキングシナリオの技術があります. XHR Eval-XHRでスクリプトをダウンロードして XHR Injection-スクリプトをXHRでダウンロードし、スクリプトのDOM要素を作成してページに注入し、 Script in Iframe-スクリプトをHTMLページに含めてiframeでロードします. Script DOM Element-scriptのDOM要素を作成し、 に設定します. Script Defer-スクリプトを追加する document.write Script Tag-HTMLページ内で Cuzi llionでは、各技術のサンプルを見ることができます.これらの技術は重要な違いがあることを証明しています.それらは大部分並列ダウンロードを提供しています.ドメイン名をまたぐスクリプトには使えない技術もあります.既存のスクリプトに基づいて簡単に変更しなければならないものもあります.また、広く議論されていないブラウザのフリーダイヤルの表示の違いをトリガするものもあります.(ステータスバー、プログレスバー、ラベルアイコン、カーソル)、複数の相互依存スクリプトをロードするには、実行順序を維持する技術が必要です.
技術名
並列ダウンロードに対応
ドメイン名にまたがるサポート
スクリプトを変更する必要はありません
繁忙指示がありますか?
実行順序を保障する
サイズ(バイト)
XHR Eval
IE,FF,Saf,Chr,Op
no
no
Saf、Chr
を選択します.
～500
XHR Injection
IE,FF,Saf,Chr,Op
no
yes
Saf、Chr
を選択します.
～500
Script in Iframe e
IE,FF,Saf,Chr,Op
no
no
IE,FF,Saf,Chr
を選択します.
~50
Script DOM Element
IE,FF,Saf,Chr,Op
yes
yes
FF,Saf,Chr
FF,Op
～200
Script Defer
IE,Saf 4,Chr 2,FF 3.1
yes
yes
IE,FF,Saf,Chr,Op
IE,FF,Saf,Chr,Op
~50
Dcument.write Script Tag
IE,Saf 4,Chr 2,Op
yes
yes
IE,FF,Saf,Chr,Op
IE,FF,Saf,Chr,Op
~100
問題はどれが一番いい技術ですか?最適な技術はあなたの具体的な状況によって決まります.以下の決定ツリーは指導として使えます.複雑に見えるが、実はそうではないです.3つのパラメータだけが出力結果を決定しました.スクリプトはホームページの同じドメイン名の下にありますか?実行順序を保証する必要がありますか?多忙な指示マークをトリガする必要がありますか?
理想的なのは、この政策立案樹のロジックが流行のHTMLテンプレート言語(PHP、Python、Perl、など)に反映されるため、WEB開発者は簡単に関数を呼び出すことができ、シナリオが最適な技術でスクリプトをロードすることが保証されます.
多くの場合、Script DOM Elementを使うのはいい選択です.すべてのブラウザの下で仕事ができます.ドメインをまたぐ制限がなく、コード上で簡単に実現できます.理解されやすいです.唯一足りないのはすべてのブラウザの下で正しい実行順序を維持できるわけではありません.複数のシナリオがあり、相互に依存するなら、彼らを統合したり、他の技術を使う必要があります.ページ内に外部スクリプトに依存する内連結スクリプトがあれば、彼らに対して同期化を実現しなければなりません.この方法を「couplling」と呼び、非同期スクリプトを結合でこのようなことができる方法を提案します.
基調ネットワーク
性能分析エンジニアzhenzh】
ますます多くのウェブサイトが「Web 2.0」のアプリケーションに関連するにつれて、JavaScriptスクリプトの数も急激に増加しています.これは心配されています.シナリオがページの性能に悪影響を与えるからです.主流のブラウザ(例えばIE 6、7)は次の2つの方法でブロックされます.
このスクリプトブロックのダウンロード例（Scrippts Block Downloads example）は、上記の状況を示しています.2つの外部スクリプトを含み、後は1つのピクチャ、1つのパターンテーブル、および1つのiframeです.IE 7を用いてこの例をロードしたHTTP滝図は、最初のシナリオがすべてのダウンロードをブロックし、その後、2つのスクリプトがすべてのダウンロードをブロックし、最後のピクチャスタイルテーブルとiframeが並行してロードされます.ページのレンダリング状況を観察します.台本の上の文字はすぐにレンダリングされます.しかし、HTMLドキュメントの他の部分のテキストはすべてのスクリプトがダウンロードされるまでブロックされます.
IE 6 7では、Firefox 2 3.0、Safari 3、Chrome 1、Operaダウンロードと実行javascriptは全部シングルスレッドです.
ブラウザが単一スレッドの場合、スクリプトが実行されている場合は、ブラウザが他のリソースをダウンロードできないことは理解できますが、スクリプトがダウンロードされている場合はブラウザが他のリソースをダウンロードできないという理由はありません.スクリプトをダウンロードしながら、他のリソースを並行してダウンロードすることは、最新のブラウザの機能であり、Internet Explorer 8、Safari 4、Chrome 2を含みます.IE 8でスクリプトブロックのダウンロード例（Scrippts Block Downloads example）のHTTP滝図を開いてスクリプトが並列にダウンロードされていることを示しています.スタイルシートも並行しておりますが、画像とiframeは依然としてブロックされています.(中間の空き部分はjavascriptの運行時間で、4秒ぐらいです.)Safari 4とChrome 2の行為も似ています.並列ダウンロードは一部改善されましたが、まだ達成できる最高の効果がありません.
IE 8,Safari 4,Chrome 2のダウンロードは並行していますが、動作は依然としてブロックされています.
幸いにも、より古いブラウザでも、スクリプトが他のページのリソースをブロックしないようにする方法があります.残念なことに、これはウェブ開発者がこれらの重い仕事を引き受けるかどうかにかかっています.
次の6つの非ブロッキングシナリオの技術があります.
eval()で実行します.text属性を設定します.src属性をスクリプトのurl defer属性.かつてはIEだけで利用できましたが、Firefox 3.1.の中でもdocument.write <script src="">を使用します.IEのみ有効です.技術名
並列ダウンロードに対応
ドメイン名にまたがるサポート
スクリプトを変更する必要はありません
繁忙指示がありますか?
実行順序を保障する
サイズ(バイト)
XHR Eval
IE,FF,Saf,Chr,Op
no
no
Saf、Chr
を選択します.
～500
XHR Injection
IE,FF,Saf,Chr,Op
no
yes
Saf、Chr
を選択します.
～500
Script in Iframe e
IE,FF,Saf,Chr,Op
no
no
IE,FF,Saf,Chr
を選択します.
~50
Script DOM Element
IE,FF,Saf,Chr,Op
yes
yes
FF,Saf,Chr
FF,Op
～200
Script Defer
IE,Saf 4,Chr 2,FF 3.1
yes
yes
IE,FF,Saf,Chr,Op
IE,FF,Saf,Chr,Op
~50
Dcument.write Script Tag
IE,Saf 4,Chr 2,Op
yes
yes
IE,FF,Saf,Chr,Op
IE,FF,Saf,Chr,Op
~100
問題はどれが一番いい技術ですか?最適な技術はあなたの具体的な状況によって決まります.以下の決定ツリーは指導として使えます.複雑に見えるが、実はそうではないです.3つのパラメータだけが出力結果を決定しました.スクリプトはホームページの同じドメイン名の下にありますか?実行順序を保証する必要がありますか?多忙な指示マークをトリガする必要がありますか?
理想的なのは、この政策立案樹のロジックが流行のHTMLテンプレート言語(PHP、Python、Perl、など)に反映されるため、WEB開発者は簡単に関数を呼び出すことができ、シナリオが最適な技術でスクリプトをロードすることが保証されます.
多くの場合、Script DOM Elementを使うのはいい選択です.すべてのブラウザの下で仕事ができます.ドメインをまたぐ制限がなく、コード上で簡単に実現できます.理解されやすいです.唯一足りないのはすべてのブラウザの下で正しい実行順序を維持できるわけではありません.複数のシナリオがあり、相互に依存するなら、彼らを統合したり、他の技術を使う必要があります.ページ内に外部スクリプトに依存する内連結スクリプトがあれば、彼らに対して同期化を実現しなければなりません.この方法を「couplling」と呼び、非同期スクリプトを結合でこのようなことができる方法を提案します.