Skip to content

搜索时明显的性能问题及建议 #564

@dorsywang

Description

@dorsywang

Hi,项目在使用该组件时发现较明显的性能问题,具体表现为
在较大数据下(比如1w条数据),进行搜索时耗时较长,出现明显卡顿问题,甚至不可用。
具体原因来自于generate.tsx文件中

const tmpValues = mergedRawValue.map((val: RawValueType) => {
        const valueOptions = getValueOption([val]);
        const displayValue = getLabeledValue(val, {
          options: valueOptions,
          prevValue: mergedValue,
          labelInValue: mergedLabelInValue,
          optionLabelProp: mergedOptionLabelProp,
        });

        return {
          ...displayValue,
          disabled: isValueDisabled(val, valueOptions),
        };
      });

mergedRawValue本身使用map方法进行数组遍历,遍历方法体中调用getLabeledValue方法,该方法使用了数组find方法,同时存在遍历查找,时间复杂度几乎为n^2

valueUtil.ts文件中关于getLabeledValue方法的实现如下:

if (labelInValue) {
    prevValItem = prevValues.find((prevItem: LabelValueType) => {
      if (typeof prevItem === 'object' && 'value' in prevItem) {
        return prevItem.value === value;
      }
      // [Legacy] Support `key` as `value`
      return prevItem.key === value;
    }) as LabelValueType;
  }

修改建议:
使用预处理的Map替代数组find查找,避免n^2时间复杂度出现。因此mergedRawValue遍历前可以生成mergedValue的value为key的Map,在getLabeledValue直接使用该map找到对应数据,避免再次使用find。该修改方法在测试数据下有较大性能提升。

期待尽快优化,谢谢~

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions