之所以设计阻塞队列是因为在做业务的时候会加载一个庞大的资源列表的问题。我们的业务主要是媒体资源的加载。在http1.0的时候,大部分浏览器最多支持6个并行连接,在http2.0的时候有所改进。HTTP/2.0理论上可以在一个TCP连接上发送无数个HTTP请求。如果我们一次加载100张图片,那么网络资源抢夺就很严重了。如果用户的网络环境较差,资源加载问题会更加严重。那么我们可以考虑控制并行度,控制每次加载资源的数量,控制加载队列的数量始终在6个以内。为了解决这个问题,设计了一个基于promise的阻塞队列。本质是一种队列长度有限的生产和消费模式。以图为例:classScheduler{constructor(maxCount=6){this.list=[];这个。计数=0;this.maxCount=maxCount;}//添加任务队列addTask(promiseCreator){returnnewPromise((resolve)=>{//添加时通知队列有东西要消费this.list.push(()=>{returnpromiseCreator().then(res=>{this.count-=1;//要执行的任务This.consume();resolve(res);returnres;});});this.consume();});}provider=(src)=>{returnthis.addTask(()=>newPromise((resolve,reject)=>{constimg=newImage();img.src=src;img.onload=function(){//图片加载成功resolve(src);}img.onerror=function(err){//图片加载失败reject(err);}}));};consume(){//最多同时做两个任务if(this.count
