자바스크립트에서 스프레드 연산자의 성능을 향상시키는 방법은 무엇입니까?

이 기사에서는 스프레드 연산자의 성능을 어떻게 향상시킬 수 있는지 알아보기 위해 흥미로운 테스트를 수행할 것입니다.

먼저 스프레드 연산자가 배열에서 어떻게 작동하는지 간단히 설명하겠습니다.

일반적으로 사용되는 세 가지 연산자인 확장 연산자를 사용하면 배열을 각 작은 블록으로 확장할 수 있습니다. 그런 다음 대괄호 구문 []을 사용하여 이러한 작은 조각을 재조립하여 새 배열을 구성합니다. []，重新组装这些小块构造一个新数组。

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

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

以下是性能测试结果：

正如预期的那样，在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]

전파 연산자는 대괄호 [] 안의 어느 곳에나 배치할 수 있습니다.

rrreee

처음에 물었던 질문에 대답하자면, 배열 리터럴 내에서 스프레드 연산자를 배치하면 성능이 향상됩니까? 좀 더 자세히 살펴보겠습니다.

머리 및 꼬리 함수에 연결

성능 비교를 시작하기 전에 두 가지 함수를 정의하겠습니다. .

첫 번째는 appendToTail()입니다.

rrreee

appendToTail()을 사용하면 배열 끝에 값을 삽입할 수 있습니다. 이 함수는 다음과 같은 쓰기 방법 [...array, item]을 사용합니다.

두 번째는 appendToHead()입니다.

rrreee

appendToHead()는 순수 함수로, 원본에 추가된 값이 삽입된 새 배열을 반환합니다. 배열 머리. [항목, ...배열]을 사용합니다.

솔직히 위 두 기능의 성능을 기준으로 보면 이들 기능이 서로 다른 효율성을 가질 것이라고 생각할 이유가 없습니다. 하지만 현실은 우리가 상상했던 것과 다를 수 있습니다. 계속해서 테스트해 보겠습니다.

성능 테스트

다음 3에서는 MacBook Pro를 사용합니다. 브라우저를 사용하여 노트북에서 [... array, item] 및 [item, ...array]를 테스트하고 두 성능을 비교합니다. 🎜

Chrome 76
• Firefox 68
• Safari 12.1

🎜다음은 성능 테스트 결과입니다.🎜🎜🎜🎜예상대로 Firefox 및 Safari에서 [ ...array, item] 및 [item, ...array]는 동일한 성능을 갖습니다. 🎜🎜그러나 Chrome에서는 [...array, item]이 [item, ...array]보다 두 배 빠르게 실행됩니다. 이는 유용한 결과입니다. 🎜🎜Chrome에서 스프레드 연산자의 성능을 향상하려면 배열 리터럴 시작 부분에 스프레드 연산자를 사용하세요. 🎜rrreee🎜 하지만 또 다른 질문이 생깁니다. 이 문제의 원인은 무엇입니까? 🎜🎜 V8 엔진 버전 7.2부터 Chrome에서 JavaScript 실행 지원을 제공하여 스프레드 연산자에 대한 새로운 최적화인 빠른 경로 최적화를 수행할 수 있습니다. 🎜🎜다음과 같이 작동 방식을 몇 문장으로 설명합니다. 🎜🎜이 최적화가 없으면 엔진이 스프레드 연산자 [...iterable, item]를 만나면 반복 가능한 개체 Iterator를 호출합니다. iterator.next(). 반복할 때마다 결과 배열의 메모리가 증가하고 반복 결과가 결과 배열에 추가됩니다. 🎜🎜그러나빠른 경로 최적화는 알려진 반복 가능 항목(예: 정수 배열)을 감지하고 반복자 객체 생성을 완전히 건너뜁니다. 그런 다음 엔진은 확장 배열의 길이를 읽고 결과 배열에 대해 메모리를 한 번만 할당합니다. 그런 다음 배열은 인덱스별로 전파되어 결과 배열에 각 항목을 추가합니다. 🎜🎜빠른 경로 최적화는 반복 개체 생성을 건너뛰고 결과에 대한 메모리를 한 번만 할당합니다. 이로써 성능이 향상됩니다. 🎜

지원되는 데이터 구조

🎜빠른 경로 최적화는 다음 표준 JavaScript 데이터 구조에서 작동합니다. 지도 개체의 🎜🎜배열🎜rrreee🎜문자열🎜rrreee🎜세트🎜rrreee🎜지도🎜🎜 map.keys() 및 map.values() 메서드 지원: 🎜rrreee

결론

🎜확장된 어레이가 어레이의 시작 부분에 있으면 빠른 경로 최적화로 인해 성능 향상을 얻을 수 있습니다. V8 엔진 버전 7.2(Chrome v72 및 NodeJS v12와 함께 제공되는 기능)에서 작동합니다. 🎜🎜이러한 최적화를 통해 성능 테스트에서는 [... array, item]가 [item, ...array]보다 최소 2배 빠른 성능을 발휘하는 것으로 나타났습니다. 🎜🎜빠른 경로는 확실히 유용하지만 성능이 중요하거나 대규모 배열을 처리할 때 사용하는 것이 좋습니다. 🎜🎜대부분의 경우 강제 최적화를 사용하면 최종 사용자가 아무런 차이를 느끼지 못할 가능성이 높기 때문입니다. 🎜🎜아래 댓글을 통해 알려주실 수 있는 JavaScript의 다른 흥미로운 성능 최적화에 대해 알고 계시나요? 🎜🎜글이 여러분에게 도움이나 영감을 줄 수 있다면 좋아요와 별에 인색하지 마세요. 그것이 제가 앞으로 나아갈 수 있는 원동력이자 가장 큰 긍정입니다🎜🎜🎜원본링크: https://dmitripavlutin .com/javascript-spread-operator -performance-optimization/🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 자바스크립트에서 스프레드 연산자의 성능을 향상시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!