レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

FireFox3とIE6で、Elementの取得において最高速なのは？

JavaScript パフォーマンス

昨日の続きで、FireFox3とIE6でのJavaScriptのパフォーマンス比較をやってみる。

Dom操作の中でも、基本的なElementの取得について、以下の2つのパターンで検証した。

  • document.getElementById()
  • document.all()

結果は、以下。

回数 対象 FF3 IE6
100回 document.getElementById() 2 0
document.all() 5 0
1000回 document.getElementById() 18 563
document.all() 145 718
5000回 document.getElementById() 65 20594
document.all() 5092 16734
10000回 document.getElementById() 132 74656
document.all() 18552 67437

検証方法

以下のような検証用スクリプトで

100回、1000回、5000回、10000回のループを作って

Firefox、IEのそれぞれで試してみる。

<html><script type="text/javascript">
<!--
window.onload = function(){
	var cnt = 100; 
	var parentDiv = document.getElementById("d");
	for (i = 0;i < cnt;i++){
		var elem = document.createElement("div");
		elem.id = "d" + i;
		elem.name = "d" + i;
		parentDiv.appendChild(elem);
	}
	var startdate = new Date();
	for (i = 0;i < cnt;i++){
		var elem = document.getElementById("d" + i);	// <-検証ポイント
	}
	var diff = new Date() - startdate;
	alert(diff)
}
-->
</script>
<body><form name="d" ><div id="d"></form></body></html>

■ document.getElementById()のパフォーマンス

もっとも一般的に使われていると思われる、document.getElementById()だが、

IE6でのパフォーマンスの劣化度合いが激しい。

10000回もループすると、もう使い物にならなくなる。


■結果

回数 FF3 IE6
100回 2 0
1000回 18 563
5000回 65 20594
10000回 132 74656

■ document.all()のパフォーマンス

コード中で、「検証ポイント」とコメントした部分のコードを

「document.all()」に変えてもう一度速度を計測した。


■検証ポイントのコード

var elem = document.all("d" + i);


■結果

回数 FF3 IE6
100回 5 0
1000回 145 718
5000回 5092 16734
10000回 18552 67437

document.all()にするとIEで若干高速化するものの、

FireFoxでのパフォーマンス劣化が激しすぎる。

IEで、高速にElementを取得したいと思って

document.forms.elemntsで取得するパターンもやってて、

かなり高速に動いたと思ってたら、

検証方法があまくて、Divの要素が取得できていないから高速なだけだった。

IEでDom操作の高速化をテーマとしてもう少し検討していきたい。