スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

web拍手 by FC2   

DOMに追加するときの話

jQueryのパフォーマンスを下げるアンチパターンに関する超意訳
http://qiita.com/items/fbec02ad2a541261a511
なんてもの見つけて、"HTMLを生成するときにjQueryオブジェクトにアクセスし続けない" が気になったのでテストしてみました。

試す前に、ちょっと疑問が。
var frag = document.createDocumentFragment();
$.each(reallyLongArray, function(count, item) {
  var newLi = '<li>' + item + '</li>';
  frag.appendChild(newLi[0]);
});
$('#ballers')[0].appendChild(frag);
これ動くのかしら?itemがDOM要素なら動くのかな?
そもそも文字列足したらStringになるから結局駄目な気が…

[方法]


<body>
  <div>{Math.random()}</div>
  <div>{Math.random()}</div>
  <div>{Math.random()}</div>
  ...
</body>
という形を作る時間をはかる。

[作り方]


target.append(inner)
をループさせる。
場合によりループ前後の処理もある。(targetの設定とか、$("body").append(target)とか)

targetの種類は
・$("body")
・$("<div>") → .children()
・$("<div>") → .html()
・document.createElement("div") → .innerHTML
・document.createDocumentFragment()
・string

targetへの追加する中身は
・$("<div").text(Math.random());
・document.createElement("div");
div.textContent = Math.random();
・"<div>" + Math.random() + "</div>"

[計測]


var loopCount = 5000;
var t = new Date().getTime(), t2;
// 前処理 //
for(var i=0; i<loopCount; i++) {
  // ループ処理 //
}
// 後処理 //
t2 = new Date().getTime();
console.log(message + " : " + (t2-t).toString());
こんな感じでやりました。詳しくはソース( http://gist.github.com/3761000 )を。
なので、結果に出てくる数値はミリ秒になります。

[結果]


省略。
http://dl.dropbox.com/u/31716747/test/DOMAppendTest.html
を開くとチェックできると思います。
JavaScriptコンソールを確認してください。

[感想]


くろーむこわ!
IEおっそ!
そしてjQueryつかわないほうがはやい!

----------
Stringに一回全部放り込んでからDOMに追加するのがよさそうな。
document.createDocumentFragmentとdocument.createElementの組み合わせを上手くラップできればそれが一番早いのかな?
IEでもかなり早いみたいですし。

いや、でも、そんな大量な要素も一気に追加することなんてあるか…?


ともあれ、今回使ったコードは http://gist.github.com/3761000 にまんま置いてあります。
Twitterしてたり、Skype通話してたり、裏でゲームが起動しっぱなしだったりとものすごいグダグダな計測なので、環境によって結果が大きく変わる可能性もあります。
ぼくが使ったソースコードはアップしてあるので、各々の環境でも試してみてください。
http://dl.dropbox.com/u/31716747/test/DOMAppendTest.html でも確認できると思います。

・・・ちょっと工夫したとはいえ、まだまだプログラム詰められそうな気がする。
特にパターン定義してるあたり、高度な魔法を詠唱したい。

web拍手 by FC2   

コメントの投稿


非公開コメント

コメント

STERS's Development Room

STERSの開発室っぽい何か。


プロフィール

Name:STERS
Unity3D/C#/PHP/js/C++/VB
などを勉強中です

[STERS's Room]
[ファイル置き場]

カテゴリー
最近の記事
最近のコメント
カレンダー
04 ≪│2017/05│≫ 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
RSSリンクの表示
ブログ内Google検索
Google
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。