実行のタイミング : JavaScript

Pocket

JavaScriptの実行タイミングのメモ。

  • 原則上から逐次実行。
  • 外部ファイルは読み込んだ時点で解析(実行するコードは実行)。
  • jQuery(function($) {});はDOMが構築された時点で実行。
  • DOMContentLoadedはDOMが構築された時点で実行。jQuery(function($) {})よりは遅い(?)
  • onloadはDOMが構築されかつ画像ファイル等もすべて読み込んだ時点で実行。
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>execution sample</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="example.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('4: DOMContentLoaded');
        });
        jQuery(function($) {
               console.log('3: jQuery(function($){})');
       });
       console.log('1: head script tag');
    </script>
</head>
<body onload="console.log('5 : write to onload');">
    <div id="loadingtext"></div>
    <div id="content">
        <p><img src="http://www.example.com/example.png"></p>
        <p>Example</p>
    </div>
    <script>
        console.log('2: body end');
    </script>
</body>
</html>

外部JavaScriptファイルexample.js。

console.log('0: external file');

パーフェクトJavaScript (PERFECT SERIES 4)

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数