はじめに
dataTables.js(1.10.15)を使用して
6000件~7000件程度のデータでテーブル表示をしていたときのお話。
IE11(なんで今更というツッコミは置いといて)で表示させてみたところ、
うーん。まずまず。
再度検索処理を実行して表示させてみたところ、
…ん?表示されない。
…えっ。。。嘘でしょ。。。
…全然返ってこない。。。
そう。2回目になると1回目に比べて 極端に 遅くなっていました。
IE11でDataTablesの処理開始から終了までを計測したみたところ、
1回目:約6秒
2回目:約153秒
という本当に冗談かと思うような(そうあってほしい)結果が出てしまいました。
原因について考えてみる
dataTablesを使用すると決めたときに、
ネットでよく出てくるdataTablesの高速化の方法(※)は既に実装済みだったので
※データはJSON形式にして、DataTablesに直接渡す
dataTablesの使い方が原因ではないと考えました。
次に、1回目と2回目で異様に処理時間が変わってしまうこと。
1回目と2回目で何が違うかというと、
間違いなく
膨大な量のHTMLが描画されているか、されていないか
これにつきると考えました。
ということは、その大量のHTMLを一旦削除してしまえばよいのではないか???
解決方法
元々は、サーバ側からjsonデータを取得した後に
$("#result").DataTable({
destroy: true,
scrollX: true,
data: myData,
~
});
というようにdataTablesの描画処理しか行っていませんでした。
それを、
$("#result").empty();
$("#result").DataTable({
destroy: true,
scrollX: true,
data: myData,
~
});
のように、
一旦dataTablesをバインドする要素内のhtmlを全削除
↓
dataTablesの描画処理
という処理に変更したところ、
1回目:約6秒
2回目:約6.5秒
と劇的(25倍!!)に2回目の処理速度が向上しました。
考えてみたら当たり前なんですが、
意外と気づかないんですよね。。。
おわりに
Chromeでは計測しませんでしたが、体感的には明らかに早くなっていました。
というか、IEは本当に遅い。。。
同じような現象で困っている方、ぜひお試しあれ♪