javascript最適化

PC

今日わかったのはgetElementByIdは案外重いということだ。
ノードpのchildNodesにID付きの要素がいっぱいあって、IDごとにフラグを見ながらクラスを足していくような動作を考えたとき、

  1. フラグの立ったIDのリストをforで回し、IDを使ってgetElementByIdで要素を取得、クラスを変更する
  2. フラグの立ったIDをindexとする連想配列をもち、p.childNodesのIDを順にチェックし、リストにあればクラスを変更する

この二つの方法が考えられるわけだけど、明らかに後者の方が早い。特に、要素が増えれば増えるほどはやい。まぁ、いちいち存在する全要素（IDつきのやつだけ？）を調べるのと順々にアクセスするののどっちが早いか、って当然後者なのは火を見るより明らかなわけで。これに気づいたおかげで部分的に10倍早くなった。
具体的に書くと、にちゃんのレス1000個分ぐらいの分量のHTMLで、

for (var i=0; i<res.length; i++) {
	var node = document.getElementById("res"+res[i]);
	if (node) {
		node.className = "anchord";
	}
}

これが約3秒かかるのに対して

var p = document.getElementById("ppContent");
var cl = p.childNodes.length;
for (var i=0; i<cl; i++) {
	var c = p.childNodes[i];
	if ((c) && (c.id)) {
		if ( tmp[ c.id.substring(3) ] ) {
			c.className = "anchord";
		}
	}
}

これが0.2秒。
結論。DOMの探索メソッドはあんまりつかうな！ザクとは違うのだよ！ザクとは！