เขียนแบบทดสอบของฉันเอง ทดสอบโค้ดบน 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();
});
ใช้งานได้กับเว็บไซต์ส่วนใหญ่ที่สามารถทริกเกอร์เหตุการณ์การเปลี่ยนแปลงผู้อ่านในเวลาที่ต่างกัน (aka: flushing)
ฉันสังเกตเห็นบนเซิร์ฟเวอร์ node.js ของฉันที่ฉันต้องส่งออกอย่างน้อย 1,025 ไบต์เพื่อทริกเกอร์เหตุการณ์ / ล้าง มิฉะนั้นเหตุการณ์ก็จะทำให้ทั้งสามสถานะพร้อมกันเมื่อคำขอเสร็จสมบูรณ์ดังนั้นนี่คือแบ็กเอนด์ของฉัน:
var app = require('express')();
app.get("/", function(req,res) {
res.write(Array(1025).join("a"));
setTimeout(function() {
res.end("a");
},500);
});
app.listen(80);
ปรับปรุง
ฉันสังเกตเห็นว่าตอนนี้คุณสามารถขอได้มากถึง 2x หากคุณใช้ทั้ง xhr และ fetch API ในเวลาเดียวกัน
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();
});