2012-02-22 132 views
5

jquery.loadを使用して約200のajaxリクエストを実行しているページがありますが、結果が取得されている間にブラウザがフリーズしているため、非常に非アジャスタな方法で動作しています。多くのajaxリクエストを実行すると、ブラウザがフリーズするのはなぜですか?

フリーズというのは、ブラウザーのコントロールが失われ、上下にスクロールすることができないということです。その後、すべてのリクエストが終了した時点ですべての結果が一度に表示されますが、ターゲットサーバのアクセスログを見てから、実際に結果を6つずつ(ブラウザで制御された「同じホスト」ポリシー)フェッチしています。

jquery.loadコマンドは "foreach"ループを使用して構築されていますが、ユーザーが読み込んだときにページのソースに既に書き込まれています(すべての目的と目的のために、ページがループが終了するのを待っているのとは異なります。最後の「症状」は、30回のリクエストであっても、問題はまったく同じです。

私にとっては奇妙なことですが、これを引き起こす可能性があり、どのように回避できるかというアイデアを探しています。すべての応答が戻ってユーザーがブラウザの制御を取り戻すまで、90〜100秒かかることがあるため、エンドユーザーにとっては間違いなく混乱しています。

は一つの小さなアップデート:

私は問題なく同時に周りの20の要求を行い、別のWebアプリケーションで実行されている非常によく似たコードを持っています。違いは、ページをフェッチするのではなく、サーバーにsshして、スクリプトを介してファイルシステム上のファイルを読み書きすることです。私は実際にはもう少しオーバーヘッドがあると思ったでしょうが、これらの問題はありません。

私が言ったように、20件のリクエストでも問題のコードと同じ問題が発生します。その純粋な推測でも、おそらくカールと関連していると思うように誘惑されます。

ここまで無限にコードが追加されました!

アプリに対する完全な背景はこれです。我々はCommerceアプリケーションを実行している世界で最も売れ行きの良いWebSphere AppServerのいくつかのクラスタを実行します。トラフィックの強さは、JVMがウォーミングされる前に単にアプリケーションサーバーにトラフィックを送り込むと、クラッシュすることを意味します。したがって、トラフィックを許可する前に主要なサーブレットをすべてプリコンパイルし、JVMを配分し、サーブレット・キャッシュの一部を移入するために、いくつかのキー・ページをヒットします。それで、トラフィックは問題なくサーバ上に来ることができ、うまく動作します。

CGIで書かれたアプリのバージョンは動作しましたが、同期のために非常に遅かったです。私たちはいくつかのクラスタで約10分間実行しています。同期要求であるため、アプリケーションサーバー上の1つのスレッドと1つのJDBC接続のみが使用されていました。

新しいWebアプリケーションの機能は、市場定義(国コード、言語コード、カタログIDなど)と結合して、必要なすべてのURLのリストを生成するために、これらのキーページのテンプレートを使用することですヒット。それらをすべて非同期的に実行するだけでなく、実行速度も向上し(現在では90秒しかかかりません)、JVMを比例配分し、スレッドを最大30個使用し、JDBCプールを最大限の接続数で開きます。したがって、私たちがトラフィックを許可するまでには、実質的に生産のような状態になります。だから私は結果に非常に満足していますが、このブラウザーのフリーズは純粋に化粧とパズル解決の観点から私を迷惑にしています。

だから、ユーザーは単純にアプリケーションサーバーを選択し、アプリケーションはどのクラスタからのものかを判断し、計算されたURLのリストを表示します。この時点で、ページは「Markets x Urls」の表であり、各セルは、jqueryが正しい結果を正しいセルに入れるために使用する一意のIDを持ちます(結果が返される順序を保証することはできません。

ユーザーが[Go]をクリックする準備ができた時点で、テーブルが作成され、jQueryコマンドが準備されました。jqueryスクリプトをクリックすると、jqueryスクリプトが次のように表示されます。実行され、URLのがヒットされ、それぞれのHTTPステータスコードを返すので、我々は、彼らが成功した知っている。

JQ部分が(短縮にわずか数の市場)のように見えます

$("a#submit").click(function(event) { 
    alert(" booya "); 
    $("#sesv-1").load("psurl.php?server=servera.domain.com&url=/se/sv"); 
    $("#sesv-2").load("psurl.php?server=servera.domain.com&url=/se/sv/catalog/productsaz/"); 
    $("#sesv-3").load("psurl.php?server=servera.domain.com&url=/se/sv/catalog/products/12345678"); 
    $("#sesv-4").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?storeId=14&productId=103406&StoreNumber=099&langId=-13&ddkey=http:StockSearch"); 
    $("#sesv-5").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?query=testProd&storeId=14&langId=-11&StoreNumber=011"); 
    $("#atde-1").load("psurl.php?server=servera.domain.com&url=/at/de"); 
    $("#atde-2").load("psurl.php?server=servera.domain.com&url=/at/de/catalog/productsaz/"); 
    $("#atde-3").load("psurl.php?server=servera.domain.com&url=/at/de/catalog/products/12345678"); 
    $("#atde-4").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?storeId=1&productId=103406&StoreNumber=114&langId=-99&ddkey=http:StockSearch"); 
    $("#atde-5").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?query=testProd&storeId=1&langId=-21&StoreNumber=273"); 
    $("#benl-1").load("psurl.php?server=servera.domain.com&url=/be/nl"); 
    $("#benl-2").load("psurl.php?server=servera.domain.com&url=/be/nl/catalog/productsaz/"); 
    $("#benl-3").load("psurl.php?server=servera.domain.com&url=/be/nl/catalog/products/12345678"); 
    $("#benl-4").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?storeId=18&productId=103406&StoreNumber=412&langId=-44&ddkey=http:StockSearch"); 
    $("#benl-5").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?query=testProd&storeId=18&langId=-23&StoreNumber=482"); 
    $("#befr-1").load("psurl.php?server=servera.domain.com&url=/be/fr"); 
    $("#befr-2").load("psurl.php?server=servera.domain.com&url=/be/fr/catalog/productsaz/"); 
    $("#befr-3").load("psurl.php?server=servera.domain.com&url=/be/fr/catalog/products/12345678"); 
    $("#befr-4").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?storeId=130&productId=103406&StoreNumber=048&langId=-73&ddkey=http:StockSearch"); 
    $("#befr-5").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?query=testProd&storeId=130&langId=-24&StoreNumber=482"); 
    $("#caen-1").load("psurl.php?server=servera.domain.com&url=/ca/en"); 
    $("#caen-2").load("psurl.php?server=servera.domain.com&url=/ca/en/catalog/productsaz/"); 
    $("#caen-3").load("psurl.php?server=servera.domain.com&url=/ca/en/catalog/products/12345678"); 
    $("#caen-4").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?storeId=30&productId=103406&StoreNumber=006&langId=-11&ddkey=http:StockSearch"); 
    $("#caen-5").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?query=testProd&storeId=30&langId=-15&StoreNumber=216"); 
    $("#cafr-1").load("psurl.php?server=servera.domain.com&url=/ca/fr"); 
    $("#cafr-2").load("psurl.php?server=servera.domain.com&url=/ca/fr/catalog/productsaz/"); 
    $("#cafr-3").load("psurl.php?server=servera.domain.com&url=/ca/fr/catalog/products/12345678"); 
    $("#cafr-4").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?storeId=33&productId=103406&StoreNumber=124&langId=-09&ddkey=http:StockSearch"); 
    $("#cafr-5").load("psurl.php?server=servera.domain.com&url=/webapp/wcs/stores/servlet/StockSearch?query=testProd&storeId=33&langId=-16&StoreNumber=216") 
    }); 
}); 
を生成しました

PS URLは404、200、500などで応答するカール要求機能で、関連するセルにデータを入力するために使用されます。

function getPage($url) { 
$options = array(
    CURLOPT_URL    => $url, 
    CURLOPT_RETURNTRANSFER => true,     // return web page 
    CURLOPT_HEADER   => true,     // return headers 
    CURLOPT_FOLLOWLOCATION => true,     // follow redirects 
    CURLOPT_ENCODING  => "",     // handle all encodings 
    CURLOPT_USERAGENT  => "pre-surf",   // who am i 
    CURLOPT_AUTOREFERER => true,     // set referer on redirect 
    CURLOPT_CONNECTTIMEOUT => 120,     // timeout on connect 
    CURLOPT_TIMEOUT  => 120,     // timeout on response 
    CURLOPT_MAXREDIRS  => 10,     // stop after 10 redirects 
    CURLOPT_POST   => 0,     // i am not sending post data 
    CURLOPT_SSL_VERIFYHOST => 0,     // don't verify ssl 
    CURLOPT_SSL_VERIFYPEER => FALSE,    // 
); 

$ch  = curl_init(); 
curl_setopt_array($ch, $options); 
$content = curl_exec($ch); 
$err  = curl_errno($ch); 
$errmsg = curl_error($ch) ; 
$header = curl_getinfo($ch); 
curl_close($ch); 

// $header['errno'] = $err; 
// $header['errmsg'] = $errmsg; 
// $header['content'] = $content; 
return $header['http_status_code']; 
} 
+15

「200 ajaxが要求します」その理由があります。 – BoltClock

+5

200のajaxリクエストは200のHTTPリクエストです...ブラウザで同時に200個のタブを開くのと同じように遅くなるのは不思議ではありません –

+0

これらのリクエストは数多くあるだけで同期していますか? –

答えて

5

ここでの問題はAjaxリクエストではありません。問題はそれぞれのリクエストがDOMを更新していることです。ブラウザを再描画すると、ブラウザがロックアップする原因となります。

あなたはDOMに頻繁に書き込まれないより良い解決策を見つける必要があります。

+0

あなたはdomの更新頻度を考えますか?すなわち、それらがお互いにどれほど近いか?私はいくつかの待ち行列/バッチメソッドを調べようとしましたが、実際に何か有用なものを見つけることはできませんでした。 90秒間の200件のリクエストは、毎秒2件のアップデートと似ています。しかし、約20-30回の更新が90秒間にわたって行われる場合、平均して3秒ごとにdomの3バイトの更新が行われますが、それでも問題は存在します。 – Seer

+2

@有用な情報がいくつかあります:http://wilsonpage.co.uk/preventing-layout-thrashing/彼が書いた 'fastdom'ライブラリを一度も使ったことはありませんが、更新するために使っている技術DOMが人気を集めています。 –

+0

非常に面白いトムに見えます - ありがとう – Seer

関連する問題