一、背景
开发Web平台时,经常会需要定时向服务器轮询获取数据状态,并且通常不仅只开一个轮询,而是根据业务需要会产生数个轮询。这种情况下,性能低下的Ajax长轮询已经不能满足需求,频繁的访问数据库还会造成线程阻塞。最优的解决方案当然是用Websocket,采用服务器推送的方式来减少频繁开关连接造成的开销。但是Websocket对于我来说还只是个新事物,在未完成论证的情况下不能直接开发完就上,因此只好采用过渡方案,使用队列的方式,暂时优化多AJax长轮询的情况下造成的线程阻塞问题。
我所用的Web平台框架是国产开源的DWZ框架。该框架不使用经典的iframe模式,所有的视图、数据访问都是通过Ajax获取后在前台进行加载渲染,页面迁移跳转极少,因此本质上来说基于DWZ框架的网页都是Single Page页面。在这种情况下,除了长轮询外,还会根据用户的操作产生其它Ajax链接。这就要求在优化的同时,还要保证用户操作的优先度。毕竟长轮询只是后台默认执行的操作,对用户的体验影响不大;但用户的操作因为长轮询造成延迟的话,用户体验就十分糟糕。
综上所述,优化Ajax轮询造成的线程阻塞问题的过渡方案中,有以下两点要求:
1.使用Ajax队列的方式,不推倒现有的技术方案,在原有的基础上快速修改。
2.在Ajax队列优化过程中,必须保证用户操作的优先度,保证用户操作的及时响应。
二、代码解析
// 所有ajax请求都注册到DNE.LoadingAjax的ajax程序池中,排队发起请求,ajax结束时删除. DNE.LoadingAjax = { jqAjax : $.ajax, requests: {}, // ajax对象集合 globalAjaxPool: [], // 全局ajax程序池 unglobalAjaxPool: [], // 非全局ajax程序池 interval: null, // ajax循环定时器 runningType: null, // 正在运行的Ajax类型 1:全局 2:非全局 runningId: null,// 正在运行的AjaxId // 注册Ajax到程序池中 PushAjaxPool: function (request, options) { var urlComplete = request.complete; var requests = this.requests; var id = (request.tabId) ? request.tabId : request.url; // 请求结束时,删除ajax对象 request.complete = this.deleteAjax(urlComplete, id); // 将请求放到ajax程序池中 var requestObj = { id: id, request: request, options: options }; if (request.global) { // 如果是全局ajax this.globalAjaxPool.push(requestObj); } else { // 如果不是全局ajax this.unglobalAjaxPool.push(requestObj); } if (!this.interval) { this.interval = window.setInterval(function () { var loadingAjax = DNE.LoadingAjax; // 如果当前有全局Ajax未运行,则停止正在运行的非全局Ajax if (loadingAjax.runningType != 1 && loadingAjax.globalAjaxPool.length > 0) { if (loadingAjax.runningType == 2 && loadingAjax.runningId) { loadingAjax.ajaxAbort(id); } // 运行最末尾的全局Ajax var reqObj = loadingAjax.globalAjaxPool.pop(); loadingAjax.runAjax(reqObj); } else { // 如果当前没有正在执行的Ajax,并且非全局Ajax程序池中有对象 if (loadingAjax.runningType == null && loadingAjax.unglobalAjaxPool.length > 0) { // 运行最末尾的非全局Ajax var reqObj = loadingAjax.unglobalAjaxPool.pop(); loadingAjax.runAjax(reqObj); } } }, 100); } }, // 删除Ajax deleteAjax: function (urlComplete, id) { if (urlComplete && typeof (urlComplete) == "function") { urlComplete(); } var loadingAjax = DNE.LoadingAjax; if (loadingAjax.requests[id]) { delete loadingAjax.requests[id]; } // 如果程序池中已无请求,则清空ajax循环定时器 if (loadingAjax.globalAjaxPool.length <= 0 && loadingAjax.unglobalAjaxPool.length <= 0) { loadingAjax.interval = null; } // 如果当前请求结束,则重置正在运行的Ajax类型及AjaxId loadingAjax.runningType = null; loadingAjax.runningId = null; }, // 执行Ajax runAjax: function (reqObj) { var jqXHR = this.jqAjax(reqObj.request, reqObj.options); this.requests[reqObj.id] = jqXHR; }, // 停止Ajax ajaxAbort: function (id) { var jqXHR = this.requests[id]; if (jqXHR) { jqXHR.abort(); delete this.requests[id]; } } }; $(function () { $.extend({ ajax: function (url, options) { // 所有ajax都注册到ajax程序池中 DNE.LoadingAjax.PushAjaxPool(url, options); } }); });
【Javascript】解决Ajax轮询造成的线程阻塞问题(过渡方案)
原文:http://www.cnblogs.com/nonkicat/p/5105033.html