前端性能优化--条件判断

原创

被删

发布于 2024-08-07 09:59:09

2880

发布于 2024-08-07 09:59:09

文章被收录于专栏：被删的前端游乐场

大多数情况下，前端很少遇到性能瓶颈。但如果在大型前端项目、数据量百万千万的场景下，有时候一些毫不起眼的代码习惯也可能会带来性能问题。

if else 或许性能更优

有时候我们为了偷懒，喜欢使用语法糖来缩减代码的编写，比如说判断两个字符串数组是否内容一致：

/**
 * 判断两个字符串数组是否内容一致
 */
function isStringArrayTheSame(stringArrayA: string[], stringArrayB: string[]): boolean {
    return stringArrayA.sort().join(',') === stringArrayB.sort().join(',');
}

但同样的，假设这个方法被调用十万百万次，性能问题可能就会变得是否明显，不管是sort还是数组拼接成字符串都会有一定开销。这种情况下我们可以这么写：

/**
 * 使用场景为数组内的字符串不会重复
 */
function isStringArrayTheSame(stringArrayA: string[], stringArrayB: string[]): boolean {
    // 数量不一致，肯定不同
    if (stringArrayA.length !== stringArrayB.length) return false;

    // 相同数量时，A 的每一个都应该存在 B 中，才完全一致
    for (const type of stringArrayA) {
        if (!stringArrayB.includes(type)) return false;
    }

    return true;
}

下面这种偷懒写法也是:

// bad
function mergeStringArray(stringArrayA: string[], stringArrayB: string[]): string[] {
    return Array.from(new Set(stringArrayA.concat(stringArrayB)));
}

// good
// 使用场景为单数组内的字符串不会重复
function mergeStringArray(stringArrayA: string[], stringArrayB: string[]): string[] {
    const newStringArray = [].concat(stringArrayA);
    stringArrayB.forEach(type => {
        if (!newStringArray.includes(type)) newStringArray.push(type);
    });
    return newStringArray;
}

低性能消耗代码判断提前

if...else写法也有很多注意事项，最简单的莫过于尽量使执行代码提前return。假设我们现在有这样的代码：

function test(arrayA: string[], arrayB: string[]): boolean {
    if (costTimeFunction(arrayA, arrayB) || noCostTimeFunction(arrayA, arrayB)) {
        testCodeA();
    } else {
        testCodeB();
    }
}

这样写看起来没什么问题，但假设已知costTimeFunction函数执行会有一定的性能消耗，那么在数组长度很大、调用次数很多的情况下，我们可以将耗时较少的函数放在前面执行：

function test(arrayA: string[], arrayB: string[]): boolean {
    if (noCostTimeFunction(arrayA, arrayB) || costTimeFunction(arrayA, arrayB)) {
        testCodeA();
        // 提前 retrun 可以简化代码复杂度
        return;
    }
    testCodeB();
}