In this article we will conduct an interesting test to see how we can improve the performance of the spread operator.

Let’s start with a brief introduction to how the spread operator works in arrays.

Expand operators, the three commonly used ones, allow the array to be expanded into each small block. Then use the square bracket syntax [] to reassemble these small pieces to construct a new array.

The spread operator can be placed anywhere within square brackets [].

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]

To answer the question we asked at the beginning, does the positioning of the spread operator within the array literal improve performance? Let's explore further.

Append to Head and Tail Functions

Before starting the performance comparison, let’s define two functions.

The first one is appendToTail():

function appendToTail(item, array) {
  return [...array, item];
}

const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]

appendToTail() allows you to insert a value at the end of the array. This function uses the following writing method [...array, item].

The second one is appendToHead():

function appendToHead(item, array) {
  return [item, ...array];
}

const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]

appendToHead() is a pure function that returns a new array with the added The value is inserted at the head of the original array. It uses [item, ...array].

To be honest, based on the performance of the above two functions, there is no reason to think that these functions will have different efficiencies. But the reality may be different from what we imagined. Let’s continue testing.

Performance Test

I used MacBook Pro to test on the following 3 browser laptops[... array, item] and [item, ...array], compare the performance of the two:

• Chrome 76
• Firefox 68
• Safari 12.1

Here are the performance test results:

As expected, in Firefox and Safari browsers[ ...array, item] and [item, ...array] have the same performance.

However, in Chrome, [...array, item] executes twice as fast as [item, ...array]. This is a useful result.

To improve the performance of the spread operator in Chrome, use the spread operator at the beginning of an array literal:

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

But another question arises: What causes this problem?

Starting from version 7.2 of the V8 engine, providing support for JavaScript execution in Chrome, new optimizations can be performed on the spread operator: Fast path optimization.

Describe how it works in a few sentences, as follows:

Without this optimization, when the engine encounters the expansion operator [...iterable, item], which will call the iterator of the iterable object iterator.next(). On each iteration, the memory of the result array is increased and the iteration results are added to the result array.

But Fast path optimization detects known iterables (such as integer arrays) and skips the creation of the iterator object entirely. The engine then reads the length of the extended array and allocates memory only once for the resulting array. The array is then propagated by index, adding each item to the resulting array.

Fast path optimization will skip the creation of iteration objects and only allocate memory for the results once. Thereby performance is improved.

Supported Data Structures

Fast path optimization works with the following standard JavaScript data structures.

Array

const numbers = [1, 2, 3, 4];

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

String

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

In Map objects, only map.keys() and map.values() methods are supported:

const names = new Map([[5, 'five'], [7, 'seven']]);

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

Conclusion

When the expanded array is at the beginning of the array, you can get a performance boost due to fast path optimization. It works with V8 engine version 7.2 (a feature shipped with Chrome v72 and NodeJS v12).

With this optimization, performance testing shows that [... array, item] executes at least twice as fast as [item, ...array].

Please note that while fast path is certainly useful, it is recommended that you use it where performance is important or where you are dealing with large arrays.

Because, in most cases, by forcing optimization, the end user will most likely not feel any difference.

Do you know of any other interesting performance optimizations in JavaScript? Can you tell me in the comments below?

If the article can bring you some help or inspiration, please don’t be stingy with your likes and stars. It is the driving force and the greatest affirmation for me to move forward

Original link: https:/ /dmitripavlutin.com/javascript-spread-operator-performance-optimization/

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to improve the performance of spread operator in javascript?. For more information, please follow other related articles on the PHP Chinese website!