質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

8251閲覧

ajaxを繰り返し実行しても重くならない方法

katsuobushi

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/10/16 01:21

編集2016/10/16 09:55

###前提・実現したいこと
setIntervalとajaxを使い、1秒おきにCSVファイルを取得しているのですが、ajaxが実行されるたびにブラウザが重くなって困っております。
※読み込むCSVファイルは1秒おきに内容が更新されます。

###発生している問題・エラーメッセージ
ChromeのDeveloperToolsのTimelineでMemoryを調べてみたら
ajaxが実行されるたびにJS Heapが17816、 Listenersが2ずつ増えていました。
ajaxを何回実行してもブラウザが重たくらならないようにする方法がありましたら教えていただけないでしょうか。
よろしくお願い致します。

###該当のソースコード

var intervalID; var count = 0; intervalID = setInterval(function(){loadCSV();},1000); function loadCSV(){ $.ajax({ url: "csv/num.csv", dataType:"text", timeout:500 }).done(function(data,textStatus,jqXHR){ count++; $(".trace").text("["+count+"]"+" "+data); }).fail(function(data){ $(".trace").text("fail"); }); }

###試したこと
ajaxの代わりにXMLHttpRequestを使ったら、JS Heapは増えていきますがListenersが無駄に増えるようなことはありませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
jquery:jquery-2.1.4
browser:Google Chrome 53.0.2785.143

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

popobot

2016/10/16 07:12 編集

状況がよくわかりません。手元でajaxを0.1秒ごとに動かしてみましたが、普通に動いていました(なおレスポンスは現在時間のみ)。重いとは具体的にどのような状態を指しているのでしょうか? 重い原因としてメモリを疑っていますが、CPUは余裕があるということですか?JS Heapが増えるとのことですが、減ることはないということですか?(GCが動けば減ると思いますが、メモリリークしている?)レスポンスのCSVのサイズはどのぐらいなのでしょうか?
kei344

2016/10/16 08:31

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
katsuobushi

2016/10/16 09:53

icchiiさん ご指摘ありがとうございます。 DeveloperToolsで開いてから600s分調べたのですが JS Heapが上がり、その後上がった分の9割ほど下がるのですが、これを繰り返すので総合的に見るとJS Heapがどんどん増えておりました。 Listenersは下がらず増える一方。 しかし、読み込むファイル数を1秒間に10個に増やしてみたところJS HeapとListenersがしっかり下がっているのが確認できました! 読み込むCSVファイル(90byte)が軽すぎてメモリが解放されなかっただけなのかもしれません。 ブラウザが重たくなると言うのは私の勝手な思い込みでした。長時間動かす予定なので「このままJS Heapが増え続けたらメモリが足りなくなり動かなくなってしまう!!」と。 私の調べ方が甘かったです。 2週間ほど悩んでいたのでとてもとても助かりました。 ありがとうございます!
katsuobushi

2016/10/16 09:54

kei344さん ご指摘ありがとうございます!
guest

回答2

0

setIntervalは指定した処理の途中でも指定インターバルで新たにスレッドを作成します。
提示のコードの場合、loadCsvが終わらないうちに次のloadCsvスレッドが作成されているのではと思います。
代わりにsetTimeoutで行ってみてはいかがでしょうか。
※コードは参考です。動作確認してません

javascript

1var count = 0; 2loadCSV(); 3 4function loadCSV(){ 5 $.ajax({ 6 url: "csv/num.csv", 7 dataType:"text", 8 timeout:500 9 }).done(function(data,textStatus,jqXHR){ 10 count++; 11 $(".trace").text("["+count+"]"+" "+data); 12 setTimeout(loadCSV,1000); 13 }).fail(function(data){ 14 $(".trace").text("fail"); 15 }); 16}

投稿2016/10/16 07:20

fromageblanc

総合スコア2724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

katsuobushi

2016/10/16 10:10

fromageblancさん ご回答ありがとうございます! 調査時間が少なかったのが原因のようです。 読み込むファイル数を1秒間に10個に増やして600s間調べてみたところJS HeapとListenersがしっかり下がっているのが確認できました。 しかし、通信状況によってはloadCSVが終わる前に次のloadCSVが実行されてしまうかもしれないですし、この方法でしたら安心です。 使わせていただきますね。 ありがとうございます。
guest

0

自己解決

私の調査時間が少なかったのが原因のようです。
ガベージコレクションはすぐにはされないと言うことですね。
勉強になりました。

icchiiさま
kei344さま
fromageblancさま
ありがとうございました。

投稿2016/10/16 10:21

katsuobushi

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問