向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

背景：最近搞Raspberry Pi下的ajax从串口里取数据，需要7X24Hour，3秒一次,用chrome下的js分析工具发现内存有不断增加的情况，Raspberry Pi 512M。

    最近一哥们在做一个Ajax长连接的项目，页面需要和服务器保持长连接，而且在连接超时后需要重新请求连接，过程中他问我要用到什么，我也是想都没想就告诉他用jQuery。jQuery不是有ajaxSuccess ajaxError这些对象吗，在请求完成或者请求失败后重新请求不就好了。

但是后来他告诉我说没有用 jQuery，自己手工写的XMLhttprequest 。他告诉我说，开始是用jquery写的，而且在测试过程中也没有出现问题。但是在后来无意中发现，在页面开的时候久了之后，浏览器资源竟然占用非常高导致内存不足而崩溃了。后来抓包分析发现，每次jquery的Ajax请求都会创建一个xmlHttprequest对象，理论上讲，长连接的请求是一个无限递归，请求数量是非常大的，但是由于每次请求都会建立一个新的xmlhttprequest，而且jquery不会自动回收资源，所以导致了内存溢出。

通过查看jquery API，发现jquery还有一个 complete对象，是请求完成后回调函数 (请求成功或失败之后均调用)。 同时有两个参数XMLHttpRequest, textStatus。所以，我们只需要在请求完成后，将传回的XMLHttprequest对象手工回收即可，代码如下：
代码如下:
$.ajax({ url: "http://www.jb51.net", data: { name: "xxxx" }, dataType: "xml", success: function (data, textStatus) { //do something... }, complete: function (XHR, TS) { XHR = null } });


来自：http://www.jb51.net/article/30458.htm

原生态的写法如下：
    var xhr = new XMLHttpRequest();     xhr.open(/* method */ "POST",         /* target url */ "/upload"         /*, async, default to true */,true); //改为同步就按顺序了：否则文件传对了，但是Nginx文件的stat文件还存在。也就是说明这个nginx的断点模块可能对多进程同时上传同一文件不同分片的处理不是太好。     //xhr.setRequestHeader("Content-Length","100"); //这个设置没啥用处     //xhr.overrideMimeType("application/octet-stream");     xhr.setRequestHeader("Content-Type","application/octet-stream");     xhr.setRequestHeader("Content-Disposition", "attachment; filename=\"big.TXT\"");          startRange = start;//file.slice(0, 10);       endRange = end-1;  //bytes 0-9/81==>10-19     maxFileSizeFlag = fileSize -1;     if(endRange >= maxFileSizeFlag){       endRange=fileSize-1;     }     //xhr.setRequestHeader("Content-Length",endRange-startRange); //这是从0开始     xcontentrange = "bytes "+startRange+"-"+endRange+"/"+fileSize;     start = start + oneSliceLen;//下次分片范围头     end = end + oneSliceLen;//下次分片范围尾     //xhr.setRequestHeader("X-Content-Range", "bytes 0-9/81"); //这是从0开始     xhr.setRequestHeader("X-Content-Range", xcontentrange); //这是从0开始          xhr.setRequestHeader("Session-ID", sessionId);     xhr.send(packet);     delete packet;     xhr.onreadystatechange = function() {       if (xhr.readyState == 4) {         if (xhr.status == 200) {           console.log("upload complete");           //console.log("response: " + xhr.responseText);           //document.getElementById("responseText").textContent=document.getElementById("responseText").textContent+"\r\n"+xhr.responseText;           document.getElementById("file").value="";//清空file里的文件，防止重复提交，没有F5把全局变量清空引起上传的长度错误。           alert("提示：文件成功上传，传第二个文件时请重新F5刷新该页并重新选择文件后测试分片上传。");           start=0;         }         if (xhr.status == 201) {             //document.getElementById("responseText").textContent=document.getElementById("responseText").textContent+"\r\n"+xhr.responseText;         }     }     xhr.complete = function(){       xhr=null;     }

作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/8282/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！