2009/11/10

javascript innerHTML/innerTextを高速化したい

このエントリーをはてなブックマークに追加
documentに対して何らかの操作をすると、それがすぐ画面に反映されるという利点があってとても楽しいんですが、しかし反面アクセスが多くなるとすぐにボトルネックになります。

innerHTMLはめちゃくちゃ汎用的なのですが、文字をちょこっと表示/変更したいだけのようなときには仕様が大げさすぎることもあって、そういうときはinnerTextを使います。
しかしinnerTextよりもTextNodeを直接いじるほうが高速なのではと思って、計測してみた。

●コード

// ①innerHTMLを使う
var func1 = (function(){
var element = document.getElementById("id1");
return function(str){
element.innerHTML = str;
};
})();

// ②innerTextを使う
var func2 = (function(){
var element = document.getElementById("id2");
return function(str){
element.innerText = str;
};
})();

// ③TextNodeのnodeValueを更新する
var func3 = (function(){
var element = document.getElementById("id3");
var textNode = document.createTextNode(count);
element.appendChild(textNode);
return function(str){
textNode.nodeValue = str;
};
})();

●測定
測定方法は、ブラウザごとに上記の関数をそれぞれ、一秒間に何回呼べるかを計測した。

・IE8
① 9388回
② 32648回
③ 59668回

・firefox3
① 18431回
③ 74487回

※innerTextはfirefoxでは使用できないので飛ばします。

・GoogleChrome
① 222675回
② 608540回
③ 642903回

ただし、文字数や処理内容に影響すると思う。どんなときも一秒間にこんなに呼べるとは思えません。
今回はコンテンツ自体もすかすかで、カウンタとなる数値を代入していっただけなので早いのでしょう。

●まとめ
TextNodeのnodeValueを更新したほうが高速。

お決まりの文句ですが、大体の場合、高速化についてはアルゴリズムを見直すのがよいです。
でももっと言うと、クライアントの環境によって処理内容や速度が変わってしまったりするようなものに、速度を求めるのが間違っている気がします。でもこれはほとんど愚痴。

0 件のコメント :

コメントを投稿