【antd-vue 4.x transfer 穿梭框40w条数据全选卡死优化】

原创已于 2024-11-29 15:03:41 修改 · 562 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2024-11-29 14:59:22 首次发布

Ant Design Vue 4.x 版本穿梭框大数据下全选时卡死排查优化

10w条数据时点击右边全选框，出现卡死现象。

下载并运行antdv源码，使用for循环模拟10w条数据在穿梭框中，从右往左点击全选。
通过浏览器性能分析记录，可以看到js代码执行花了31218毫秒，大约31秒。
排查：
在transfer的源码中发现

...filter(....indexOf())  这儿存在问题，可能会导致双重for循环操作

打印执行时间看，这里确实存在问题。
在这里插入图片描述
5. 优化使用for 循环 + map 解决此类问题

// 优化测试代码 使用此代码替换途中watch
    watch(
      () => props.selectedKeys,
      () => {
        const sKeys = props.selectedKeys || [];
        const tkeys = props.targetKeys || [];
        const sourceKeys = [];
        const targetKeys = [];
        const map = {};

        for (const key of tkeys) {
          map[key] = key;
        }

        for (const key of sKeys) {
          const hasKey = map[key];

          if (hasKey) {
            targetKeys.push(key);
          } else {
            sourceKeys.push(key);
          }
        }

        sourceSelectedKeys.value = sourceKeys;
        targetSelectedKeys.value = targetKeys;
        // sourceSelectedKeys.value =
        //   props.selectedKeys?.filter(key => props.targetKeys.indexOf(key) === -1) || [];
        // targetSelectedKeys.value =
        //   props.selectedKeys?.filter(key => props.targetKeys.indexOf(key) > -1) || [];
      },
      { immediate: true },
    );