和小伙伴聊天的时候聊到chrome浏览器下，一个页面最大并发请求限制只有6个的问题，突然灵光一闪。一个页面限制最大6个并发，那两个页面同时请求是不是就是12个？如果是的话，那么能不能通过多开标签页，然后通过页面间的消息通讯，达到突破6个并发请求的限制呢？
先说结论：不能，是我想多了！同一个域名的多个标签页，共用6个最大并发请求限制。
测试流程如下：
服务端建立实验接口，人为增加900毫秒延迟。前端打开index.html 和index2.html,两个页面同时发起100个请求。如果服务端接口处理方法中输出的信息能同时输出12个，那证明该方法可行。反之不能。
话不多说，上代码
服务端用的nodejs + Koa
const Koa = require('koa');
const Router = require('@koa/router');
const serve = require('koa-static');
const app = new Koa();
const http = require('http');
const router = new Router();
app.use(serve(__dirname + '/static'));
let n = 0;
router.get('/a', async (ctx, next) => {
await wait(900);
ctx.body = ++n;
console.log(n);
});
app
.use(router.routes())
.use(router.allowedMethods());
const httpServer = http.createServer(app.callback());
httpServer.listen(3000);
function wait(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
测试页面代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="open">open</button>
<script>
function get(popup){
fetch('./a')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson)
popup.postMessage(myJson, "*");
});
}
window.onload = function(){
let button = document.querySelector('#open');
button.addEventListener('click',o);
}
function o(){
var popup = window.open('./index2.html');
setTimeout(()=>{
let n = 100;
while(n--){
get(popup);
}
},2000)
}
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minimal working example</title>
</head>
<body>
<ul id="events"></ul>
<script>
function get(){
fetch('./a')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
}
function receiveMessage(event)
{
console.log('receive ',event.data);
}
window.onload = function(){
window.addEventListener("message", receiveMessage, false);
let n = 100;
while(n--){
get();
}
}
</script>
</body>
</html>
实验结果：
服务端接收到的请求还是6个一组。失败了。
网友评论