2009-08-20 12 views
55

ページがブラウザに読み込まれるときに、正確に何が起こるかについての基本的な知識が不足していることがわかりました。

は、私がこのような構造を持っていると仮定します。ここでは

<head> 

<script src="jquery.js" type="text/javascript"></script> 
<script src="first.js" type="text/javascript"></script> 
</head> 
<body> 
... 
<script type="text/javascript" id="middle"> 
    // some more JS here... 
</script> 
... 
<script src="last.js" type="text/javascript"></script> 
</body> 

は、私が持っている質問は以下のとおりです。

  1. で何が起こって物事は何のシーケンスですか?最初にDOMを実行してからJSを実行します。逆の場合、または同時に実行する場合(またはJSファイルのダウンロードが完了したらすぐに、DOMを意識することなく)終了しますか?私はスクリプトが順番に読み込まれることを知っています。

  2. $(document).ready()はどこに入りますか? FirebugのNetタブでは、DOMContentLoadedイベントとloadイベントが表示されます。 DOMContentLoadedイベントが発生したときに$(document).ready()がトリガーされますか?これについて具体的な情報を見つけることができませんでした(誰もが「DOMがロードされたとき」と言います)。

  3. 「DOMがロードされている」とはどういう意味ですか?すべてのHTML/JSがブラウザによってダウンロードされ、解析されていることを確認しますか?それともHTMLだけ?

  4. 次のシナリオが可能です:last.jsにコードを呼び出しますが、last.jsがロードされる前に実行されている$(document).ready()がありますか?どこが最も可能性が高いでしょうか(first.jsまたはインラインコードブロック)? このシナリオを防止するにはどうすればよいですか?

私は、いつ、どのような(すべての場合)かに依存し、何が起こるかの全体像をundestandしたいです。

答えて

36

Javascriptを前に実行/読み込まれているので、そのscenarionを防ぐために必要ないけないが実行されます。通常は、ブラウザはそれが<script>タグ、ダウンロードを見て、スクリプトを実行するとすぐにページを解析停止し、その後、いっています。このため、通常、<script>タグを下部に配置することをお勧めします。ブラウザがスクリプトのダウンロードを待っている間に、ユーザーに空白のページが表示されないようにします。ページの残りの部分がレンダリングされている間

しかし、Firefoxの3.5から始めて、スクリプトをバックグラウンドでダウンロードされています。スクリプトがdocument.writeまたは類似のものを使用する今の異常なイベントでは、Firefoxは必要に応じてバックアップして再描画します。私は他のブラウザは、現時点でこれを行うとは思わないが、それは今後のだったら、私は驚かないだろう、とIEは、少なくとも、ページがロードされた後まで、スクリプトのロードを延期します<script>タグでdefer属性をサポートしています。

DOMContentLoadedはまさにそれである:それはすぐにDOMがロードされると発生します。つまり、ブラウザがすべてのHTMLを解析して内部的にツリーを作成するとすぐに、イメージやCSSなどが読み込まれるのを待つことはありません。 DOMは、必要なJavascriptを実行するために通常必要なものなので、他のリソースを待つ必要はありません。しかし、私はFirefoxがDOMContentLoadedをサポートしていると信じています。他のブラウザではready()はイベントを通常の古いonloadにアタッチします。

Javascriptがこれだけあなたがイベントにアタッチしようとする前に、あなたの関数が定義されていることを確認し、それはあなたのHTMLに表示される順序で実行することが保証されています。

+0

非常に興味深い。将来を見据えてくれてありがとう! – montrealist

+0

実際、スクリプトを最下部に置くと、ページが読み込まれる前にスクリプトを実行する必要があります。それらを非同期的にロードするほうがはるかに優れています。つまり、ブラウザを上に置いても、ブラウザはページの解析とスクリプトの並列読み込みを続けます。唯一の問題は、あなたがもうスクリプトの実行順序を知っていないことです。 – Jens

+0

私はスクリプトで(開発ツールからエミュレート)IE9でaspxページをテストしたがの終わりにの先頭から移動され、スクリプトが頭の中にいたときより速くするロード時間を見つけました。ユーザーエクスペリエンスを測定するための読み込み動画を記録しました。明白な勝者は私にはない – mishal153

6
  1. すべてのスクリプトは、htmlに表示されるように、htmlが解析されるとロードされます。
  2. これは、すべてのDOMオブジェクトがロードされ、すべてがスクリプトとCSSを含むことを意味します。 (画像はまだないかもしれない)。
  3. を参照してください。2.
  4. $(document).ready()はすべてのスクリプトとDOMオブジェクトがロードされてから呼び出されます。
4

http://javascript.about.com/od/hintsandtips/a/exeorder.htmあなたが答える必要があります

基本的に: 最初のすべてのデータがロードされている(HTML)、その後、JS 機能していないヘッド/ボディ内のコードまたは準備完了かそのようなものが最初に実行されます。そこから順番にスクリプトについて行きます。

jsがieより優先されることに注意することが重要です。 CSSの読み込み - パフォーマンスの観点からフォームを作成すると、ページの下部にjsが表示されます。 4 @そう

:それが見られるように、あなたがfirst.jsが常にlast.js

関連する問題