質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

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

miiisya
miiisya

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

4回答

0グッド

1クリップ

1112閲覧

投稿2022/01/07 06:42

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

int32_t

2022/01/07 08:25

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

回答4

2

ベストアンサー

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

js

1function tFilterGo(){ 2 ... 3 for(var i=gTfStartRow; i < wTR.length; i++){ 4 5 var wVal = trim(wTR[i].cells[wCol].innerText.toString()); 6 7 // --- チェックボックス選択によるフィルタ ---------------- 8 ... 9 wTR[i].setAttribute('cmanFilterNone',''); 10 11 // --- 抽出文字によるフィルタ ---------------------------- 12 ... 13 wTR[i].setAttribute('cmanFilterNone',''); 14 }

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

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

投稿2022/01/09 15:26

int32_t

総合スコア17880

Lhankor_Mhy, ikadzuchi👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

miiisya

2022/01/11 07:28

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

0

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

js

1 if (!wAll.checked) { 2 for (let i = gTfStartRow; i < wTR.length; i++) { // 変更 3 var wVal = wTR[i].cells[wCol].innerText.toString().trim(); 4 5 if (wItemSave.includes(wVal)) { 6 } 7 else { 8 setTimeout(() => { // 変更 9 wTR[i].setAttribute('cmanFilterNone', ''); // 変更 10 }, 0); // 変更

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

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

たとえば、

js

1 for (var i = gTfStartRow; i < wTR.length; i++) { 2 3 var wVal = wTR[i].cells[wCol].innerText.toString().trim(); 4 5 // --- チェックボックス選択によるフィルタ ---------------- 6 if (!wAll.checked) {

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

投稿2022/01/08 01:59

Lhankor_Mhy

総合スコア33635

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Lhankor_Mhy

2022/01/08 02:16

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

2022/01/09 15:30

> CSSのリフローの回数が減っている cmanFilterNone 属性の更新をループ外に移したため、innerText による強制レイアウトがスキップされます。
Lhankor_Mhy

2022/01/11 00:43 編集

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

2022/01/11 07:31

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

0

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

投稿2022/01/07 07:33

komasan1

総合スコア257

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

komasan1

2022/01/07 09:56

https://github.com/bvaughn/react-window これはreactですが動かしてみるとイメージしやすいと思います。 実装するのは大変なのでライブラリがあれば探してみたほうが良さそうです 画面内に15行までしか収まらない状態なら1〜15の最大15個の行のみDOMを生成、スクロールしたら1行目を消し、2〜16行を表示するみたいな感じです。 以前仕事で利用した時は9999行でも高速に動きましたよ

0

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

投稿2022/01/07 07:32

yambejp

総合スコア109862

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

miiisya

2022/01/07 07:52

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

2022/01/07 08:31

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。