jQuery 並列load処理

質問

jQueryで、ページを構成する要素を並列で取得しようと考えています。

「/samples/heavy_function_parts1」
「/samples/heavy_function_parts2」
「/samples/heavy_function_parts3」
「/samples/heavy_function_parts4」
「/samples/heavy_function_parts5」
はそれぞれ、sleepして5秒後に現在時刻を返す処理となります。
下記のようなコードを書くと、div「Info5」が更新されるのが、ページ表示後
25秒後となります。
5秒後にすべての情報の更新が完了することを期待しているのですが、
どのように修正すべきでしょうか？

※FirefoxのLive HTTP headersを使ってログを取得してみると、リクエストは
同時に一つしか行われていない（リクエストが完了してから次のリクエストが
行われている）ようです。もしかしてWebブラウザの仕様だったりしますでしょうか？

<script type="text/javascript">
$(function(){
$("#Info1").load("/samples/heavy_function_parts1");
$("#Info2").load("/samples/heavy_function_parts2");
$("#Info3").load("/samples/heavy_function_parts3");
$("#Info4").load("/samples/heavy_function_parts4");
$("#Info5").load("/samples/heavy_function_parts5");
});
</script>
<div id="Info1">情報1</div>
<div id="Info2">情報2</div>
<div id="Info3">情報3</div>
<div id="Info4">情報4</div>
<div id="Info5">情報5</div>

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

>loadを並列で実行したとしてもそれはキューにたまるだけであり、通信自体はシリアルで行われているのかなという気もしてきました。

$.load()ではなく、No.1で書かれているように$.ajax()を直接呼び出してみるとどうでしょうか。
（引数の指定の仕方などが変わるようです）
手元にあるver.1.42のコードを読んでみると、戻り値がXHRオブジェクトのようですので、場合によってはXHRオブジェクトを直接操作して、動作確認できるかもしれません。
（別途タイマーを用意して、XHRオブジェクトのreadystateが2や3（通信中）になってるかどうかなど）

なお、複数のリクエストを同時に行うこと自体は可能です。
私は自作ライブラリを使用していますが、4～8個（この個数はブラウザの設定による）まで、同時リクエストが可能です。

私からの情報はこの辺りまでですね。
$.ajax()で作成したXHRオブジェクトを直接.open()や.send()するなどの方法もあるでしょうけど、
そこまで行くとライブラリを使うメリットが無くなるかもです。

回答No.2

神崎 渉瑠（@taloo）

以下のいずれかでどうでしょうか？
括弧の対応が間違ってたらすみません、適宜調整してください。

(1)--------------------
<div id="Info1">情報1</div>
<div id="Info2">情報2</div>
<div id="Info3">情報3</div>
<div id="Info4">情報4</div>
<div id="Info5">情報5</div>

<script type="text/javascript">
//window.onloadを待たず、直接呼び出す
$("#Info1").load("/samples/heavy_function_parts1");
$("#Info2").load("/samples/heavy_function_parts2");
$("#Info3").load("/samples/heavy_function_parts3");
$("#Info4").load("/samples/heavy_function_parts4");
$("#Info5").load("/samples/heavy_function_parts5");
</script>

(2)--------------------
<script type="text/javascript">
//$();を５回呼び出す
$(function(){$("#Info1").load("/samples/heavy_function_parts1");});
$(function(){$("#Info2").load("/samples/heavy_function_parts2");});
$(function(){$("#Info3").load("/samples/heavy_function_parts3");});
$(function(){$("#Info4").load("/samples/heavy_function_parts4");});
$(function(){$("#Info5").load("/samples/heavy_function_parts5");});
</script>
<div id="Info1">情報1</div>（以下略）

(3)--------------------
<script type="text/javascript">
//$()ではなく$(document).ready()を使用する
$(document).ready(function(){
$("#Info1").load("/samples/heavy_function_parts1");
$("#Info2").load("/samples/heavy_function_parts2");
$("#Info3").load("/samples/heavy_function_parts3");
$("#Info4").load("/samples/heavy_function_parts4");
$("#Info5").load("/samples/heavy_function_parts5");
});
</script>
<div id="Info1">情報1</div>（以下略）

(4)--------------------
<script type="text/javascript">
//$(document).ready()を５回呼び出す
$(document).ready(function(){$("#Info1").load("/samples/heavy_function_parts1");});
$(document).ready(function(){$("#Info1").load("/samples/heavy_function_parts1");});
（字数制限により以下略）

>No.1
何秒後に更新するのではなく、「５つのリクエストを同時に行う」のが目的だと思います。

お礼

1～4のそれぞれについて試してみました。
結果はどれも同じで、前のリクエストの結果を受信してから次のリクエストが行われるという形で、時間はどれも25秒かかることとなりました。

ちょっと調べてみるとjavascript自体はシングルスレッドとのことで、loadを並列で実行したとしてもそれはキューにたまるだけであり、通信自体はシリアルで行われているのかなという気もしてきました。

回答No.1

yyr446

jQueryの$.load()は、同じくjQueryの$.ajax()のラッパーのはずです。
$.ajax()では、デフォルトでasync:true　(非同期)です。つまりそれぞれの通信を待たずにレスポンスを受信しだい、それぞれのコールバック関数が非同期に実行されます。

　クライアント側とサーバー側のオーバーヘッド時間及び通信回線のスループットによって処理完了までの時間は毎回異なります。

　従いまして、ご質問のような、「5秒後にすべての情報の更新が完了することを期待」を実装は不可能ではないでしょうか．．．

お礼

オーバーヘッド等があるのは承知しています。
5秒を多少超えてもかまいません。
少なくとも上記コードでは非同期処理にも関わらず、通信部分においては前の通信が完了するまで待機しているように思えます。
回避する手段があればお教えいただければと思います。