利用 JavaScript 实现并发控制的示例代码


Posted in Javascript onDecember 31, 2020

一、前言

  在开发过程中,有时会遇到需要控制任务并发执行数量的需求。

  例如一个爬虫程序,可以通过限制其并发任务数量来降低请求频率,从而避免由于请求过于频繁被封禁问题的发生。

  接下来,本文介绍如何实现一个并发控制器。

二、示例

const task = timeout => new Promise((resolve) => setTimeout(() => {
  resolve(timeout);
 }, timeout))

 const taskList = [1000, 3000, 200, 1300, 800, 2000];

 async function startNoConcurrentControl() {
  console.time(NO_CONCURRENT_CONTROL_LOG);
  await Promise.all(taskList.map(item => task(item)));
  console.timeEnd(NO_CONCURRENT_CONTROL_LOG);
 }

 startNoConcurrentControl();

  上述示例代码利用 Promise.all 方法模拟6个任务并发执行的场景,执行完所有任务的总耗时为 3000 毫秒。

  下面会采用该示例来验证实现方法的正确性。

三、实现

  由于任务并发执行的数量是有限的,那么就需要一种数据结构来管理不断产生的任务。

  队列的「先进先出」特性可以保证任务并发执行的顺序,在 JavaScript 中可以通过「数组来模拟队列」

class Queue {
  constructor() {
   this._queue = [];
  }

  push(value) {
   return this._queue.push(value);
  }

  shift() {
   return this._queue.shift();
  }

  isEmpty() {
   return this._queue.length === 0;
  }
 }

  对于每一个任务,需要管理其执行函数和参数:

class DelayedTask {
  constructor(resolve, fn, args) {
   this.resolve = resolve;
   this.fn = fn;
   this.args = args;
  }
 }

  接下来实现核心的 TaskPool 类,该类主要用来控制任务的执行:

class TaskPool {
  constructor(size) {
   this.size = size;
   this.queue = new Queue();
  }

  addTask(fn, args) {
   return new Promise((resolve) => {
    this.queue.push(new DelayedTask(resolve, fn, args));
    if (this.size) {
     this.size--;
     const { resolve: taskResole, fn, args } = this.queue.shift();
     taskResole(this.runTask(fn, args));
    }
   })
  }

  pullTask() {
   if (this.queue.isEmpty()) {
    return;
   }

   if (this.size === 0) {
    return;
   }

   this.size++;
   const { resolve, fn, args } = this.queue.shift();
   resolve(this.runTask(fn, args));
  }

  runTask(fn, args) {
   const result = Promise.resolve(fn(...args));

   result.then(() => {
    this.size--;
    this.pullTask();
   }).catch(() => {
    this.size--;
    this.pullTask();
   })

   return result;
  }
 }

TaskPool 包含三个关键方法:

  • addTask: 将新的任务放入队列当中,并触发任务池状态检测,如果当前任务池非满载状态,则从队列中取出任务放入任务池中执行。
  • runTask: 执行当前任务,任务执行完成之后,更新任务池状态,此时触发主动拉取新任务的机制。
  • pullTask: 如果当前队列不为空,且任务池不满载,则主动取出队列中的任务执行。

利用 JavaScript 实现并发控制的示例代码

  接下来,将前面示例的并发数控制为2个:

const cc = new ConcurrentControl(2);

 async function startConcurrentControl() {
  console.time(CONCURRENT_CONTROL_LOG);
  await Promise.all(taskList.map(item => cc.addTask(task, [item])))
  console.timeEnd(CONCURRENT_CONTROL_LOG);
 }

 startConcurrentControl();

  执行流程如下:

利用 JavaScript 实现并发控制的示例代码

  最终执行任务的总耗时为 5000 毫秒。

四、高阶函数优化参数传递

await Promise.all(taskList.map(item => cc.addTask(task, [item])))

  手动传递每个任务的参数的方式显得非常繁琐,这里可以通过「高阶函数实现参数的自动透传」

addTask(fn) {
  return (...args) => {
   return new Promise((resolve) => {
    this.queue.push(new DelayedTask(resolve, fn, args));

    if (this.size) {
     this.size--;
     const { resolve: taskResole, fn: taskFn, args: taskArgs } = this.queue.shift();
     taskResole(this.runTask(taskFn, taskArgs));
    }
   })
  }
 }

改造之后的代码显得简洁了很多:

await Promise.all(taskList.map(cc.addTask(task)))

五、优化出队操作

  数组一般都是基于一块「连续内存」来存储,当调用数组的 shift 方法时,首先是删除头部元素(时间复杂度 O(1)),然后需要将未删除元素左移一位(时间复杂度 O(n)),所以 shift 操作的时间复杂度为 O(n)。

利用 JavaScript 实现并发控制的示例代码

  由于 JavaScript 语言的特性,V8 在实现 JSArray 的时候给出了一种空间和时间权衡的解决方案,在不同的场景下,JSArray 会在 FixedArray 和 HashTable 两种模式间切换。

  在 hashTable 模式下,shift 操作省去了左移的时间复杂度,其时间复杂度可以降低为 O(1),即使如此,shift 仍然是一个耗时的操作。

  在数组元素比较多且需要频繁执行 shift 操作的场景下,可以通过「reverse + pop」的方式优化。

const Benchmark = require('benchmark');
 const suite = new Benchmark.Suite;

 suite.add('shift', function() {
  let count = 10;
  const arr = generateArray(count);
  while (count--) {
   arr.shift();
  }
 })
 .add('reverse + pop', function() {
  let count = 10;
  const arr = generateArray(count);
  arr.reverse();
  while (count--) {
   arr.pop();
  }
 })
 .on('cycle', function(event) {
  console.log(String(event.target));
 })
 .on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
  console.log('\n')
 })
 .run({
  async: true
 })

通过 benchmark.js 跑出的基准测试数据,可以很容易地看出哪种方式的效率更高:

利用 JavaScript 实现并发控制的示例代码

  回顾之前 Queue 类的实现,由于只有一个数组来存储任务,直接使用 reverse + pop 的方式,必然会影响任务执行的次序。

  这里就需要引入双数组的设计,一个数组负责入队操作,一个数组负责出队操作。

class HighPerformanceQueue {
  constructor() {
   this.q1 = []; // 用于 push 数据
   this.q2 = []; // 用于 shift 数据
  }

  push(value) {
   return this.q1.push(value);
  }

  shift() {
   let q2 = this.q2;
   if (q2.length === 0) {
    const q1 = this.q1;
    if (q1.length === 0) {
     return;
    }
    q2 = this.q2 = q1.reverse();
   }

   return q2.pop();
  }

  isEmpty() {
   if (this.q1.length === 0 && this.q2.length === 0) {
    return true;
   }
   return false;
  }
 }

最后通过基准测试来验证优化的效果:

利用 JavaScript 实现并发控制的示例代码

到此这篇关于利用 JavaScript 实现并发控制的示例代码的文章就介绍到这了,更多相关js 并发控制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
jquery自定义组件实例详解
Dec 31 #jQuery
使用AutoJs实现微信抢红包的代码
Dec 31 #Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 #Vue.js
element 动态合并表格的步骤
Dec 31 #Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 #Vue.js
Selenium执行JavaScript脚本的方法示例
Dec 31 #Javascript
javascript实现随机抽奖功能
Dec 30 #Javascript
You might like
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php在线代理转向代码
2012/05/05 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
document.getElementById介绍
2011/09/13 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python解析多层json操作示例
2019/12/30 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
打架检讨书100字
2014/01/19 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
会计的岗位职责
2014/03/15 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
贷款承诺书
2015/01/20 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js