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