为什么浏览器在执行许多ajax请求时会冻结？

时间：2012-02-22 15:38:36

标签： javascript jquery ajax

我有一个页面正在使用jquery.load执行大约200个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列表。此时页面是'Markets x Urls'的表格，每个单元格都有一个唯一的id，jquery用它将正确的结果放在正确的单元格中（因为我们不能保证结果返回的顺序 - 我们也不想，因为这会让我们再次回到同步领域。

因此，在用户准备单击Go的时候，将编写表并准备好jQuery命令。点击go后，执行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'];
}

1 个答案:

答案 0 :(得分：5)

这里的问题不是Ajax请求，问题是这些请求中的每一个都在更新DOM。浏览器重绘是导致浏览器锁定的原因。

您需要找到一个不经常写入DOM的更好的解决方案。

相关问题
最新问题