javascript - 为什么浏览器在执行许多 ajax 请求时会死机？

Question

我有一个使用 jquery.load 执行大约 200 个 ajax 请求的页面，但它以非常非 ajax 的方式运行，因为在获取结果时浏览器被卡住。

卡住是指失去对浏览器的控制，甚至无法上下滚动。然后，当它完成所有请求时，结果会立即全部显示出来，但我知道它实际上是通过观察目标服务器的访问日志一次获取 6 个结果(浏览器控制的“同一主机”策略)。

尽管 jquery.load 命令是使用“foreach”循环构建的，但它们已经在用户加载页面时写入页面的源代码(因此对于所有意图和目的，它们都可以单独手写)，因此它不像页面正在等待循环完成。最后一个“症状”是，即使只有 30 个请求，问题也一样。

所以这对我来说很奇怪，我正在寻找可能导致这种情况以及如何解决的想法。这对最终用户来说绝对是令人困惑的，尤其是因为在所有响应都返回并且用户重新获得对浏览器的控制之前可能需要 90-100 秒。

一个小更新:

我在另一个 webapp 中运行了非常相似的代码，它同时执行大约 20 个请求而没有问题。不同之处在于，它不是获取页面，而是通过 ssh 连接到服务器并通过脚本读取/更新文件系统上的文件。我原以为这实际上会有更多的开销，但它没有这些问题。

正如我所说 - 即使是 20 个请求也会导致有问题的代码出现同样的问题......所以我很想认为它可能与 curl 相关......尽管它纯粹是猜测。

更大的更新现在有无限多的代码!!!

应用程序更完整的背景是这样的。我们运行了一些世界上流量最高的 WebSphere AppServer 的集群，这些服务器正在运行我们的 Commerce 应用程序。流量的强度意味着，如果我们只是在 JVM 预热之前让流量进入应用程序服务器，它们就会崩溃!所以我们在允许流量打开之前点击了几个关键页面，因为这会预编译所有主要的 servlet，调整 JVM 的比例，并填充一些 servlet 缓存。然后流量可以毫无问题地进入服务器，并且它们运行良好。

我们有一个用 CGI 编写的应用程序版本，它可以工作，但由于是同步的，所以速度很慢。我们正在谈论在某些集群上运行 10 分钟。由于是同步请求，因此只使用了应用服务器上的一个线程和一个 jdbc 连接。

所以新的 webapp 所做的是使用这些关键页面的模板，结合一堆市场定义(国家代码、语言代码、目录 ID 等)来生成所有需要点击的 URL 的列表。通过以异步方式访问它们，它不仅运行得更快(现在只需要 90 秒)，而且还可以更好地分配 JVM，使用多达 30 个线程并将 JDBC 池打开到其全部连接数。因此，当我们允许交通时，它真的处于类似生产的状态。所以我对结果非常满意，但从纯粹的装饰和解谜的 Angular 来看，这种浏览器卡住让我很恼火。

所以现在有一些代码，用户只需选择一个应用程序服务器，应用程序决定它来自哪个集群，并显示它将命中的计算 URL 列表。此时页面是一个“市场 x Urls”表，每个单元格都有一个唯一的 id，jquery 用它来将正确的结果放在正确的单元格中(因为我们不能保证结果返回的顺序 -我们也不想这样做，因为这会让我们再次回到同步领域。

因此，当用户准备好单击 Go 时，将写入表格并准备好 jQuery 命令。单击 go 时，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 只是一个 curl 请求函数，它响应 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。