利用 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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
关于延迟加载JavaScript
May 05 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
angular+webpack2实战例子
May 23 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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
php使用function_exists判断函数可用的方法
2014/11/19 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue实现拖拽效果
2019/12/23 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python生成带有表格的图片实例
2019/02/03 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
自我评价是什么
2014/01/04 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2015年劳动部工作总结
2015/05/23 职场文书