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

why does the browser freeze when executing many ajax requests?

本文关键字:浏览器 冻结 请求 ajax 执行 许多 为什么      更新时间:2023-09-26

我有一个页面,它使用jquery.load执行了大约200个ajax请求,但它的行为非常不符合ajax,因为在获取结果时浏览器被冻结了。

我所说的冻结是指失去对浏览器的控制,甚至无法上下滚动。然后,当它完成所有请求时,所有结果都会同时显示,但我知道它实际上是通过查看目标服务器的访问日志一次获取6个结果(浏览器控制的"同一主机"策略)。

尽管jquery.load命令是使用"foreach"循环构建的,但当用户加载页面时,它们已经被写入页面的源代码中(因此,出于所有目的,它们都可以单独手工编写),因此页面并不是在等待循环结束。最后一个"症状"是,即使只有30个请求,问题也是一样的。

所以这对我来说很奇怪,我正在寻找导致这种情况的原因以及如何解决的想法。这肯定会让最终用户感到困惑,尤其是因为可能需要90-100秒,直到所有响应都返回,用户才能重新控制浏览器。

一个小更新:

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

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

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

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

我们有一个用CGI编写的应用程序版本,它很有效,但由于同步,速度太慢了。我们正在讨论一些集群的运行时间约为10分钟。由于是同步请求,所以只使用了appserver上的一个线程和一个jdbc连接。

因此,新的网络应用程序所做的是使用这些关键页面的模板,与一系列市场定义(国家代码、语言代码、目录id等)相结合,生成所有需要点击的URL的列表。通过以异步方式访问所有线程,它不仅运行速度更快(现在只需90秒),而且在JVM的比例分配方面也做得更好,最多使用30个线程,并向其全部连接打开JDBC池。因此,当我们打开流量时,它确实处于类似生产的状态。所以我对结果很满意,但从纯粹的装饰和解谜的角度来看,这种浏览器冻结让我很恼火。

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

因此,当用户准备好单击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'];
}

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

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