inputタグに1ページ2000から4000ほどに、数値を入れるWEBアプリがあるのですが、JSで代入してもそれほど、重くならないでしょうか？

Question

レンダリング時に、tdの中にあるinputタグに1ページ2000から4000ほどに、数値を入れるWEBアプリがあるのですが、JSで代入してもそれほど、重くならないでしょうか？

管理はこちらの方がしやすいのですが、あまりに重くなるならhtmlに記載します。

Answer 1

試せばわかると思います。
https://codepen.io/anon/pen/OBEmZg
値を入れるだけなら重いというほどでもないと思うんですけど、処理内容次第だと思います。

Comments

[退会済みユーザー]

73ミリ秒でした。1000ミリ秒で1秒だから大したことないですね。
これならほぼ無関係程度とわかりました。
ありがとうございます。

追加で恐縮ですが、これプラス全ての入力欄をチェックして、数値が入っている要素だけ変更できないように、disable属性を追加する作業が加わってしまいました。

入力の5倍程度でしょうか？肌間で良いので教えていただければ幸いです。

また、仮に400ミリ秒程度かかったとしても、body愁傷直前に記載してあるので、HTML、CSSが全て読み終わって画面が見れる状態で、実行されるので、jsはあくまで閲覧者が見ながら裏で処理している状態になりますよね。

つまり何も見えない状態が遅くなるわけではないと考えてよいいで消化？

[4477]

肌感では何とも言えないので、やっぱり実験ですね。
これも試せばいいと思います。
ランダムに空欄を作って、disabledする処理を追加しました。
https://codepen.io/anon/pen/YJvxKv

ここまで単純な例だと大したことないですが、
HTMLやCSSが複雑だったり、onchangeやonkeyupで何か処理をしたり、各列に合計の計算を追加したりすると、そこそこ遅くなる可能性はあると思います。

HTMLを読み込んでから処理をするなら、この処理のせいで表示が止まることはないと思います。

[退会済みユーザー]

重ね重ねありがとうございました。
113ミリ秒
なので
0.1秒程度で柴これなら大丈夫です。
しかも画面が出来上がって閲覧者がスクロールしているうちに数秒立つので、HTMLtocssだけがちゃんと表記された後に処理が始まるなら、その後jsがバックグラウンド処理をしていても閲覧者は気が付かないと思います。

[退会済みユーザー]

ベストアンサーにさせてもらいました。

また、こちらも回答が無くて困っているのですが、もしご存知でしたら教えていただければ幸いです。

https://teratail.com/questions/151819

Answer 2

JSがクライアント側で動くものとして、処理速度はユーザーが使っているパソコンやスマホの性能によって変わります。
速度を計測するには、実際に運用してみてGoogle Analytics等で分析しないと分かりません。

表示速度を重視するなら、JS側は軽くするのがセオリーかと思います。

Comments

[退会済みユーザー]

数値一文字を1ページに2000から4000ほどinnerHTMLで入れる程度でも、数秒重くなる可能性がかなりあるのでしょうか？

これだけの数自分で毎回入れるのはかなりの重労働ですが、それでも重くなるからHTMLに自分で入れていった方がいいのでしょうか？

[mrkmyki]

> 数値一文字を1ページに2000から4000ほどinnerHTMLで入れる程度でも、数秒重くなる可能性がかなりあるのでしょうか？

ごめんなさい。やった事が無いのでわかりません。
プログラムの実行速度については、予測するのではなく実際に計測するのが一番です。検証用のコードを書いてみて、試してみてください。

> これだけの数自分で毎回入れるのはかなりの重労働ですが、それでも重くなるからHTMLに自分で入れていった方がいいのでしょうか？

サーバー側のプログラムでHTMLを動的に生成すれば良いかと思います。