- PR -

JavaScriptの処理速度について

1
投稿者投稿内容
hal
会議室デビュー日: 2003/09/02
投稿数: 18
投稿日時: 2003-09-26 12:57
halと申します。お世話になっております。

質問させてください。
インターネットオプションのインターネット一時ファイルの設定を『ページを表示する毎に確認する』にすると、クライアントサイドスクリプトの処理速度が著しく低下してしまいます。

現象としましては上記条件で<div>タグでJavaScriptを内蔵したハイパーリンクをクリックすると処理待ち状態(タイトルバー、ステータスバーにポインタを置くと矢印砂時計、ステータスバーには『残り…項目』と出ます)になったままサーバーサイドの処理に移行しません。(スクリプトが処理しきっていない?)

端末によって現状が起こるものと起こらないものがあるので、内蔵しているスクリプトの処理の重さに原因があるのかとも考えましたが、当方の開発環境(XP、IE6)以下の環境(98、IE4)では動作します。

また、インターネット一時ファイルの設定によるのでキャッシュ制御の問題かとも考えましたが、キャッシュが効いているのでスクリプトの処理が遅くなるといった事はありえるのでしょうか?

長々とすみません。
もし上記のような現象に経験のある方、又は何か心当たりのある方がいらっしゃいましたら教えてください。よろしくお願いします。
ぴで
大ベテラン
会議室デビュー日: 2002/10/10
投稿数: 123
お住まい・勤務地: 東京
投稿日時: 2003-09-29 00:57
引用:
現象としましては上記条件で<div>タグでJavaScriptを内蔵したハイパーリンクをクリックすると処理待ち状態(タイトルバー、ステータスバーにポインタを置くと矢印砂時計、ステータスバーには『残り…項目』と出ます)になったままサーバーサイドの処理に移行しません。(スクリプトが処理しきっていない?)

端末によって現状が起こるものと起こらないものがあるので、内蔵しているスクリプトの処理の重さに原因があるのかとも考えましたが、当方の開発環境(XP、IE6)以下の環境(98、IE4)では動作します。

「自動的に確認」にすると普通に動くのでしょうか?
アンカーからJavaScriptを呼び出しているようですが、
どのように記述しているのでしょう?
href="・・・" ? onclick="・・・" ?
スクリプト内で何をやっているか分からないため何ともいえませんが。

引用:
また、インターネット一時ファイルの設定によるのでキャッシュ制御の問題かとも考えましたが、キャッシュが効いているのでスクリプトの処理が遅くなるといった事はありえるのでしょうか?

「ページを表示する毎に確認する」の場合、Webサーバに更新確認が行われるため、
ページ中に画像とかのコンテンツが多いと結構時間かかります。
(ネットワーク環境にもよりますが。)
hal
会議室デビュー日: 2003/09/02
投稿数: 18
投稿日時: 2003-09-29 10:54
レスありがとうございます。

引用:

「自動的に確認」にすると普通に動くのでしょうか?
アンカーからJavaScriptを呼び出しているようですが、
どのように記述しているのでしょう?
href="・・・" ? onclick="・・・" ?
スクリプト内で何をやっているか分からないため何ともいえませんが。



はい。インターネット一時ファイルの設定を
・IEを起動するごとに確認する
・自動的に確認する
・確認しない
にすれば正常に動きます。

アンカーからのJavaScriptの起動Webフォームのハイパーリンクを使い、その中にaspxファイルから直接<div>タグを仕込んでみました。

<asp:hyperlink id="hlk2" runat="server" Font-Underline="True" ForeColor="Blue">
  <DIV id="div" onmouseover="MouseOver(this);return true" style="DISPLAY:inline; HEIGHT: 23px" onclick="Select1(2)" onmouseout="MouseOut(this)" ms_positioning="FlowLayout">@@@@@</DIV>
</asp:hyperlink>

少々強引ではありますが。

引用:

「ページを表示する毎に確認する」の場合、Webサーバに更新確認が行われるため、
ページ中に画像とかのコンテンツが多いと結構時間かかります。
(ネットワーク環境にもよりますが。)



確かに大量の画像(1つ1つは小さいですが)設定しているので時間がかかるというのはいえるかも知れません。しかしその後条件文を入れるなどして必要最小限の処理しか走らせないようにしたのですが、頻度は確かに少なくなりましたが同一の現象が起こってしまいます。
出来れば「ページを表示する毎に確認する」を無効化したいのですが、アプリ側(サーバ側)の記述で無効化する事とか出来ますか?(キャッシュの無効化?)
ぴで
大ベテラン
会議室デビュー日: 2002/10/10
投稿数: 123
お住まい・勤務地: 東京
投稿日時: 2003-09-29 13:03
引用:
アンカーからのJavaScriptの起動Webフォームのハイパーリンクを使い、その中にaspxファイルから直接<div>タグを仕込んでみました。

<asp:hyperlink id="hlk2" runat="server" Font-Underline="True" ForeColor="Blue">
  <DIV id="div" onmouseover="MouseOver(this);return true" style="DISPLAY:inline; HEIGHT: 23px" onclick="Select1(2)" onmouseout="MouseOut(this)" ms_positioning="FlowLayout">@@@@@</DIV>
</asp:hyperlink>

これってDIV使わずに
<asp:hyperlink id="hlk2" runat="server" Font-Underline="True" ForeColor="Blue" onmouseover="MouseOver(this);return true" style="DISPLAY:inline; HEIGHT: 23px" onclick="Select1(2)" onmouseout="MouseOut(this)" ms_positioning="FlowLayout">
@@@@@</asp:hyperlink>
ではダメなのでしょうか?

アンカーにURLを設定していないなら(コードで設定してるかもしれませんが)、
DIVのみで書くとか。

DIVのonclikとアンカーの処理が二重に走ってないですよね?

引用:
確かに大量の画像(1つ1つは小さいですが)設定しているので時間がかかるというのはいえるかも知れません。しかしその後条件文を入れるなどして必要最小限の処理しか走らせないようにしたのですが、頻度は確かに少なくなりましたが同一の現象が起こってしまいます。

キャッシュの更新確認なので画像サイズは関係なく、その数が問題となります。
画像1つ1つにリクエスト(数十byte)が投げられるため、数が多ければそのオーバヘッドが
無視できなくなり体感速度が遅くなります。

引用:
出来れば「ページを表示する毎に確認する」を無効化したいのですが、アプリ側(サーバ側)の記述で無効化する事とか出来ますか?(キャッシュの無効化?)

クライアント側の設定はプログラムでは変更できません。
キャッシュを無効化するともっと遅くなると思います。

スクリプトでどんな処理をしているか分かりませんが、
画像を無くした場合にどうなるかを確認し、問題点の切り分けをすればよいと思います。
画像を少なくして現象が出ないようであれば、単にデザインの問題です。
hal
会議室デビュー日: 2003/09/02
投稿数: 18
投稿日時: 2003-09-29 17:12
ぴでさん、レスありがとうございます。

引用:

これってDIV使わずに
<asp:hyperlink id="hlk2" runat="server" Font-Underline="True" ForeColor="Blue" onmouseover="MouseOver(this);return true" style="DISPLAY:inline; HEIGHT: 23px" onclick="Select1(2)" onmouseout="MouseOut(this)" ms_positioning="FlowLayout">
@@@@@</asp:hyperlink>
ではダメなのでしょうか?



…すみません。Divなんか使わなくても全然大丈夫ですね。それでOKでした。

引用:

アンカーにURLを設定していないなら(コードで設定してるかもしれませんが)、
DIVのみで書くとか。

DIVのonclikとアンカーの処理が二重に走ってないですよね?



Webフォームのハイパーリンク処理で画面遷移させ(実際は別フレームに遷移先の画面を表示させ)、JavaScriptのonclickイベントで自画面の表示をコントロール(フォルダーイメージを開いたイメージのものに差し替える)という事をしているのでhtmlのソースを見たところ「DIVのonclikとアンカーの処理が二重に」という状況になっています。これがそもそも問題なのでしょうか…。

こんな感じです。
<a href="…?">
<div onclick="〜">@@@</div>
</a>

引用:
キャッシュの更新確認なので画像サイズは関係なく、その数が問題となります。
画像1つ1つにリクエスト(数十byte)が投げられるため、数が多ければそのオーバヘッドが
無視できなくなり体感速度が遅くなります。

クライアント側の設定はプログラムでは変更できません。
キャッシュを無効化するともっと遅くなると思います。

スクリプトでどんな処理をしているか分かりませんが、
画像を無くした場合にどうなるかを確認し、問題点の切り分けをすればよいと思います。
画像を少なくして現象が出ないようであれば、単にデザインの問題です。



画像の切り替え処理を削除したところ、現象は起きませんでした。やはり上で書いた問題とはまた別に画像の切り替えの多さが問題になっているのは間違いなさそうです。

[ メッセージ編集済み 編集者: hal 編集日時 2003-09-29 17:16 ]
ぴで
大ベテラン
会議室デビュー日: 2002/10/10
投稿数: 123
お住まい・勤務地: 東京
投稿日時: 2003-09-29 17:41
引用:
Webフォームのハイパーリンク処理で画面遷移させ(実際は別フレームに遷移先の画面を表示させ)、JavaScriptのonclickイベントで自画面の表示をコントロール(フォルダーイメージを開いたイメージのものに差し替える)という事をしているのでhtmlのソースを見たところ「DIVのonclikとアンカーの処理が二重に」という状況になっています。これがそもそも問題なのでしょうか…。

こんな感じです。
<a href="…?">
<div onclick="〜">@@@</div>
</a>


普通、HTML上でネストしているオブジェクトでのイベントは、
下位レベルから上位へとイベントバブルしますが、
アンカーの場合は特殊なような気がします。

素直に
<a href="JavaScript:syori();">@@@</a>
としてやって、
function syori(){
画面遷移処理;
自画面の表示をコントロール;
}
と書くのが自然なような気がします。

いずれにせよ画像が多ければ遅いのには変わりないですが。
hal
会議室デビュー日: 2003/09/02
投稿数: 18
投稿日時: 2003-09-30 12:19
引用:

普通、HTML上でネストしているオブジェクトでのイベントは、
下位レベルから上位へとイベントバブルしますが、
アンカーの場合は特殊なような気がします。

素直に
<a href="JavaScript:syori();">@@@</a>
としてやって、
function syori(){
画面遷移処理;
自画面の表示をコントロール;
}
と書くのが自然なような気がします。

いずれにせよ画像が多ければ遅いのには変わりないですが。



そうですね。
サーバ処理とクライアント処理を混在させるのは見ていてもすっきりしないので画面編集から遷移処理まで全てJavaScriptでまとめようと思います。

画像の多さによる処理速度の低下に関してはデザインの問題ということで考えたいと思います。

ありがとうございました。
1

スキルアップ/キャリアアップ(JOB@IT)