為什么執行許多ajax請求時瀏覽器會凍結？

Question

我有一個頁面正在使用jquery.load執行大約200個ajax請求，但它的行為方式非常不像ajax，因為在獲取結果時瀏覽器被凍結了。

凍結是指失去對瀏覽器的控制，甚至無法上下滾動瀏覽器。 然后，當所有請求完成時，結果全部立即顯示，但是我知道它實際上是通過觀察目標服務器的訪問日志來一次獲取結果6（瀏覽器控制的“相同主機”策略）。

盡管jquery.load命令是使用“ foreach”循環構建的，但是當用戶加載時，它們已經被寫入頁面的源了（因此，出於所有意圖和目的，它們都可以單獨手寫），因此它不像頁面正在等待循環完成。 最后一個“症狀”是，即使只有30個請求，問題也一樣。

所以這對我來說很奇怪，我正在尋找有關可能導致這種情況以及如何解決的想法。 這絕對會讓最終用戶感到困惑，特別是因為可能需要90到100秒的時間才能返回所有響應並且用戶重新獲得對瀏覽器的控制。

一個小更新：

我在另一個webapp中運行的代碼非常相似，該代碼同時處理大約20個請求，而沒有任何問題。 不同之處在於，它不是在獲取頁面，而是通過服務器將其ssh'到服務器並讀取/更新文件系統上的文件。 我本來以為實際上會增加一些開銷，但是卻沒有這些問題。

正如我已經說過的那樣，即使20個請求也會導致所討論的代碼出現相同的問題...所以我很容易想到其卷曲可能與之相關...盡管純粹是猜測。

更大的更新現在具有無限更多的代碼！！！

應用程序的完整背景是這樣。 我們運行着世界上一些流量最高的WebSphere AppServer的集群，這些集群正在運行我們的Commerce應用程序。 流量的強度意味着，如果我們僅在JVM預熱之前讓流量進入應用服務器，它們就會崩潰！ 因此，在允許流量通過之前，我們先打了幾個關鍵頁面，因為這會預編譯所有主要的servlet，按比例分配JVM，並填充一些servlet緩存。 然后，流量可以毫無問題地進入服務器，並且運行良好。

我們有一個用CGI編寫的應用程序版本，雖然可以運行，但是由於同步太慢了。 我們正在談論在某些群集上運行10分鍾。 由於是同步請求，因此僅使用了appserver上的一個線程和一個jdbc連接。

因此，新的Webapp要做的就是使用這些關鍵頁面的模板，並與一堆市場定義（國家代碼，語言代碼，商品目錄ID等）結合，以生成所有需要點擊的URL的列表。 通過異步擊中它們，它不僅運行速度更快（現在僅需90秒），而且在分配JVM方面做得更好，最多使用30個線程，並打開JDBC池進行全部連接。 因此，當我們允許流量通過時，它實際上已經處於生產狀態。 因此，我對結果感到非常滿意，但是從純粹的美觀和解決難題的角度來看，這種瀏覽器凍結使我很煩。

因此，現在有了一些代碼，用戶只需選擇一個應用服務器，該應用就可以確定它來自哪個群集，並顯示它將命中的計算URL的列表。 此時，該頁面是一張“市場x Urls”表格，每個單元格都有一個唯一ID，jquery會使用該ID將正確的結果放在正確的單元格中（因為我們無法保證結果返回的順序-我們也不想這樣做，這又使我們又回到了同步領域。

因此，在用戶准備單擊Go的那一刻，將編寫表並准備jQuery命令。 單擊后，將執行jquery腳本並單擊URL，並為每個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'];
}

Answer 1

這里的問題不是Ajax請求，問題在於這些請求中的每個請求都在更新DOM。 瀏覽器重繪是導致瀏覽器鎖定的原因。

您需要找到一個不會經常寫入DOM的更好的解決方案。