前端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的话会影响性能。

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


前端web worker实践与总结_第1张图片
image.png

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


前端web worker实践与总结_第2张图片
image.png

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


前端web worker实践与总结_第3张图片
image.png

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

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


    image.png
  • 使用 web worker 进行并发请求


    image.png
  • web worker 配合indexdb 缓存后


    image.png

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

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

参考


  • mdn

你可能感兴趣的:(前端web worker实践与总结)