比较字符串数组的两个 JavaScript 代码片段之间的性能差异

Question

我正在开发一个 JavaScript 函数，该函数比较两个字符串数组以查看它们的连接内容是否相等。我编写了该函数的两个版本，一个使用显式变量，另一个更简洁的版本。令人惊讶的是，我注意到两种实现之间存在轻微的性能差异。

以下是该函数的两个版本：

版本1

var arrayStringsAreEqual = function(word1, word2) {
    let a = word1.join('');
    let b = word2.join('');
    if (a == b) {
        return true;
    } else {
        return false;
    }
};

版本2

var arrayStringsAreEqual = function(word1, word2) {
    return word1.join('') == word2.join('');
};

有人可以解释为什么这两个版本之间可能存在性能差异，即使它们在功能上是相同的？它与 JavaScript 引擎如何优化代码有关，还是还有其他因素在起作用？

虽然两个版本实现了相同的结果，但我发现版本 1（具有显式变量）在某些情况下速度稍快。我很好奇为什么会出现这种情况。

Answer 1

通常使用变量会产生额外的开销，但在您的情况下，Chrome 能够提供相同的性能。但如果重用变量，实际上可以提高性能。所以规则可能是 - 不要创建不必要的变量

` Chrome/123
---------------------------------------------------------------------------------------
>                    n=10        |      n=100       |     n=1000      |     n=10000    
without vars   ■ 1.00x x100k 565 |   1.00x x10k 594 | ■ 1.00x x1k 629 | ■ 1.00x x10 125
with vars        1.02x x100k 577 | ■ 1.00x x10k 592 |   1.01x x1k 635 |   1.03x x10 129
---------------------------------------------------------------------------------------
https://github.com/silentmantra/benchmark `

let $length = 10;
const big_strings = [];
const palette = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (let i = 0; i < $length; i++) {
    let big_string = "";
    for (let i = 0; i < 100; i++) {
        big_string += palette[Math.floor(Math.random() * palette.length)];
    }
    big_strings.push(big_string);
}

let $input = big_strings;

var arrayStringsAreEqual = function(word1, word2) {
    let a = word1.join('');
    let b = word2.join('');
    if (a == b) {
        return true;
    } else {
        return false;
    }
};

var arrayStringsAreEqual2 = function(word1, word2) {
    return word1.join('') == word2.join('');
};

// @benchmark with vars
arrayStringsAreEqual($input, $input);

// @benchmark without vars
arrayStringsAreEqual2($input, $input);


/*@skip*/ fetch('https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js').then(r => r.text().then(eval));