たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

テーブル描画1000件テスト

icon March 31, 2006 11:31 AM by yuugo このエントリーを含むはてなブックマーク

山本ゆうごです。

AJAXになると、できるだけサーバとの通信を少なくして、クライアント側(ブラウザ上)での処理で済ませたいものです。

ということで、JavaScriptでどれくらいのサイズのテーブルが操作できるかのテストをしてみました。1000行のレコードをJavaScriptを使って描画しています。
http://tatamilab.jp/~yuugo/sample/tablete01.html

 

テーブルの描画には、DOMメソッドを使っています。IE6とFirefox1.5で動作確認をしています。再テストをするときにはF5を押してリロードしてください。

テーブル描画1

insertRowとinsertCellを使ってテーブルを描画しています。かなり遅いです。使い物にならないレベルといっていいでしょう。

テーブル描画2

createElementとappendChildを使って描画しています。insertRowを使うよりは速いです。Webアプリを開く一番最初だけこれくらいの時間ならまぁ許されるというくらいでしょう。データが多いときにはこっちの方法を使った方がいいでしょう。

フィルタ

フリーワードフィルタの機能をつけてみました。一度テーブルを描画してしまえば、各行の表示/非表示を切り替えるのは高速です。

結論

1000行くらいのデータならブラウザ側でデータ持っていてもいいんじゃないでしょうか。トラフィックはこの場合無視していますが、何回も通信するくらいなら、初回に一気にダウンロードできた方が幸せだと思います。

COMMENTS

Safari 2.0でも同様に、「テーブル描画2』の方が高速でした。

April 1, 2006 12:59 AM by 大井宏友  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.