Personal tools
You are here: Home ブログ 井上 YUI、jQuery、Ext JSのグリッド実装の比較
« December 2010 »
Su Mo Tu We Th Fr Sa
      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  
Recent entries
Apache2.4のリリース予定は来年(2011年)初め(あくまで予定) inoue 2010-12-23
Herokuの発音 inoue 2010-12-20
雑誌記事「ソフトウェア・テストPRESS Vol.9」の原稿公開 inoue 2010-12-18
IPA未踏のニュース inoue 2010-12-15
労基法とチキンゲーム inoue 2010-12-06
フロントエンドエンジニア inoue 2010-12-03
ASCII.technologies誌にMapReduceの記事を書きました inoue 2010-11-25
技術評論社パーフェクトシリーズ絶賛発売中 inoue 2010-11-24
雑誌連載「Emacsのトラノマキ」の原稿(part8)公開 inoue 2010-11-22
RESTの当惑 inoue 2010-11-22
「プログラマのためのUXチートシート」を作りました inoue 2010-11-19
「ビューティフルコード」を読みました inoue 2010-11-16
Categories
カテゴリなし
 
Document Actions

YUI、jQuery、Ext JSのグリッド実装の比較

JDK2ことJD勝さんにJavaScriptライブラリ3種のグリッド(カラムをリサイズ可能なテーブル)の実装を調べてもらいました。

  • YUI(Yahoo! UI Library)
  • jQuery(Grid)
  • Ext JS

それぞれの実装の骨格だけを再現したのが以下のコードです。JavaScriptのグローバル変数が気になる、とか言いたいことがあるかもしれませんが無視してください。

Ext JS版は元実装が気に入らない(by JD勝さん)とのことで改変版もあります。

それぞれの実装を簡単に説明します。

YUI版:

  • テーブルの1行が <tr><td><div>col1</div></td><td><div>col2</div></td></tr> の構造
  • 上記<div>にカラムごとにクラスを指定
  • カラムリサイズ時にdocument.styleSheets内で上記クラスのスタイルを変更
  • マルスケでも採用

jQuery版:

  • テーブルの1行が <tr><td>col1</td><td>col2</td></tr> の構造
  • カラムリサイズ時にテーブル要素の rows[0].cells[col].style.width の値を変更

Ext JS版:

  • テーブルの1行が <table><tr><td>col1</td><td>col2</td></tr></table> の構造(行数分のテーブル要素が存在)
  • カラムリサイズ時に全行のテーブル要素の firstChild.rows[0].childNodes[col].style.width の値を変更

Ext JS改変版:

  • テーブルの1行が <tr><td>col1</td><td>col2</td></tr> の構造(jQuery版と同じ)
  • カラムリサイズ時にテーブル要素の全行の cells[col].style.width の値を変更

行数が増えた場合の体感速度は、速い順に次のような感じです(Firefox3)。

jQuery > YUI > Ext JS

体感速度ではなくJavaScriptのコード実行時間を計測しろと言われそうですが、今回の場合、コード実行時間にあまり意味がありません。例えばYUI版はスタイルの書き換えだけなのでJavaScriptの実行はすぐに終わります。しかし、カラム幅が実際に変わるのは、その後の再レンダリングが終わる時です。

The URL to Trackback this entry is:
http://dev.ariel-networks.com/Members/inoue/js-grid-comparison/tbping
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
This helps us prevent automated spamming.
Captcha Image


Copyright(C) 2001 - 2006 Ariel Networks, Inc. All rights reserved.