2

オートコンプリートのニーズによりよく適合するように、いくつかの ajax コードを書き直そうとしています。そのような状況では、以前のリクエストを中止しなければならない場合があるため、そのオブジェクトxhr.abort()を再利用するのはかなり自然なことです(ここで呼び出しました)。XMLHttpRequestxhr

オブジェクトを再利用することが良い考えか悪い考えかを理解しようとしていXMLHttpRequestます。どのような長所と短所を見ることができますか?

PS: この書き換えでは、ネイティブの ES6 スタイルの Promise を使用するため、新しい Web ブラウザーでのみ実行できます。

4

1 に答える 1

2

@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

だから...遅いPCでの呼び出しごとに0.1ミリ秒、それは面倒な価値はありません...

今待ってください-xhrを再利用するのはさらに遅くなります...それだけの価値はありません。;-)

もう少しテストすると、まったく違いがないことがわかります。それは偶然の問題です。

于 2015-01-11T16:06:51.687 に答える