• 締切済み

JavaScriptの高速化について

複数のTextBoxやComboBox（全部で60個くらい）がある画面で、ASP.NETの開発を行っています。 ボタンのonclickイベントや、項目のonchangeイベントで、 これらの項目に値を設定したり、readOnlyやdisabled設定を変えたり、スタイルシートのクラスを設定したりしています。 ところが、このreadOnlyやdisabled、スタイルシートの変更をたくさんの項目に行おうとすると、途端に動きがモッサリと遅くなります。 値の設定だけのときは１秒もかからなかったのに、 コントロールの使用可否とスタイルシートのクラスを設定しようとすると、急に３、４秒程度かかるようになってしまいました。 これらの処理はJavaScriptでは遅いのでしょうか。 またJavaScriptの処理を高速化させるために、気をつける点とは何でしょうか。 ご教授いただければ幸いです。

みんなの回答

noname#94983
noname#94983
回答No.2

例えば、１つの方法として。表示する領域には<div>タグとかを１つおいておくだけにする。これとは別に、TextBoxやComboBoxを表示するHTMLのソースコードを別ファイルで用意しておく。で、JavaScriptから非同期通信でこれを読み込み<div>にはめ込んで表示を作成する。変更する際には、そのHTMLのソースコードのテキストを修正して再度はめ込みなおす。こんな感じにしたら、そんなに遅くはならないのでは。 既にあるコントロール類の表示を１つ１つこまめに変更していく場合、例えばdisabledを設定したらそれによって全体を再レイアウトするようなことにもなったりしますよね。そうした大きく表示を更新するような処理が多数あったりするんじゃないですか。画面の表示に関わる変更は、なるべく少ない回数で済むようにしたほうがいいのでは。

MirrorKing
質問者

お礼

logger_manさん、回答ありがとうございます。 >JavaScriptから非同期通信でこれを読み込み<div>にはめ込んで表示を作成する なるほど、こんな手もあるんですね！ ただ、既存のASP.NETプログラムの修正で当問題にぶつかってしまっているところなので、ここまで大きな改造は難しそうです。 Ajaxに対応した新しいバージョンなら、その辺も楽なのかもしれませんが……（？） >画面の表示に関わる変更は、なるべく少ない回数で済むようにしたほうがいいのでは。 そのとおりですよね。 今後、設計時に気をつけようと思います。 どうもありがとうございました！

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

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

MirrorKing
質問者

お礼

yambejpさん、回答ありがとうございます。 >60やそこらの数で遅くなることはありません。 このお言葉を胸に調べていったら、 JavaScriptの動きが遅いというよりも、 画面が重過ぎるのだということが、わかってきました。 同じページに100列ほどのテーブルが一つあり、 そこにいろいろな情報が詰め込まれていたのですが（HTMLファイルが100Kほどありました）、 これを減らしたら（60K程度）、JavaScriptの速度も気にならなくなりました。 ただ、値の設定にはさほど時間がかからなかったのに、 スタイルシートのクラスを変更するのが遅かった理由はよくわかりません。。。。 でも、とりあえずは何とかなりそうです。 どうもありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascript; フィールドの属性変更

    作成したフォームに対してJavaScriptでの処理を行おうとしています。 セットした社名やDB検索した値の属性変更をしたいのですが、下記エラーが表示されます。 どのような対策がございますか? SCRIPT5007: プロパティ 'readOnly' の値を設定できません: オブジェクトは Null または未定義です。 SCRIPT5007: プロパティ 'onchange' の値を設定できません: オブジェクトは Null または未定義です。 下記のJavaScriptでの処理を行おうとしています。 function SetEvent() { document.getElementById("CompanyTextBox").readOnly="readonly"; 　//ここで、エラーになります。 //DB検索処理........ //配列 var counter = 0; var code = new Array(); for (var i = 0; i <10; i++) { code[i] = new Array(); code[i][0] = 'TextBox' + ((i * 4) + 1); code[i][1] = 'TextBox' + ((i * 4) + 2); document.getElementById(code[i][1]).readOnly="readonly"; //ここで、エラーになります。 } //検索結果のセット do { var elem = document.getElementById(code[counter][0]); elem.onchange = function(event) //ここで、エラーになります。 ・ ・ counter++; } while(counter < 10) }

  • readonlyをスタイルシートで

    セレクトボックスをreadonlyにしたいのですが不可能でしょうか？ disabledではサーバでセレクトボックスの値を取得できない為に 無理やりスタイルシートか、JavaScriptでreadonlyを設定したいと 願っています。 もし、アドバイスがありましたら、是非、どのような内容でも かまいませんので、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • スタイルシートでのdisableまたはreadonlyプロパティの設定

    いつもお世話になっております。ちょっと困ってしまったのでみなさん どうぞお力をおかしください。 スタイルシートでＩＥ ＯＮＬＹで構わないのですが 書き込み不可プロパティのdisabledまたはreadonlyを設定する方法は ありますか？ 具体的にいうと <style> input{background-color:silver;disabled:true} </style> のようにすると全テキストボックスが書き込み不可になるとか。 javascriptで制御もしようとおもえば出来ますが一変に変えてやりたいのです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • エクセルVBAでデータ検索（Win2000,Excel2000）

    エクセルで毎日の業務で手計算している作業をVBAコードかいて試しているのですが、縦と横の検索で行き詰まってしまい質問しました。どうぞよろしくお願いします。 ＿A＿＿B＿＿＿＿C＿＿＿＿D＿＿E＿＿F＿＿＿G＿＿＿H 1| 2|＿＿＿＿＿＿＿その他＿1～3＿4～6＿7～10＿11～20＿21～30 3| 3|＿＿項目A＿＿＿ 0＿＿＿50＿＿49＿＿46＿＿＿43＿＿40 4|＿＿項目B＿＿＿ 0＿＿＿45＿＿44＿＿39＿＿＿37＿＿34 5|＿＿項目C＿＿＿ 0＿＿＿43＿＿42＿＿34＿＿＿30＿＿ 28 行 *このデータは現在（B3:V42）にあり今後増える可能性あり *1行目とA列は空白です。 *2行目とB列は対応する項目です。 *3行目は関係ない値が入っています（データをつくる為の値） このようなデータが、"Sheet2"にあると仮定します "Sheet1"のシート上に配置したComboBox(コントロールツールボックスの)に検索値があります。 （ComboBox1 → 数値 , ComboBox2 → 数値 , ComboBox3 → 文字）*リストは"Sheet1"に登録してあります。 TextBox1 ÷ 2 の結果を小数点以下切上げし、これにTextBox2の値をかけたもの(仮にAAAとする)が、2列目のそれぞれのセルの数値範囲に対応し、TextBox3の文字列がB列に対応し、両検索結果の交わったセルの値を返すようにしたい。 例）もしAAAが「8」なら「F列」をみる。TextBox3 の文字列が「項目B」なら「4行目」をみる。この結果、交わったセルは「F4」なので、「F4」にある値「39」を"Sheet1"."A1"に返す。 また、これらコンボボックス（このシートとは別にテキストボックスを使うこともある）にはひとつずつchangeイベントでいきなり別シート("Sheet3")に書くコードが既に書いてあります。このセルから取り出すことも可能です。よろしくお願いします。

  • ASPの実行中にJavaScriptプロシージャを呼び出すには？？

    通常JavaScriptのプロシージャは、 各タグのonchangeなどのイベントで呼び出せますが、 ASPの処理実行中にプロシージャを呼び出すことは可能でしょうか？？ 可能でしたらその方法を教えてください。 よろしくお願いします。

  • VB.net 割り込みの禁止

    Borland C-Builder++の内容をVB.net 2010に書き換えて居る者です。 TextBox等の割り込みを一時的に禁止したいのですが、良い方法はありませんでしょうか。 無ければフラグを用いて、フラグが立っている時のみ処理をバイパスさせる事を考えて居ます。 Builder では ComboBox1->OnChange = NULL ; とコーディングする事により、 void __fastcall TForm1::ComboBox1Change(TObject *Sender) { Edit1->Text = ComboBox1->Text; } への割り込みを禁止出来、 ComboBox->OnChange = ComboBox1Change; とコーディングする事により割り込みを再開出来ました。 これを void __fastcall TForm1::ComboBoxChange(TObject *Sender) { 　　　　ComboBox1->OnChange = NULL ; Edit1->Text = ComboBox1->Text; 　　　　ComboBox->OnChange = ComboBox1Change; } とコーディングする事により、2重割り込みを防止していました。 VBでこの様にイベント割り込みを一時的に禁止にする方法はありますでしょうか。 宜しくご回答下さい。

  • inputタグのCSS化

    HTMLの1行テキストボックスで、 <input type="text" name="aaa" value="bbb" disabled="true" readonly="true"> と設定したいのですが、「disabled」と「readonly」をスタイルシートで書きたいのですが、記入方法が全く見当がつきません。また調べても記載方法までたどり着きません。 上記の記載方法を教えて下さい。よろしくお願いします。

    • ベストアンサー
    • HTML
  • Javascriptのdisabledで

    似たような質問があり、申し訳ありません。 前回私の説明不足で私の求めていた回答が無かったので 再度、詳しい説明をして質問します Javascriptで最初からdisabled状態のボタンを 一定時間秒後に有効化して、 2度押し防止(1回押すとdisabed化)で5秒後にページ移動がないと disabled解除にしたいのですが、どうすればいいでしょうか？ 簡単に順序を書くと 1.[disabled状態のボタンが存在する] 2.[一定時間経過するとdisabled状態のボタンが有効化] 3.[1回クリックするとボタンがdisabled化] 4.[5秒後にボタンのdisabled解除] としたいのですが、そこに補足があって <head>の中に記述するタイプで 複数のボタンに使えるタイプがいいんです。 なおかつ一定時間(30秒や15秒など)を個別設定したいんですが、 複雑すぎて、難しいのでどなたか教えてください。

  • コンボボックスの変更に応じてテキストボックスの有効を切り替える(ExcelVBA2007)

    お世話になります。 Excel VBA 2007で質問です。 今、 　Label1　ComboBox1　TextBox1 　Label2　ComboBox2　TextBox2 ・・・ 　Label100　ComboBox100　TextBox100 のようなフォームがあるとします。 ComboBox1～100は「Any」「is」「is not」のいずれかの値が取れ、初期値はAnyとします。 TextBox の Enabled プロパティの初期値は False とします。 やりたいことは、 ComboBox が「Any」でない場合（is または is not のいずれかの場合）にのみその右隣の TextBox の Enabled プロパティを True にしたいのです。 いま、ComboBox30 を Any から is に切り替えたとします。 すると、TextBox30.Enabled を False から True にしたいのです。 ここで、ComboBox30 を is から is not に切り替えたとします。 TextBox30.Enabled は True のままです。 ここで、ComboBox30 を is not から Any に切り替えたとします。 すると、TextBox30.Enabled を True から False にしたいのです。 ComboBox のイベントハンドラで Sub ComboBox30_Change () 　If ComboBox30.Value = "Any" Then 　　TextBox30.Enabled = "False" 　Else 　　TextBox30.Enabled = "True" 　End If End Sub のように書けばいいことは分かっているのですが、その場合は数字だけ変えたイベントハンドラを100個書かなければなりません。 このイベントハンドラを１個にすることはできるでしょうか。 （コンボボックス100個のうちどれかが変更されたら、変更されたコンボボックスの番号を知りながら呼び出されるハンドラ） 次善の策として、 Sub ComboBox30_Change () 　userSubroutine End Sub のように書くこともできるかと思いますが、この場合、どのコンボボックスが変更されたか（どのイベントハンドラが起動されたか）を知って、userSubroutine に渡さなければなりません。 よろしくお願いします！

  • javascriptからphpの呼び出し

    javascriptの初心者です。宜しくお願い致します。 php5で、開発していますが、javascriptからphpを呼んで、 結果をリアルタイムに画面に表示させる方法が分かりません。 【やりたい事】 １．画面上に、現在の日時を表示させる。 ２．5秒毎に、phpを呼び出し(DB接続し結果を取得)して、 　　その結果を、画面上に表示させる。 　　※DBへの接続は、javascript内ではやりたくありません。 下記に、現在時刻を表示するjavascriptがありますが、 この中で、5秒毎に、phpを呼び出したいのですが、 出来るのでしょうか？ </head> <script language="Javascript"> <!-- function time_disp() { d = new Date(); document.all.nowdate.value = d.toLocaleString(); window.setTimeout("time_disp()", 1000); } --> </script> <body onload="time_disp();"> <input type="text" name="nowdate" size="30" readonly> <input type="text" name="data1" readonly> ←phpから取得した値1 <input type="text" name="data2" readonly> ←phpから取得した値2 </body>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する