JavaScriptの実行が遅くなる 対策＆実行結果
昨日のJavaScriptが勝手に停止する件ですが、1.の再帰的呼び出しのコードを極力、最小限に抑えるよう(最終的には、再帰呼び出しは完全になくした)にコーディングを変更したら、メモリ消費が劇的に削減されました。
また、コーディングの修正にあたりinnerHTMLの処理も逐一追加していたのを最後に代入するように修正しました。innerHTMLを頻繁に更新するのは、レンダリング処理に負担がかかるのは、2週間前ほどから知っていたのですが、10秒ごとのインターバルでHTTPRequest処理を行っていたので、負担は無視してもいいかなと、思ってました。下記は、変更前と変更後のコーディングイメージです。
変更前のコーディングイメージ
TimeInterval(引数){
XMLHTTPRequest();//この関数内でouput.innerHTML += result;
setTimeout(function(){
TimeInterval(引数);},10000);
}
変更後のコーディングイメージ
While(Request数){
result = XMLHTTPRequest();
result += result;
}
output.innerHTML = result;
結論的には、勝手に停止するのは、大量のメモリ消費か、innerHTMLによるレンダリング処理が原因のようですでした。(証拠を捉えました。詳細は、次のブログで)
3.のwindow.CollectGarbageは結局、メモリをほとんど消費していなかったので、今回は使用しませんでした。2.の明示的にnullを設定するも、今回、行っていません。
前回のデバッガーを使用していると速く停止する件は、デバッガーの「ネットワーク」を「実行」していると、メモリの消費が確認できたので、これが原因だったようです。
タスクマネージャで確認したところ、Internet Explorerのプロセスが、２つ存在していました。
１つは、ブラウザ用で、もう１つはデバッガ用で、見落としていました。デバッガ用のメモリを現在途中経過を確認したところ、そんなに急に増えていません。約300MB消費しています。
あと、1点注意があります。変更後の最後にinnerHTMLに蓄積した実行結果を一気に代入していますが、この場合でも画面表示にそれなりに時間がかかりました。300行のデータを反映するのに10秒～20秒ほどかかりました(体感速度)。不具合だと思い、あやうく画面を閉じかけました(^^;。プアなグラボというのもあるかもしれませんが、約19,000文字の文字だけの表示なのにレンダリング、遅いです。。。
5/30追記 result変数の文字列連結がinnerHTML使用していた時より、遅いです。現在、調査中です。
5/31追記 原因：innerHTML、対応方法：変数の文字列で確定です。(5/30追記は、コーディングミスでした。すみません。)
6/8追記 原因：innerHTML、対応方法：textContentを使用する。データは、生のままです。htmlのタグは変換してくれません。本当に確定です。
最終的にsetTimeoutによるインターバル処理を外した理由は、XMLHTTPRequest処理が平均約100～200ミリ秒で処理されているので、わざわざインターバル処理を行わなくても、Google Maps APIの制限が10リクエスト/秒なので、問題ないと判断したため。
今日もがじがじっと～♪
