私自身のテストを書きました。コードをstackoverflowでテストしたところ、正常に動作し、chrome / FFが6を実行できることがわかりました
var change = 0;
var simultanius = 0;
var que = 20; // number of tests
Array(que).join(0).split(0).forEach(function(a,i){
var xhr = new XMLHttpRequest;
xhr.open("GET", "/?"+i); // cacheBust
xhr.onreadystatechange = function() {
if(xhr.readyState == 2){
change++;
simultanius = Math.max(simultanius, change);
}
if(xhr.readyState == 4){
change--;
que--;
if(!que){
console.log(simultanius);
}
}
};
xhr.send();
});
さまざまなタイミングで readystate 変更イベントをトリガーできるほとんどの Web サイトで機能します。（別名：フラッシング）
node.js サーバーで、イベント/フラッシュをトリガーするために少なくとも 1025 バイトを出力する必要があることに気付きました。そうしないと、リクエストが完了したときにイベントが 3 つの状態すべてを一度にトリガーするだけなので、ここに私のバックエンドを示します。
var app = require('express')();
app.get("/", function(req,res) {
res.write(Array(1025).join("a"));
setTimeout(function() {
res.end("a");
},500);
});
app.listen(80);
アップデート
xhr と fetch api の両方を同時に使用している場合、最大 2x のリクエストを使用できるようになりました。
var change = 0;
var simultanius = 0;
var que = 30; // number of tests
Array(que).join(0).split(0).forEach(function(a,i){
fetch("/?b"+i).then(r => {
change++;
simultanius = Math.max(simultanius, change);
return r.text()
}).then(r => {
change--;
que--;
if(!que){
console.log(simultanius);
}
});
});
Array(que).join(0).split(0).forEach(function(a,i){
var xhr = new XMLHttpRequest;
xhr.open("GET", "/?a"+i); // cacheBust
xhr.onreadystatechange = function() {
if(xhr.readyState == 2){
change++;
simultanius = Math.max(simultanius, change);
}
if(xhr.readyState == 4){
change--;
que--;
if(!que){
document.body.innerHTML = simultanius;
}
}
};
xhr.send();
});