前端web worker实践与总结

先说下场景， 我们的项目中有一个需求是合并多天行程的一个详情页面，这就涉及到一个接口请求问题，如果合并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