Chrome下,能否通过打开指向同一个域名的多个标签页,突破最大并发数的限制?

和小伙伴聊天的时候聊到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个一组。失败了。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):