今天项目测试发现的ajax请求阻塞

今天在对项目做性能分析时发现,js代码中同时发出的多个异步请求耗时很长,查看服务器处理时间发现,每个请求的响应都在毫秒级,但是页面请求的响应时间却在1秒左右,百思不得其解,后来仔细测试发现,这个并发的ajax请求虽然是同时进入的服务器,但是各自的处理时间却存在彼此等待的情况,每个请求的时间处理时间都为几毫秒,但是却在等待上一个请求的结束才开始处理,

后来查资料发现以下tips:

xmlhttp存在最大并发数,ajax设计应有所斟酌

这次认真的测试了三种浏览器(ie/firefox/opera)的xmlhttp并发行为,发现如果用户同时发出很多xmlhttp 异步请求,那么浏览器不是一股脑全把请求发出去,而是存在一个最大并发数。我的机器测试发现,ie和ff里面是2,opera是4。

所以说,在设计一个站点时,让ajax页面同时载入数十个xmlhttp请求不是明智的做法。在考虑减少接口耦合的同时,也应该斟酌速度问题。实际上,可以使用某些细化的设计,可以把多种请求绑定到一起发送,从而达到优化的目的。

Ajax并发

  Ajax是以异步的方式向服务器提交需求,这就会存在多个ajax请求同时提交,或者迭代提交的情况,这将导致资源竞争(racing),设计较好的情况下,可以通过disable提交按钮的缓解此类问题,但一旦出现迭代提交request的情况,就可能出现XMLHttpRequest对象的引用被覆盖,但具体会发生什么样的情况,取决于Ajax的编码。

   Ajax在异步的情况下,并发数并非没有限制,Wininet 会限制每个服务器的连接数,限制它对单个 HTTP 服务器的同时连接的数量。如果超过此限制时,请求将阻止,直到完成当前的连接之一。这是设计使然,是与 HTTP 规范和行业标准。例如IE8并发数就限制在2,Firefox 21限制在6。当然IE的限制可以在注册表中修改,HKEY_LOCAL_MACHINE\SOFTWARE\  Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_MAXCONNECTIONSPERSERVER。

 

ersion HTTP 1.0 server (broadband connection) HTTP 1.1 server (broadband connection) HTTP 1.0 server (dial-up connection) HTTP 1.1 server (dial-up connection)
Internet Explorer 7 and earlier 4 2 4 2
Internet Explorer 8 6 6 4 2

  超出上述限制,超出的请求将会被浏览器阻塞,直到先前的请求已经完成才会启动。在这里建立使用队列来解决这些问题。基本思路,生成XHR对象之后,检测当前并发数量是否大于最大请求的上限,若大于上限,则将XHR对象压入队列之中,否则就可以直接发送,并且可以继续增加并发请求数量。请求完成的时候,进行响应处理,并在结束之时进行并发数量减一操作,接着就可以检测队列中是否有等待请求,若有等待请求,就发送给队首的XHR对象进行请求。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Spring Boot项目中发送Ajax请求,可以使用jQuery的ajax函数。首先,需要在HTML页面中引入jQuery库,然后在JavaScript代码中使用ajax函数发送请求。下面是一个示例代码: ```javascript $.ajax({ type: "POST", url: "/api/myEndpoint", data: JSON.stringify({param1: "value1", param2: "value2"}), contentType: "application/json", success: function(data) { console.log(data); }, error: function(jqXHR, textStatus, errorThrown) { console.log("Error: " + textStatus + " - " + errorThrown); } }); ``` 上面的代码中,我们使用POST方法向"/api/myEndpoint"发送了一个JSON格式的数据对象。在成功时,控制台将打印响应数据。在失败时,控制台将打印错误信息。 在后台,我们可以使用Spring Boot的@RestController注解定义一个RESTful API端点,接收和处理这个请求。例如: ```java @RestController @RequestMapping("/api") public class MyController { @PostMapping("/myEndpoint") public String handleRequest(@RequestBody MyDataObject data) { // 处理请求,并返回响应数据 return "Hello, " + data.getParam1() + " and " + data.getParam2() + "!"; } public static class MyDataObject { private String param1; private String param2; // 省略getter和setter方法 } } ``` 上面的代码中,我们使用@PostMapping注解定义了一个接收POST请求的API端点"/api/myEndpoint",并使用@RequestBody注解将请求数据映射为MyDataObject对象。然后,我们处理请求,并返回一个字符串响应。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值