VUE使用webWorker处理万级数据

VUE使用webWorker处理万级数据

接到一个查询全国银行数据的需求，总数据达到10兆，超过10万条数据。首先调用接口时势必会导致浏览器严重卡顿，其次在把这十万条数据渲染到页面上时，操作也会十分卡顿，所以我们要对此进行相关处理和优化

用到的插件
1.VUE基于webWorker的插件：VueWorker，npm install vue-worker --save
2.虚拟DOM渲染插件：VueVirtualScroller，主要是只渲染可视范围内的dom，以达到渲染不卡顿的目的，npm install --save vue-virtual-scroller --save

main.js

// vue中的webWorker插件，用于请求银行万级别数据时的性能处理
import VueWorker from 'vue-worker'
Vue.use(VueWorker)
// vue中的dom渲染插件，用于渲染万级银行数据时的页面性能优化问题
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.use(VueVirtualScroller)

页面js中通过webWorker处理数据

  created() {
    this.params.dePhone.val = this.$userInfo.mobile
    // 创建一个webWorker
    this.worker = this.$worker.create([
      {
        message: 'getBlabk', // webWorker的postMessage方法传入的第一个参数，可以理解为函数名，用于调用下面的func方法
        func: res => {
          // res为webWorker的postMessage方法传入的第二个参数
          /* 
            接收到消息之后发送该值到postMessage。
            其执行顺序为：
            1.执行postMessage，调用第一个参数传入的getBlabk方法
            2.接收getBlabk方法中的postMessage传入的第二个参数（接口调用返回的值）。
            3.将该值再返回到postMessage，并在其回调函数中处理对应逻辑
          */
          return res.data
        }
      }
    ])
  },
  async mounted() {
  	// 此处通过worker的postMessage进行接口调用及逻辑处理
    const res = await this.worker.postMessage('getBlabk', [await api.getBankList()])
    console.log('aaa: ', res)
    const arr = []
    for (let key in res) {
      arr.push({ key: res[key], value: key })
    }
    this.list = arr
    console.log(this.list.length)
  },

页面中通过VueVirtualScroller渲染数据

<RecycleScroller class="virtual-list filter scroller" :items="list" :item-size="60" key-field="key">
  <template v-slot="{ item }">
   <div :class="['filter-item font24', { checked: item.key == value }]" @click.stop="chooseVal(item)">
    {{ item.key }}
   div>
  template>
RecycleScroller>