LoginSignup
2

More than 3 years have passed since last update.

dataTables.js で2回目以降の表示が遅い!!ときに効果があった対処法。

Posted at

はじめに

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2