JS小奥秘之如何提高扩展运算符的性能

小灰灰 2024-04-18 12:09 58阅读 0赞

> 原文链接：https://dmitripavlutin.com/javascript-spread-operator-performance-optimization/

在这篇文章中，我们会进行一个有趣的测试，看看我们如何提高扩展运算符的性能。

让我们首先简要介绍一下扩展运算符在数组中的工作原理。

扩展运算符，也就是我们常用的三个，让数组展开变成每个小块。 然后使用中括号语法`[]`，重新组装这些小块构造一个新数组。

扩展运算符可以被放置在中括号`[]`里面的任何位置。

const numbers = [1, 2, 3];
    [0, ...numbers];    // => [0, 1, 2, 3]
    [0, ...numbers, 4]; // => [0, 1, 2, 3, 4]
    [...numbers, 4];    // => [1, 2, 3, 4]

回答我们一开始提出的问题，扩展运算符在数组文字中的位置是否可以提高性能？让我们往后继续探究。

# 附加到头部和尾部功能 #

在开始性能比较之前，让我们定义两个函数。

第一个是`appendToTail()`：

function appendToTail(item, array) { 
      return [...array, item];
    }
    
    const numbers = [1, 2, 3];
    appendToTail(10, numbers); // => [1, 2, 3, 10]

`appendToTail()`可以让你在数组的末尾插入一个值。 此函数使用了以下写法`[...array, item]`。

第二个是`appendToHead()`：

function appendToHead(item, array) { 
      return [item, ...array];
    }
    
    const numbers = [1, 2, 3];
    appendToHead(10, numbers); // => [10, 1, 2, 3]

`appendToHead()`是一个纯函数，它返回一个新数组，其中添加的值是插入在原数组的头部。它使用`[item, ...array]`。

讲道理就上面这两个函数的表现，没有理由认为这些功能会有不一样的效率。但是事实可能跟我们想象中不一样，下面让我们来继续测试吧。

# 性能测试 #

我用`MacBook Pro`在以下3个浏览器的笔记本电脑上测试`[... array, item]`和`[item, ...array]`，对比两者的性能：

*  Chrome 76
 *  Firefox 68
 *  Safari 12.1

以下是性能测试结果：

![屏幕快照 2019-09-06 上午11 28 09][2019-09-06 _11 28 09]

正如预期的那样，在Firefox和Safari浏览器中`[...array, item]`和`[item, ...array]`具有相同的性能。

但是，在Chrome中，`[...array, item]`的执行速度比`[item, ...array]`快两倍。 这是一个有用的结果。

要在Chrome中提高扩展运算符的性能，请在数组文字的开头使用扩展运算符：

const result = [...array, item];

但另一个问题出现了：这种问题怎么引起的？

从V8引擎的7.2版本之后，为Chrome中的JavaScript执行提供支持，可以对扩展运算符进行新的优化：**快速路径优化**。

用几句话描述它的工作原理，如下：

如果没有这个优化，当引擎遇到扩展运算符`[...iterable, item]时`，它会调用可迭代对象的迭代器`iterator.next()`。在每次迭代时，结果数组的内存都会增加，迭代结果会被添加到结果数组中。

但是**快速路径优化**检测到已知的可迭代（如整数数组）并完全跳过迭代器对象的创建。 然后引擎读取扩展数组的长度，仅为结果数组分配一次内存。 然后通过索引传播数组，将每个项目添加到结果数组中。

快速路径优化会跳过迭代对象的创建，只为结果分配一次内存。 从而性能提高。

# 支持的数据结构 #

快速路径优化适用于以下标准JavaScript数据结构。

## 数组 ##

const numbers = [1, 2, 3, 4];
    
    [...numbers, 5]; // => [1, 2, 3, 4, 5]

## 字符串 ##

const message = 'Hi';
    
    [...message, '!']; // => ['H', 'i', '!']

## Sets ##

const colors = new Set(['blue', 'white']);
    
    [...colors, 'green'];          // => ['blue', 'white', 'green']
    [...colors.values(), 'green']; // => ['blue', 'white', 'green']
    [...colors.keys(), 'green'];   // => ['blue', 'white', 'green']

## Maps ##

在Map对象中，仅支持`map.keys()`和`map.values()`方法：

const names = new Map([[5, 'five'], [7, 'seven']]);
    
    [...names.values(), 'ten']; // => ['five', 'seven', 'ten']
    [...names.keys(), 10];      // => [5, 7, 10]

# 结论 #

当被扩展的数组位于数组的开头时，由于快速路径优化，您可以获得性能提升。它适用于V8引擎7.2版本（Chrome v72和NodeJS v12附带的特性）。

通过此优化，性能测试显示`[... array, item]`的执行速度至少比`[item, ...array]`快两倍。

请注意，虽然快速路径确实很有用，建议您在性能很重要或者处理大型数组的地方使用它。

因为，在大多数情况下，强制优化，最终用户很可能不会感觉到任何差异。

您还知道JavaScript中有哪些有趣的性能优化，可以在下面评论中告诉我？

如果文章能带您一丝帮助或者启发，请不要吝啬你的赞和Star，对我是前进的动力和最大的肯定?

[2019-09-06 _11 28 09]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/21152c3ac5e344afa3fa893f6bf59ba6.png