Web標準化時代のJavaScript

getElementByID、変数、withによる参照速度比較

ページ上にあるdivタグを参照する場合の速度比較結果です。getElementById()で参照する場合、一度取得したIDを変数に入れて参照した場合、withを使ってオブジェクト名を省略した場合の3パターンを比較しています。
テストマシンはPower Mac G5 (2GHzx2、メモリ4GB)、WindowsはXP SP2 (3.0GHz、768MB) で行っています。動作速度は何度かリロードした場合の値になっています。また、動作速度は環境により異なるので、あくまでも参考程度にしてください。
【サンプル1を実行】
【サンプル2を実行】
【サンプル3を実行】
OSブラウザgetElementById (msec)変数 (msec)with (msec)
MacOS X (10.4.7)Safari 2.0.412804201000
MacOS X (10.4.7)Firefox 1.5.0.4445030504420
MacOS X (10.4.7)Opera 9.02770501160
Windows XP SP2Internet Explorer 6440023002760
Windows XP SP2Firefox 1.5.0.4462030324100
Windows XP SP2Opera 9.068015580
【サンプル１】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<title>Sample</title>
</head>
<body>
<p>JavaScript Speed Test</p>
<div id="outputArea"></div>
</body>
</html>

■スクリプトファイル (test.js)
window.onload = function() {
var num = 100000;
s = (new Date()).getTime();
for (var i=0; i<num; i++) {
document.getElementById("outputArea").innerHTML;
}
e = (new Date()).getTime();
alert(e-s);
}
【サンプル２】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<title>Sample</title>
</head>
<body>
<p>JavaScript Speed Test</p>
<div id="outputArea"></div>
</body>
</html>

■スクリプトファイル (test.js)
window.onload = function() {
var divObj = document.getElementById("outputArea");
var num = 100000;
s = (new Date()).getTime();
for (var i=0; i<num; i++) {
divObj.innerHTML;
}
e = (new Date()).getTime();
alert(e-s);
}
【サンプル３】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<title>Sample</title>
</head>
<body>
<p>JavaScript Speed Test</p>
<div id="outputArea"></div>
</body>
</html>

■スクリプトファイル (test.js)
window.onload = function() {
var divObj = document.getElementById("outputArea");
var num = 100000;
s = (new Date()).getTime();
with(document.getElementById("outputArea")) {
for (var i=0; i<num; i++) {
innerHTML;
}
}
e = (new Date()).getTime();
alert(e-s);
}