JavaScriptの高速化について

質問

複数のTextBoxやComboBox（全部で60個くらい）がある画面で、ASP.NETの開発を行っています。
ボタンのonclickイベントや、項目のonchangeイベントで、
これらの項目に値を設定したり、readOnlyやdisabled設定を変えたり、スタイルシートのクラスを設定したりしています。

ところが、このreadOnlyやdisabled、スタイルシートの変更をたくさんの項目に行おうとすると、途端に動きがモッサリと遅くなります。
値の設定だけのときは１秒もかからなかったのに、
コントロールの使用可否とスタイルシートのクラスを設定しようとすると、急に３、４秒程度かかるようになってしまいました。

これらの処理はJavaScriptでは遅いのでしょうか。
またJavaScriptの処理を高速化させるために、気をつける点とは何でしょうか。

ご教授いただければ幸いです。

回答No.2

noname#94983

例えば、１つの方法として。表示する領域には<div>タグとかを１つおいておくだけにする。これとは別に、TextBoxやComboBoxを表示するHTMLのソースコードを別ファイルで用意しておく。で、JavaScriptから非同期通信でこれを読み込み<div>にはめ込んで表示を作成する。変更する際には、そのHTMLのソースコードのテキストを修正して再度はめ込みなおす。こんな感じにしたら、そんなに遅くはならないのでは。

既にあるコントロール類の表示を１つ１つこまめに変更していく場合、例えばdisabledを設定したらそれによって全体を再レイアウトするようなことにもなったりしますよね。そうした大きく表示を更新するような処理が多数あったりするんじゃないですか。画面の表示に関わる変更は、なるべく少ない回数で済むようにしたほうがいいのでは。

お礼

logger_manさん、回答ありがとうございます。

>JavaScriptから非同期通信でこれを読み込み<div>にはめ込んで表示を作成する

なるほど、こんな手もあるんですね！
ただ、既存のASP.NETプログラムの修正で当問題にぶつかってしまっているところなので、ここまで大きな改造は難しそうです。
Ajaxに対応した新しいバージョンなら、その辺も楽なのかもしれませんが……（？）

>画面の表示に関わる変更は、なるべく少ない回数で済むようにしたほうがいいのでは。

そのとおりですよね。
今後、設計時に気をつけようと思います。

どうもありがとうございました！

回答No.1

yambejp

>たくさんの項目に行おうとすると、途端に動きがモッサリと遅くなります。

60やそこらの数で遅くなることはありません。
おそらくソースに非効率なのではないでしょうか
遅いソースというのを例示いただければ、対処方法も指摘できるような
気もしますが・・・。

お礼

yambejpさん、回答ありがとうございます。

>60やそこらの数で遅くなることはありません。

このお言葉を胸に調べていったら、
JavaScriptの動きが遅いというよりも、
画面が重過ぎるのだということが、わかってきました。
同じページに100列ほどのテーブルが一つあり、
そこにいろいろな情報が詰め込まれていたのですが（HTMLファイルが100Kほどありました）、
これを減らしたら（60K程度）、JavaScriptの速度も気にならなくなりました。

ただ、値の設定にはさほど時間がかからなかったのに、
スタイルシートのクラスを変更するのが遅かった理由はよくわかりません。。。。

でも、とりあえずは何とかなりそうです。
どうもありがとうございました！