web-dev-qa-db-ja.com

JavaScript：DOMロードイベント、実行シーケンス、および$（document）.ready（）

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

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

_<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が実行されますか？ ）？スクリプトが順番にロードされることを知っています。

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

  3. 「DOMがロードされたとき」とはどういう意味ですか？すべてのHTML/JSがブラウザによってダウンロードおよび解析されたということですか？それともHTMLだけですか？

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

いつ何が何に依存するのか（もしあれば）の全体像を理解したい。

javascriptjqueryeventsdom
60
montrealist

Javascriptは表示されているとおりに実行されます。 通常、ブラウザは<script>タグを検出するとすぐにページの解析を停止し、スクリプトをダウンロードして実行し、その後続行します。これが、<script>タグを一番下に配置することが一般的に推奨される理由です。ブラウザがスクリプトのダウンロードを待機している間、ユーザーには空白ページがありません。

ただし、Firefox 3.5以降、スクリプトはバックグラウンドでダウンロードされ、残りのページはレンダリングされます。スクリプトがdocument.writeなどを使用する今では珍しいイベントでは、Firefoxは必要に応じてバックアップおよび再描画します。現時点では他のブラウザがこれを行うとは思わないが、それが近づいていても驚かないだろう、そしてIEは少なくとも<script>タグのdefer属性をサポートするページがロードされるまでスクリプトのロードを延期します。

DOMContentLoadedはまさにそれです：DOMがロードされるとすぐに起動します。つまり、ブラウザーがすべてのHTMLを解析し、内部でそのツリーを作成するとすぐに。画像、CSSなどの読み込みを待機しません。 DOMは、通常、必要なJavascriptを実行するために必要なすべてであるため、他のリソースを待つ必要がないのは素晴らしいことです。ただし、FirefoxのみがDOMContentLoadedをサポートしていると思います。他のブラウザでは、ready()は通常の古いonloadにイベントを添付するだけです。

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

37
Eevee
  1. 含まれているすべてのスクリプトは、HTMLに表示されるために発生し、HTMLの解析時に読み込まれます。
  2. これは、すべてのdomオブジェクトがロードされ、すべてにスクリプトとcssが含まれることを意味します。 （画像はまだないかもしれません）。
  3. 2.をご覧ください。
  4. $（document）.ready（）は、すべてのスクリプトとdomオブジェクトが読み込まれた後にのみ呼び出しを取得します。大丈夫です。
7
Zoidberg

http://javascript.about.com/od/hintsandtips/a/exeorder.htm はその答えに役立つはずです

基本的に：最初にすべてのデータ（html）がロードされ、次にjsは、関数またはレディにないhead/body内のコード、またはそのようなものが最初に実行されます。そこから順番にスクリプトについて説明します

jsはieよりも優先されることに注意してください。 CSSの読み込み-パフォーマンスの観点から、ページの下部にjsが必要です。

だから@ 4：first.jsは常にlast.jsの前に読み取り/実行されるため、そのシナリオを防ぐ必要はありません

4
Niko