Help us understand the problem. What is going on with this article?

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

はじめに

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

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

solve-ray
日々定時帰りを目標に、子育て奮闘中のフリーランスエンジニア。 Webアプリケーションの開発を主に仕事としています。 桑名が大好き。(技術関係ないですが(^^)) 言語:.NET(C#, VB)、PHP DB:Oracle、SQLServer、MySQL 好きな本:リーダブルコード、あひるの空
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away