2011-01-29 4 views
2

彼の著書「ハイパフォーマンスWebサイトの」からスティーブ・ソーダーズから、ブロッキングのJavaScriptの例があります:http://stevesouders.com/hpws/js-blocking.phpJavascriptファイルのランダムブロック?

ジャバスクリプトはもうダウンロードをブロックするが、それでもブロックのレンダリングを行いません。

..しかし、奇妙なダウンロードアクティビティがあります:

5つの並列ダウンロード(最大6は、同じサーバ/ホストからのFirefox 3またはIE 8が可能である)

  • 4画像は(ありますHOST2からHOST1、2)また、ページ内の5番目の画像がある

間で
  • 1ジャバスクリプトが、この第5の画像のロードが、並列にoccureない、Bから2 Javascriptの読み込みが終了した後でなければなりません。

    なぜ、その画像は他のコンポーネントと並行して読み込まれませんか?他の4つの画像はどうしますか?

    FirebugのNetパネルを使用している場合は、私は何を意味するか分かります!

  • 答えて

    1

    カーソルがHTMLドキュメントを上から下に移動するとします。 カーソルがある各要素で、要素/画像を解決します。 イメージが検出されると、イメージのロードが開始され、カーソルがオンになり、レンダラーが続行するためにイメージをロードする必要はありません。

    カーソルがスクリプトタグにヒットしたら、最初にそのスクリプトをロードしてから、次の要素に進む前にスクリプトを実行します。基本的には、スクリプトタグを高い優先度に保ち、スクリプトが完全に解決されたときにのみ進めます。ロード、評価、実行。

    スクリプトタグの後に来るすべてのHTML(画像など)は保持されます。

    これはJSブロッキングを意味し、プレーンHTMLを使用してスクリプトが挿入されたときに発生します。

    これは、JavaScriptを使用してスクリプトを挿入することで回避できます.HTML要素を作成してDOMに追加しても、別のプロセスが完全にHTMLのレンダリングカーソルを中断しないからです。

    +0

    okですが、スクリプトタグの後のHTMLですが、この例では2つの画像は既に読み込まれていますがレンダリングされていませんか?他方の画像は最後にロードされる。 Javascriptは読み込みをブロックし、読み込みをブロックしません(時には)。 –

    +0

    おそらくブラウザに依存しますが、ほとんどの(古い?)ブラウザでスクリプトが完了するまでは、スクリプトタグがダウンロードされていないと仮定できます。しかし、はい、レンダリングは、スクリプトがロードされて終了するまで、少なくともその部分は一貫しています。 – BGerrissen

    0

    答えはありません。質問を説明するスクリーンショットです:なぜ、最後の画像のダウンロードは、JavaScriptのダウンロードが停止した後にのみ開始されますか?

    screenshot of firebug

    、ここで可能な答え:私は例on my server(すべての画像およびJavaScriptのまだsoudersのサーバー上)のHTMLを入れた後、放火犯を見て:今私は、伝統的なブロッキング動作を参照してください。

    enter image description here

    最初のjavascript(util.js)をロードすると、次のすべての画像の読み込みがブロックされ、2番目のjavascriptを読み込むと(遅い)、それ以降のすべての画像の読み込みがブロックされます。

    多分、HTMLと同じサーバー上のスクリプトを持つことは、ブラウザによって扱われる特殊なケースです。

    関連する問題