はじめに

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は本当に遅い。。。

同じような現象で困っている方、ぜひお試しあれ♪