求几千个ajax请求导致chrome崩溃的解决办法

2012-02-27 15:02:17 +08:00
 qiayue
我现在在做一个小工具,后端根据表单提交的要求生成几千个结果,以html形式返回,前端在onload之后逐个结果发送ajax请求向服务器获取该结果的其他信息。
现在测试发现,很容易导致浏览器崩溃。

所以我想问各位,有没有好的解决办法?

一个类似的例子是查询友链,你输入hao123.com之后提交,后端抓取hao123.com的代码分析找出所有的站外链接,以列表形式返回。onload之后,逐条链接发送ajax请求去查看对方的pr值、是否回链等等。当一个网站的站外链接过多时,就会有很多的ajax请求被发出,导致chrome崩溃。

我现在只测试了chrome.
9210 次点击
所在节点    问与答
17 条回复
aristotle9
2012-02-27 15:29:29 +08:00
化零为整,减少请求;使用http长连接;使用比较轻量级的web socket.同一个时间内不超过两个ajax请求.
短时间内一个页面需要几千个ajax怎么想都是设计上有问题吧,浏览器的资源会迅速地被消耗掉,而且服务器能承受吗.
windylcx
2012-02-27 15:32:08 +08:00
几千个。
qiayue
2012-02-27 15:37:07 +08:00
@aristotle9
应该是设计的问题吧,因为我不知道像这种情况的一般处理办法是怎样,所以只能根据我自己所知的,一个一个发送。
我现在用setInterval控制150毫秒发送一个请求,我测试到了三千多的时候就会崩溃,如果200毫秒发送一次,则可以到四千多
iwege
2012-02-27 15:38:46 +08:00
纯前端么?这种几千多个的请求为啥不在后台缓存?
gaocheng
2012-02-27 15:39:21 +08:00
这个真心没法解决,想办法减少请求数吧
Aben
2012-02-27 15:44:18 +08:00
取回来的是list,ajax的时候为什么要一条一条来呢?发list到后台去请求不好吗?
qiayue
2012-02-27 15:45:36 +08:00
@iwege 因为要实时的结果,那个结果每一秒都有可能变化,而且结果数量级极大,我们无法预知用户会查询哪一个,所以没办法缓存,不过用户已经查询过一次的,会缓存一小段时间。
qiayue
2012-02-27 15:47:44 +08:00
@Aben 我们目前正在测试一次发送一小段list过去,但肯定没办法把整个list发送过去,因为到了后端,也是需要一个一个去获取结果,list太大,用户就需要等待很长时间。
chone
2012-02-27 16:01:27 +08:00
同时发那么多request,可以考虑做个结构来发起请求,限制同时能发起的数量,剩下的暂缓。
类似于connection pool那样
benzhe
2012-02-27 16:09:32 +08:00
如果崩溃的原因是累积了处理的大量ajax请求,那想办法让页面刷新一下就好了吧?
tux
2012-02-27 16:55:20 +08:00
把所有的AJAX请求,合并成一条,发到服务器上,用服务器再去获取数据,然后一次返回给用户。
qiayue
2012-02-27 17:00:52 +08:00
@tux 刚开始设计成这样就是因为在服务器那里,也是需要一条一条去查询的,即使每条查询只消耗0.1秒,那么1000条就需要100秒,相当于就是说用户需要提交表单之后,需要100秒才能把结果页面load进来,没有人愿意等的。
所以设计成在前端用ajax去获取,这样虽然总时间也是需要100秒,但是每一秒用户都能看到又完成一点了,又有几条查完了,这给用户的感觉是不一样的。
iwege
2012-02-27 17:13:29 +08:00
@qiayue

这种请求感觉最好后台来做,你可以让client和你的server维护一个长连接来处理这种请求。
前端一个页面有3000个ajax已经是很恐怖了。目前还没见过哪个这么处理过的...
chuangbo
2012-02-27 17:16:49 +08:00
不知道你有没有测试过,浏览器并发几千个 ajax,到底后端同时接收到了几个?

RFC规定,浏览器同时对一个域名最大只能保持两个连接。
http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4

所以我建议写个队列几个几个的发,ajax 开多了其实也都是在浏览器上排队。
soulhacker
2012-02-27 17:24:13 +08:00
没理解错的话,你是页面生成时已经有了所有的 items,然后每个 item 都需要到后台请求它对应的 detail 信息?

假定这个场景是必须的,那么你需要一个页面上的 AJAX request queue(请求队列),类似这样的可能是有帮助的: http://stackoverflow.com/questions/5601143/how-to-implement-an-ajax-request-queue-using-jquery
qiayue
2012-02-27 17:30:33 +08:00
@chuangbo 可能浏览器自己做了队列吧,返回的结果是没问题的,也就是说后端都接到了

@soulhacker 是的,情况就是这样,正在看stackoverflow
arzusyume
2012-02-27 18:07:36 +08:00
做成异步,写一个setInterval('xxx',100),当一条ajax请求结束后设置一个状态码,xxx中检查状态码如果空闲则执行下一条ajax并挂起

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/28261

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX