先说下场景， 我们的项目中有一个需求是合并多天行程的一个详情页面，这就涉及到一个接口请求问题，如果合并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
参考
作者：打杂coder
链接：https://www.jianshu.com/p/97f6144dfddf
共同学习，写下你的评论
评论加载中...
作者其他优质文章
