数组性能问题分析总结

前端工程师 @ 字节跳动

文章转自豆皮范儿-数组性能问题分析总结

数组的操作避免出现O(n^2)的复杂度

数组用来搜索元素的方法时间复杂度为O(n)。运行时间的增长速度与数据大小的增长速度相同,常用的如下


Array.prototype.every()

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.forEach()

Array.prototype.map()

Array.prototype.reduce()

Array.prototype.some()

复制代码

如果将这些方法用在for循环内,或者两个方法嵌套使用,就会造成O(n^2)的复杂度,造成严重的性能问题。

Case 1 嵌套数组搜索操作


// bad case 嵌套了数组搜索操作

const arrayA = Array.from({length: 10000}, (v, i) => i);

const arrayB = Array.from({length: 10000}, (v, i) => i * 2);

const result = arrayA.filter((v) => arrayB.every((u) => u !== v));

复制代码

优化方法:使用Set或者Map方法进行数组的搜索操作


// good case 使用Set.has方法,代替Array.prototype.every()

const arrayA = Array.from({length: 10000}, (v, i) => i);

const arrayB = Array.from({length: 10000}, (v, i) => i * 2);

const set = new Set(arrayB)

const result = arrayA.filter((v) => !set.has(v));

复制代码

二者的性能比较:数组大小为10000的时候,二者的性能差距已经有800倍左右

Case 2 concat的性能问题


const arrayA = Array.from({ length: 10000 }, (v, i) => i);

const result = {};

// bad case 每次concat都会新生产一个数组,会有较大的性能消耗

arrayA.forEach((a) => {

result.children = (result.children || []).concat(a);

});

// good case 复用已有的数组

arrayA.forEach((a) => {

if (result.children) {

result.children.push(a);

} else {

result.children = [a];

}

});

复制代码

二者的性能比较:数组大小为10000的时候,二者的性能差距已经有1600倍

Case 3 创建数组操作的性能比较

几种创建10000个元素数组方法的速度比较

可以看到实际速度最快的还是for循环的方法,其它Array.from解构等一行实现的方法,实际速度并不快

在线JS性能比较平台

在线比较两段代码的性能,以每秒执行次数(ops/s)为指标 jsbench.me

字节跳动数据平台前端团队,在公司内负责大数据相关产品的研发。我们在前端技术上保持着非常强的热情,除了数据产品相关的研发外,在数据可视化、海量数据处理优化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和积累,有兴趣可以与我们联系。

文章分类
前端
文章标签