如何处理Vue2项目里大规模的数据计算？

前言

最近主导一个地图项目的开发工作，涉及处理上万个数据的撒点功能，且这些数据是实时动态刷新。

如何做到从上万个数据中，取出【新数据点】，并对它们做撒点处理呢？

目前该项目基于Vue2，由于该地图基于数生地图（底层为C++，转换为webassembly供前端调用），本身特别占内存，若同时进行大量的数据循环计算，则会导致地图卡死。

为了处理上述问题，我引入了Web Worker

配置

需先使用npm install worker-loader --save-dev安装worker-loader包，目前我安装的版本为^3.0.8

再在vue.config.js里，增加如下配置

chainWebpack(config) {
	config.module
    	.rule('worker')
        .test(/\.worker\.js$/)
        .use('worker-loader')
        .loader('worker-loader')
        .end();
      
	 // 解决：worker 热更新问题
	config.module.rule('js').exclude.add(/\.worker\.js$/);
	// 解决：“window is undefined”报错，这个是因为worker线程中不存在window对象，因此不能直接使用，要用this代替
    config.output.globalObject('this')
},
parallel: false

.test(/\.worker\.js$/)表示只匹配以.worker.js结尾的文件

添加Worker文件

新建map.worker.js文件，代码如下所示：

self.onmessage = evt => {
    const { targetFeatures, allBillboardIds, showIds, zylabel3ds, code } = evt.data;
    if (zylabel3ds && code) {
        const allLabel3ds = JSON.parse(zylabel3ds)
        const ids = []
        allLabel3ds.forEach(a => {
            a.option.trace.points.forEach(b => {
                if (b.properties.type === code) {
                    ids.push(String(b.id))
                }
            })
        })
        if (ids.length) {
            postMessage({ ids: JSON.stringify(ids) })
        }
    } else if (targetFeatures && allBillboardIds && showIds) {
        const features = JSON.parse(targetFeatures)
        const waitToShowBillboards = [
            {features: []}
        ]
        showIds.forEach(a => {
            if (allBillboardIds.indexOf(a) === -1) {
                const feature = features.find(b => String(b.properties.id) === a)
                waitToShowBillboards[0].features.push(feature)
            }
        })
        postMessage({ waitToShowBillboards: JSON.stringify(waitToShowBillboards) })
    }
}

在同级目录里的index.vue里，引入上面的map.worker.js文件，部分代码如下所示：

import Worker from "./map.worker";
let worker = new Worker();
export default {
	methods: {
		hideSameTypeZy3dLabels(code) {
            try {
                worker.postMessage({
                    zylabel3ds: JSON.stringify(window.zylabel3ds),
                    code
                })
                worker.onmessage = evt => {
                    let { ids } = evt.data
                    if (ids) {
                        ids = JSON.parse(ids)
                        window.zylabel3ds.forEach(a => {
                            a.instance[0].forEach(b => {
                                var singleId = String(b.id)
                                if (ids.indexOf(singleId) > -1) {
                                    b.enabled = false
                                }
                            })
                        })
                    }
                }
            } catch (err) {
                throw new Error(`隐藏指定类型poi错误: ${err}`)
            }
            
        },
        /**
         * 隐藏或加载部分3dlabels
         * @param {Object} showTargets 显示的3dlabels数据
         */
         hideOrLoadSomeZy3dLabels(showTargets) {
            const targetFeatures = showTargets[0].features
            const showIds = targetFeatures.map(a => a.properties.id.toString())
            const allBillboardIds = []
            window.zylabel3ds.forEach(a => {
                a.instance[0].forEach(b => {
                    var singleId = String(b.id)
                    allBillboardIds.push(singleId);
                    if (showIds.indexOf(singleId) === -1) {
                        b.enabled = false
                    } else {
                        b.enabled = true
                    }
                })
            })
            worker.postMessage({
                targetFeatures: JSON.stringify(targetFeatures),
                allBillboardIds,
                showIds
            })
            worker.onmessage = evt => {
                let { waitToShowBillboards } = evt.data
                if (waitToShowBillboards) {
                    waitToShowBillboards = JSON.parse(waitToShowBillboards)
                    if (waitToShowBillboards[0].features.length) {
                        this.handleCreateBillboards(waitToShowBillboards, 'zyPoi', zylabel3ds => {
                            window.zylabel3ds.push(zylabel3ds);
                        })
                    }
                }
            }
        },
	}
}

因为JavaScript 采用的是单线程模型，若进行大规模的计算，很容易造成浏览器的卡死状态（界面的一切元素将不可点击）

在上述场景中，我将大规模的数据计算，交给Worker做，这是额外开启了一个单独的线程，不会影响浏览器界面的交互，同时Worker里的计算工作也不会受浏览器交互的影响。这也造成了Worker比较耗资源，不应该过度使用，一旦使用完毕，应立即将它释放

释放Worker

在index.vue里，释放Worker

beforeDestroy() {
    worker.terminate();
},