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

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

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

• http://dev.ariel-networks.com/misc/grid/all-yui.html
• http://dev.ariel-networks.com/misc/grid/all-jquery.html
• http://dev.ariel-networks.com/misc/grid/all-extjs2.html
• http://dev.ariel-networks.com/misc/grid/all-extjs.html (Ext JS改変版)

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の実行はすぐに終わります。しかし、カラム幅が実際に変わるのは、その後の再レンダリングが終わる時です。