JavaScriptの初期実行方法の歴史

code:html

<script src="script.js"></script>

DOM 構築を待たなければ(少なくとも、DOMに期待する要素が含まれる状態にならなければ)、DOMにアクセスできないためエラーとなる。

そこで、以下の方法が採られた。

load イベントを待つ方法

code:js

window.onload = function() {

document.getElementById("foo").

}

しかし、この方法だとすべてのリソースを読み切るまで実行が遅れるので、様々な方法が考えられた。

IEでの特殊な挙動を利用したドキュメント構築完了判定方法

DOM構築が完了すると、document.documentElement.doScroll('left'); が例外を返さなくなるのでそれで判定する。

code:js

function isDOMContentLoadedForOldIE() {

try {

document.documentElement.doScroll('left');

return true;

}

catch (e) {

return false;

}

}

function onDOMContentLoadedForOldIE(fn) {

if (isDOMContentLoadedForOldIE()) {

fn();

return;

}

// イベントではないため、ポーリングで待つしかない。

setTimeout(function () { onDOMContentLoadedForOldIE(fn); }, 100);

}

onreadystatechange イベントによる判定

code:js

document.attachEvent("onreadystatechange", function(){

if ( document.readyState === "complete" ) {

document.detachEvent( "onreadystatechange", arguments.callee );

// ready

}

});

DOMContentLoaded イベントの追加

DOM 構築完了を示すイベントとして DOMContentLoaded イベントが用意された。

IE9以降で利用可能。

defer 属性の追加

Microsoft が IE に defer 属性を追加した。(1997年頃)

defer 属性により、DOM 構築完了までスクリプトの実行を待たせることができる。

async 属性の追加

JavaScript には、その場で HTML にテキストを追加できる document.write メソッドがあるため、JavaScript を実行している間は HTML の読み込みや DOM の構築を進めることができない。

この問題を解決するため、async 属性が用意された。

async 属性を指定された JavaScript では、JavaScript を実行中に HTML の読み込みと DOM 構築を並行することができる。

参考