重用 XMTHttpRequest 对象？答案

【问题标题】：Reusing XMTHttpRequest object?重用 XMTHttpRequest 对象？
【发布时间】：2015-03-09 10:06:50
【问题描述】：

我正在尝试重写一些 ajax 代码以使其更适合自动完成的需求。在这种情况下，您有时必须中止先前的请求，xhr.abort()，因此重用该 XMLHttpRequest 对象（我在此称为 xhr）感觉很自然。

我试图了解重用XMLHttpRequestobject 是个好主意还是坏主意。您能看出哪些优点和缺点？

PS：此重写将使用原生 ES6 风格的 Promise，因此它只能在较新的 Web 浏览器中运行。

【问题讨论】：

我不认为 xhr 对象的对象池对性能有很大帮助（网络是慢的部分），但您仍然可以尝试比较。
@Bergi：在这种情况下，我有 xhr 对象，可以立即重用它。（我的意思是，我对自动完成有新的输入。）因此开销比平时少，即不需要对象池。但是，是的，我可以计时，看看是否有任何收获。 :-)
我认为这里比速度性能更重要的是内存每次创建许多新的 XMLHttpRequest 对象时可能造成的泄漏或开销！

标签： javascript ajax xmlhttprequest-level2

【解决方案1】：

正如@Bergi 建议的那样进行时间测试：

function initCache(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url); xhr.send();
    console.log("Initialized cache");
}

function reuseXhr(url, numLoops) {
    var xhr = new XMLHttpRequest();
    for (var i=0; i<numLoops; i++) {
        xhr.open("get", url); xhr.send();
    }
    xhr.abort();
}

function newXhr(url, numLoops) {
    var xhr;
    for (var i=0; i<numLoops; i++) {
        xhr = new XMLHttpRequest();
        xhr.open("get", url); xhr.send(); xhr.abort();
    }
}
function testIt() {
    var url = "http://urlwithcors.com/"; // Pseudo-URL with CORS enabled
    var numLoops = 1000;
    initCache(url);
    setTimeout(function(){
        console.time("reuse"); reuseXhr(url, numLoops); console.timeEnd("reuse");
        console.time("new"); newXhr(url, numLoops); console.timeEnd("new");
    }, 5000);
}
testIt();

Chrome 中的结果是：

test-xhr-reuse.js:6 XHR finished loading: GET ...
reuse: 510.000ms
new: 386.000ms

所以...在慢速电脑上每次调用 0.1 毫秒，不值得麻烦...

现在等待 - 重用 xhr 甚至更慢......不值得。 ;-)

更多测试表明根本没有区别。这只是一个机会问题。

【讨论】：

您忘记将numLoops 传递给您的函数调用？
嗯，谢谢@Bergi。已更正。我绝对不是编码员。我从来没有读过我的代码。我只知道它应该做什么，它的结构，等等...... ;-)