前端需不需要控制并发请求?浏览器自带并发控制?

不知道为什么,最近大数据给我推荐了几篇前端做控制并发的文章,技术实现是没任何问题,使用到的技术核心也不错,就是应用的地方就有点问题了。

浏览器 HTTP 请求 pending

打开浏览器,network 可以看每个请求的状态,正常来说,pending 表示请求已经发起,等待后端响应。

而现代浏览器,当一个浏览器对同一域名的并发连接数达到限制时,额外的请求会被浏览器暂时搁置,这些请求还未发送到服务器。正常来说浏览器都是 6 个。当请求少于 6 个了才会继续发起下一个请求。所以有一个优化就是用不同域名进行请求,一般也就分开静态资源和接口不同域名。

所以那些应用在控制请求并发的文章,个人觉得没太大意义。如果核心是分享前端如何创建一个池子和释放,那就另说。

代码验证

node 启动一个测试接口

// server.js

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true);
  const pathname = parsedUrl.pathname;
  const method = req.method;

  res.setHeader('Content-Type', 'application/json');
  res.setHeader('Access-Control-Allow-Origin', '*');

  if (method === 'GET' && pathname === '/') {
    res.statusCode = 200;
    console.log('Have connect: ' + parsedUrl.query.index);
    setTimeout(() => {
      res.end(JSON.stringify({ message: 'Hello World!' }));
    }, 6000)
  } else if (method === 'POST' && pathname === '/data') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
      const data = JSON.parse(body);
      res.statusCode = 200;
      res.end(JSON.stringify({ message: `You sent: ${JSON.stringify(data)}` }));
    });
  } else {
    res.statusCode = 404;
    res.end(JSON.stringify({ message: 'Not Found' }));
  }
});

server.listen(port, hostname, () => {
  console.log(`Server is running at http://${hostname}:${port}/`);
});

js 调用(数量可以随便定)

function getHello(index) {
  axios.get("http://127.0.0.1:3000?index=" + index).then((res) => {
    console.log(res);
  });
}

for (let i = 0; i < 100; i++) {
  getHello(i);
}

看接口的输出,很容易就能看见,每隔 6 秒钟,接口才能接受到请求,而浏览器看 network 是 100 个请求同时发出,都是 pending 状态。

控制并发,池子创建和释放

那些文章想要的其实也很简单,就是把一系列的任务放到一个数组,运行到某个任务,就从池子里面释放,当同时存在 N 个任务的时候就等候,一个任务完成了继续从池子里面取任务。

  const concurrency = 6;
  let taskList = [];
  let activeCount = 0;
  const task = (index) => {
    const time = getRandomTime(1, 9);
    console.log(`task:${index}--${taskList.length}`);
    setTimeout(() => {
      activeCount--;
      taskOver();
    }, time);
  };

  const getRandomTime = (min, max) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomInt * 1000;
  };

  const taskOver = () => {
    if (taskList.length > 0 && activeCount < concurrency) {
      activeCount++;
      const taskItem = taskList.shift();
      taskItem.task(taskItem.index);
    }
  };

  for (let i = 0; i < 100; i++) {
    taskList.push({
      index: i,
      task: task,
    });
  }

  for (let i = 0; i < concurrency; i++) {
    taskOver();
  }

如果时间设置成固定值,控制台输出就很有规律,6 个一组。如果真的要用到控制并发,实际逻辑应该会更复杂,如果拿来控制请求的并发,还是算了。

### 关于 UiBot 浏览器插件的相关信息 #### 下载与安装 UiBot 的浏览器插件能够增强 RPA 机器人的功能,使其可以更高效地处理基于 Web 的任务。为了下载并安装 UiBot 浏览器插件,通常需要访问官方提供的资源页面或通过 UiBot 自带的市场获取最新版本的插件[^2]。 对于 Chrome 用户来说,在打开扩展程序管理界面后,可以通过加载已解压好的插件包来完成安装;而对于 Firefox 用户,则可以直接从附加组件商店中搜索并添加该插件。不过具体的操作步骤可能会随着不同浏览器更新而有所变化。 #### 开发指南 开发自定义的 UiBot 浏览器插件涉及到对 JavaScript 和其他前端技术的理解。开发者可以根据需求创建新的功能模块,并将其集成到现有的 UiBot 平台当中去。UiBot 提供了一套 API 接口用于实现网页交互逻辑以及数据抓取等功能。 ```javascript // 示例:使用 UiBot API 进行简单的网页元素点击操作 await Browser.ClickElementByXPath("//button[@id='submit']"); ``` #### 使用教程 当成功安装好 UiBot 浏览器插件之后,用户便可以在编写自动化脚本时调用相应的命令来进行诸如登录网站、填写表单等常见任务。详细的使用说明一般会包含在产品手册内或是在线帮助文档里,这些资料可以帮助初学者快速上手。 #### 配置方法 配置过程主要包括设置代理服务器参数(如果必要)、调整兼容模式选项等内容。某些情况下可能还需要修改浏览器的安全策略以允许外部应用程序对其进行控制。具体的配置项取决于所使用的浏览器种类及其版本号。 #### 常见问题及解决方案 - **无法正常启动插件**:确认是否已经正确安装了最新的驱动程序和服务端组件; - **遇到权限错误提示**:检查是否有足够的管理员权限运行此应用; - **性能表现不佳**:尝试减少并发请求的数量或将复杂度较高的计算移至后台线程执行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值