javascriptの実行順序

Javascript

知っている人にとっては当たり前すぎることだと思いますが、私自身整理できていなかったのでちょっとまとめる。
次のようなhtmlがあった場合、画面の表示およびjavascriptのアラートの表示のタイミングはどうなるだろうか。
ちなみに$(function(){alert('$関数中');});はjQueryの関数で、DOMのロードが終わったタイミングで呼び出される。

<html>
<head>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript">

$(function(){alert('■$関数中');});
alert('■javascriptタグ中1');
window.onload = function(){alert('■window onload');};

</script>
</head>
<body onload="alert('■body onload');">
  <p>hello!</p>

<script type="text/javascript">
  alert('■javascriptタグ中2');
</script>

  <p>world!</p>

  <img src="sample.png">
</body>

<script type="text/javascript">
  alert('■javascriptタグ中3');
</script>

</html>

正解は以下のようになる。firefoxで動作確認。

  1. 「■javascriptタグ中1」表示
  2. 画面に「hello!」と表示
  3. 「■javascriptタグ中2」表示
  4. 画面に「world!」と画像が表示（ただし画像といっても実際の画像はまだ表示されていない。枠だけ）
  5. 「■javascriptタグ中3」表示
  6. 「■$関数中」表示
  7. 画面に実際の画像表示
  8. 「■body onload」表示

ポイントは、画像が遅れて表示されるところと、window.onloadとbodyのonloadの両方定義しておくとbodyのonloadが勝つといったところでしょうか。ちなみに画像ですが、2回目以降はキャッシュされるので、world!が表示されたタイミングで表示されています。
この辺のタイミングを知ってないと、javascriptでDOM操作するときに、あれ？取れない！ってことになったりするので。