如何利用JavaScript实现并发控制

 一、前言

成都创新互联专业为企业提供靖安网站建设、靖安做网站、靖安网站设计、靖安网站制作等企业网站建设、网页设计与制作、靖安企业网站模板建站服务，十年靖安做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

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

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

二、示例

 
 
 
 
    
  
  
  
  
  1. const task = timeout => new Promise((resolve) => setTimeout(() => {    
    2.   
  
  
  
  2.    resolve(timeout);    
    3.   
  
  
  
  3.  }, timeout))      
    4.   
  
  
  
  4.  const taskList = [1000, 3000, 200, 1300, 800, 2000];     
    5.   
  
  
  
  5.  async function startNoConcurrentControl() {    
    6.   
  
  
  
  6.    console.time(NO_CONCURRENT_CONTROL_LOG);    
    7.   
  
  
  
  7.    await Promise.all(taskList.map(item => task(item)));   
    8.   
  
  
  
  8.    console.timeEnd(NO_CONCURRENT_CONTROL_LOG);    
    9.   
  
  
  
  9.  }    
    10.   
  
  
  
  10.  startNoConcurrentControl();   
    11.

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

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

三、实现

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

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

 
 
 
 
    
  
  
  
  
  1. class Queue {    
    2.   
  
  
  
  2.     constructor() {    
    3.   
  
  
  
  3.       this._queue = [];    
    4.   
  
  
  
  4.     }      
    5.   
  
  
  
  5.     push(value) {    
    6.   
  
  
  
  6.       return this._queue.push(value);    
    7.   
  
  
  
  7.     }      
    8.   
  
  
  
  8.     shift() {    
    9.   
  
  
  
  9.       return this._queue.shift();    
    10.   
  
  
  
  10.     }    
    11.   
  
  
  
  11.     isEmpty() {    
    12.   
  
  
  
  12.       return this._queue.length === 0;   
    13.   
  
  
  
  13.     }    
    14.   
  
  
  
  14.   }   
    15.

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

 
 
 
 
    
  
  
  
  
  1. class DelayedTask {    
    2.   
  
  
  
  2.     constructor(resolve, fn, args) {    
    3.   
  
  
  
  3.       this.resolve = resolve;    
    4.   
  
  
  
  4.       this.fn = fn;    
    5.   
  
  
  
  5.       this.args = args;    
    6.   
  
  
  
  6.     }    
    7.   
  
  
  
  7.   }   
    8.

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

 
 
 
 
    
  
  
  
  
  1. class TaskPool {    
    2.   
  
  
  
  2.     constructor(size) {    
    3.   
  
  
  
  3.       this.size = size;    
    4.   
  
  
  
  4.       this.queue = new Queue();   
    5.   
  
  
  
  5.     }      
    6.   
  
  
  
  6.     addTask(fn, args) {    
    7.   
  
  
  
  7.       return new Promise((resolve) => {    
    8.   
  
  
  
  8.         this.queue.push(new DelayedTask(resolve, fn, args));  
    9.   
  
  
  
  9.         if (this.size) {    
    10.   
  
  
  
  10.           this.size--;    
    11.   
  
  
  
  11.           const { resolve: taskResole, fn, args } = this.queue.shift();    
    12.   
  
  
  
  12.           taskResole(this.runTask(fn, args));    
    13.   
  
  
  
  13.         }    
    14.   
  
  
  
  14.       })    
    15.   
  
  
  
  15.     }    
    16.   
  
  
  
  16.     pullTask() {    
    17.   
  
  
  
  17.       if (this.queue.isEmpty()) {    
    18.   
  
  
  
  18.         return;    
    19.   
  
  
  
  19.       }    
    20.   
  
  
  
  20.       if (this.size === 0) {    
    21.   
  
  
  
  21.         return;    
    22.   
  
  
  
  22.       }    
    23.   
  
  
  
  23.       this.size++;    
    24.   
  
  
  
  24.       const { resolve, fn, args } = this.queue.shift();    
    25.   
  
  
  
  25.       resolve(this.runTask(fn, args));    
    26.   
  
  
  
  26.     }   
    27.   
  
  
  
  27.      runTask(fn, args) {    
    28.   
  
  
  
  28.       const result = Promise.resolve(fn(...args));    
    29.   
  
  
  
  29.        result.then(() => {   
    30.   
  
  
  
  30.         this.size--;    
    31.   
  
  
  
  31.         this.pullTask();    
    32.   
  
  
  
  32.       }).catch(() => {    
    33.   
  
  
  
  33.         this.size--;    
    34.   
  
  
  
  34.         this.pullTask();  
    35.   
  
  
  
  35.        })    
    36.   
  
  
  
  36.        return result;   
    37.   
  
  
  
  37.     }    
    38.   
  
  
  
  38.   }   
    39.

TaskPool 包含三个关键方法：

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

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

 
 
 
 
    
  
  
  
  
  1. const cc = new ConcurrentControl(2);      
    2.   
  
  
  
  2.   async function startConcurrentControl() {    
    3.   
  
  
  
  3.     console.time(CONCURRENT_CONTROL_LOG);    
    4.   
  
  
  
  4.     await Promise.all(taskList.map(item => cc.addTask(task, [item])))    
    5.   
  
  
  
  5.     console.timeEnd(CONCURRENT_CONTROL_LOG);    
    6.   
  
  
  
  6.   }      
    7.   
  
  
  
  7.   startConcurrentControl();   
    8.

执行流程如下：

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. addTask(fn) {   
    2.   
  
  
  
  2.     return (...args) => {    
    3.   
  
  
  
  3.       return new Promise((resolve) => {    
    4.   
  
  
  
  4.         this.queue.push(new DelayedTask(resolve, fn, args));   
    5.   
  
  
  
  5.          if (this.size) {    
    6.   
  
  
  
  6.           this.size--;    
    7.   
  
  
  
  7.           const { resolve: taskResole, fn: taskFn, args: taskArgs } = this.queue.shift();    
    8.   
  
  
  
  8.           taskResole(this.runTask(taskFn, taskArgs));    
    9.   
  
  
  
  9.         }    
    10.   
  
  
  
  10.       })    
    11.   
  
  
  
  11.     }    
    12.   
  
  
  
  12.   }   
    13.

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

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

五、优化出队操作

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. const Benchmark = require('benchmark');    
    2.   
  
  
  
  2.   const suite = new Benchmark.Suite;      
    3.   
  
  
  
  3.   suite.add('shift', function() {    
    4.   
  
  
  
  4.     let count = 10;    
    5.   
  
  
  
  5.     const arr = generateArray(count);    
    6.   
  
  
  
  6.     while (count--) {    
    7.   
  
  
  
  7.       arr.shift();    
    8.   
  
  
  
  8.     }   
    9.   
  
  
  
  9.   })   
    10.   
  
  
  
  10.   .add('reverse + pop', function() {    
    11.   
  
  
  
  11.     let count = 10;    
    12.   
  
  
  
  12.     const arr = generateArray(count);    
    13.   
  
  
  
  13.     arr.reverse();    
    14.   
  
  
  
  14.     while (count--) {    
    15.   
  
  
  
  15.       arr.pop();    
    16.   
  
  
  
  16.     }    
    17.   
  
  
  
  17.   })    
    18.   
  
  
  
  18.   .on('cycle', function(event) {    
    19.   
  
  
  
  19.     console.log(String(event.target));    
    20.   
  
  
  
  20.   })    
    21.   
  
  
  
  21.   .on('complete', function() {    
    22.   
  
  
  
  22.     console.log('Fastest is ' + this.filter('fastest').map('name'));    
    23.   
  
  
  
  23.     console.log('\n')    
    24.   
  
  
  
  24.   })    
    25.   
  
  
  
  25.   .run({    
    26.   
  
  
  
  26.     async: true    
    27.   
  
  
  
  27.   })   
    28.

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

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

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

 
 
 
 
    
  
  
  
  
  1. class HighPerformanceQueue {    
    2.   
  
  
  
  2.    constructor() {    
    3.   
  
  
  
  3.      this.q1 = []; // 用于 push 数据    
    4.   
  
  
  
  4.      this.q2 = []; // 用于 shift 数据    
    5.   
  
  
  
  5.    }      
    6.   
  
  
  
  6.    push(value) {    
    7.   
  
  
  
  7.      return this.q1.push(value);   
    8.   
  
  
  
  8.    }    
    9.   
  
  
  
  9.    shift() {    
    10.   
  
  
  
  10.      let q2 = this.q2;  
    11.   
  
  
  
  11.       if (q2.length === 0) {    
    12.   
  
  
  
  12.        const q1 = this.q1;    
    13.   
  
  
  
  13.        if (q1.length === 0) {    
    14.   
  
  
  
  14.          return;    
    15.   
  
  
  
  15.        }    
    16.   
  
  
  
  16.        this.q1 = q2; // 感谢 @shaonialife 同学指正    
    17.   
  
  
  
  17.        q2 = this.q2 = q1.reverse();    
    18.   
  
  
  
  18.      }    
    19.   
  
  
  
  19.      return q2.pop();    
    20.   
  
  
  
  20.    }    
    21.   
  
  
  
  21.    isEmpty() {    
    22.   
  
  
  
  22.      if (this.q1.length === 0 && this.q2.length === 0) { 
    23.   
  
  
  
  23.         return true;   
    24.   
  
  
  
  24.      }    
    25.   
  
  
  
  25.      return false;    
    26.   
  
  
  
  26.    }    
    27.   
  
  
  
  27.  }   
    28.

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

本文标题：如何利用JavaScript实现并发控制
本文URL：http://www.shufengxianlan.com/qtweb/news30/4630.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站营销知识

分类信息网

成都网站设计　　 　乐山网站建设　　 　成都营销型网站建设　　 　服务器租用　　 　重庆企业网站建设　　 　安卓开发　　 　服务器机柜租用　　 　网络营销公司　　 　簇桥薇薇新娘　　 　鸿艺文化　　 　域名注册　　 　全网品牌营销　　 　温江网站设计　　 　成都小程序开发　　 　成都定制网站　　 　香港四川國際商會　　 　广安园林绿化公司　　 　成都集团网站建设　　 　成都富士康招工　　 　防护网厂