goog.ui.ThousandRows - 大量の一覧を軽快に表示するGoogle Closure Library モジュール
Closure Library で、大量に列のあるリストを軽快に表示できるコンポーネントを作りました。
デモ：http://stakam.net/closure/120722/
GitHub：https://github.com/piglovesyou/closure-thousandrows
特徴
初期表示、スクロール時の動きが速いです。
使えるケース
数千件〜の一覧の表示に力を発揮します。過去ログなど大量のデータを表示するときに使えるかも知れません。
使えないケース
- リストが数十件程度の場合。遅延読み込みの必要がありません。
- それぞれの列の高さがデザイン上違う場合は使えません。列は全て同じ高さである必要があります。これはコンポーネント側の制約です。
つくった経緯など
このコンポーネントは、既存のWebページに用いられていた「ページング」と「無限スクロール」の問題点を解決したデータの表示ができます。
そもそも、大量のデータを一度にWebページに表示しようとすると、どんな問題があるのでしょうか。サーバの負荷、データ転送量の増大、レンダリング時間の増大が挙げられます。レンダーツリーがあまりに多いと、スクロールなどの動作も重く、ユーザーストレスの原因にもなります。
よくある「ページング」は、一覧の上下に「1 2 3 ... 99」といった数字のリンクがあるデータの表示パターンです。分割して少ない量を読み込むため、サーバもクライアントも安心です。でも、ユーザーとしては毎回ページを読み込みし直すのが億劫です。それがAjaxになっても、「上から下に読んだ一覧を、また上から読み直さないといけない」のがちょっと残念です。
無限スクロールは、ずーっと下にスクロールして情報を見続けることができます。僕もTumblrを見てますが、はまると眺めているのがだんだん辞められなくなります。でも、だんだんページが重くなってくる問題があります。ページの上にDOMが残ったままなので、スクロール時のリフローコストが増大していってしまいます。
それらを解決したのが、ThousandRowsです。
スクロールしていくと通信し、DOMをappendして行くのは、無限スクロールと同じです。でも、不要な列を消していくので、ページが重くなることはありません。さらに、スクロールバーによって、無限スクロールにはない「下へのジャンプ」ができるようになりました。
でもひとつ制約があります。ロードしてないデータの列の高さを予測できないため、全ての列の高さを同じにしなければなりません。そこらへんから、ThousandRowsはiOSのUITableViewに近い動きをすると思っています。
大量の一覧データの表示に困っている方は、ぜひ利用してみてください。
