先说下场景， 我们的项目中有一个需求是合并多天行程的一个详情页面，这就涉及到一个接口请求问题，如果合并7天，7天内存在20个行程，那我们就需要进行20多个请求，即便每个请求都走异步，但其实也都是进入任务队列里面依次执行，因此并没有能够说起到很大的性能提升。

这个时候就需要web worker来做多行程的并行请求了, 从而达到提升性能的效果, 我们先简单来看下web worker的 API

index.js

// worker的创建是通过一个另外的脚本来生成的，里面定义的是worker的具体执行逻辑var worker = new Worker("text.js")// 传输消息给worker, tips: 当一个消息在主线程和worker之间传递时，它被复制或者转移了，而不是共享 worker.postMessage()   

// 接收经过worker处理过的消息worker.onmessage = () => {}// worker 会在页面关闭的时候自动关闭, 用terminate() 可以立即杀死worker的线程worker.terminate()

text.js

// onmessage 定义worker接受消息的回调 onmessage = (params) => {    console.log(params)     // postMesage 会把消息发到index.js的worker中
    postMessage(params)
}// 通过close() 也能够马上结束当前的worker线程self.close()

简单看下来，web worker 还是比较简单的，但是作用却很大，当然它也存在一些限制 比如不能进行dom操作、以及不能使用一些windows对象的方法和属性、开启太多的worker的话会影响性能。

下面贴下我在实际项目中的实现：

image.png

这里的实现掺杂了indexedDB缓存的步骤, 主要就是把ajax放在worker里面进行操作。再贴下在vue组件里面的调用

image.png

目前的实现是根据多少段行程起多个worker一起并行的请求，请求完成后worker自己kill掉， 请求的时候能够在浏览器里面看到多个worker的产生

image.png

就这样，我们愉快地用上了web worker 我们可以简单测试下, 看下性能提升有多大

• 未使用web worker 纯粹的循环请求

  
  

  

  image.png

• 使用 web worker 进行并发请求

  
  

  

  image.png

• web worker 配合indexdb 缓存后

  
  

  

  image.png

当然这个测试办法并不算很严谨, 这个只能是粗略估计， 但是这个还是能够看出性能提升是非常大的. 关于indexedDB 可以看看我之前的博文 基于indexDB的前端优化缓存方案。

另外如果需要在webpack中配合使用的话就需要用到 worker-loader

参考

• mdn

作者：打杂coder
链接：https://www.jianshu.com/p/97f6144dfddf