JSフィルター機能の速度向上を図りたい

Question

リンクと同じ形で、Execlのようにフィルタをする機能を実装してみたのですが、表示データ量が多い場合(横20個×縦1300個)に処理に時間がかかってしまいます。
処理速度アップを図るためには、どのような策があるか教えていただきたいです。

サーバー側はphpとなっております。

Comments

[int32_t]

jsbin や jsfiddle などで遅さを再現できるページを用意できませんか?

Answer 1

tFilterGo() の実装が非常にまずいです。

function tFilterGo(){
  ...
      for(var i=gTfStartRow; i < wTR.length; i++){
 
        var wVal = trim(wTR[i].cells[wCol].innerText.toString());
 
        // --- チェックボックス選択によるフィルタ ----------------
        ...
            wTR[i].setAttribute('cmanFilterNone','');
 
        // --- 抽出文字によるフィルタ ----------------------------
        ...
            wTR[i].setAttribute('cmanFilterNone','');
      }

innerText は再レイアウトを強制します。ループの中で スタイルに影響する cmanFilterNone 属性の更新と innerText の両方を実施しているため、ループ毎に巨大なテーブルの再レイアウトが行われていることになります。
innerText を textContent などに変更すべきです。

また、巨大テーブルの再レイアウトにかかる時間を短縮するには、各セルの幅を固定しておくと効果的です。

Comments

[miiisya]

回答いただきありがとうございます。
回答の通りの修正で処理時間を大幅に改善することができました。
jsは勉強不足でして、わからないことばかりのため今回の件非常助かりましたありがとうございます。

Answer 2

処理速度が上がるわけではないですが、ユーザーの体感としては、以下のように非同期処理にするとかなり改善するのでは。

          if (!wAll.checked) {
            for (let i = gTfStartRow; i < wTR.length; i++) { // 変更
              var wVal = wTR[i].cells[wCol].innerText.toString().trim();

              if (wItemSave.includes(wVal)) {
              }
              else {
                setTimeout(() => { // 変更
                  wTR[i].setAttribute('cmanFilterNone', ''); // 変更
                }, 0); // 変更

---

さて、yambejpさんのご回答にある通り、計算量オーダーを減らすことは難しそうです。

ただ、tFilterGo関数の処理を見ると、フィルタをかけるたびに全ての非表示を表示に戻してから、全ての列のフィルタごとに全ての行をチェックしているようです。
これは、列×行の数だけ処理をしていますので、これを行の数に近づければ少しマシになるかと思います。

たとえば、

          for (var i = gTfStartRow; i < wTR.length; i++) {

            var wVal = wTR[i].cells[wCol].innerText.toString().trim();

            // --- チェックボックス選択によるフィルタ ----------------
            if (!wAll.checked) {

↑ここでは、全ての行を舐めながらフィルタの状態をチェックしていますが、どの行でもwAll.checkedの状態は変わることがないはずなので、これはムダでしょう。

Comments

[Lhankor_Mhy]

> 処理速度が上がるわけではない

と思ったけど、自分の環境でパフォーマンスを測定してみると、明らかに処理が速くなっていました。
内容を見てみると、CSSのリフローの回数が減っているのだけど、これはなぜだろう……？　普通、setTimeout で処理を非同期に出したらリフローの回数増えますよね……？

[int32_t]

> CSSのリフローの回数が減っている

cmanFilterNone 属性の更新をループ外に移したため、innerText による強制レイアウトがスキップされます。

[Lhankor_Mhy]

ありがとうございます。innerText は読み取りだけでも強制レイアウトが起きるのですね。勉強になりました。
ただ、属性を変更しない場合は処理が軽くなる理屈が、ちょっとよくわかりませんでした。

[miiisya]

回答いただきありがとうございます。

Answer 3

描画に時間がかかってるんですかね。
画面内で見えてる部分だけ書き出すとはどうでしょうか

Comments

[miiisya]

回答いただきありがとうございます。
画面内で見えてる部分だけ書き出すとは、下記で議題になっていることと同じ意図でしょうか?
https://atmarkit.itmedia.co.jp/bbs/phpBB/viewtopic.php?topic=36822&forum=28

[komasan1]

https://github.com/bvaughn/react-window
これはreactですが動かしてみるとイメージしやすいと思います。
実装するのは大変なのでライブラリがあれば探してみたほうが良さそうです

画面内に15行までしか収まらない状態なら１〜１５の最大15個の行のみDOMを生成、スクロールしたら1行目を消し、2〜16行を表示するみたいな感じです。
以前仕事で利用した時は9999行でも高速に動きましたよ

Answer 4

データ量が多いなら処理時間がかかるのは仕方ないでしょう
ちゃんとやるならデータはサーバー側にRDBなどで管理させページングや遅延読み込みなどで処理をしてみてください

Comments

[miiisya]

回答いただきありがとうございます。
ページングについては、他の機能が使いにくくなってしまうため単一ページでの表示をせざるを得ない状態です。
遅延読み込みについては、知らない単語だったので調べてみます。
現状20秒以上かかっているためせめて10秒くらいにまでは縮めれないかと考えています。

[yambejp]

フィルタ無しで全データ表示するのには20秒以上かからないのでしょうか？
であればフィルタがおかしいだけかもしれません