To ensure the readability of paper, rather than literal translation.
This article explains how to improve the performance of deployed operations, before briefly talk about the works to expand operations in the array.
Expand operator or three points, accepts an array or arrays may generally be iterative [... arrayOrIterable]and array elements exploded, partially exploded and using these constructs a new array.
Expand the operator can be placed anywhere in the array:
Numbers = const [. 1, 2,. 3]; [0, ... Numbers]; // => [0,. 1, 2,. 3] [0, ... Numbers,. 4]; // => [0 ,. 1, 2,. 3,. 4] [... Numbers,. 4]; // => [. 1, 2,. 3,. 4] copy the code
Now there is an interesting question, whether to expand the operator's position in the array can improve performance? Let us to look look.
1 attached to the head and tail functions
Before starting performance comparison, define two functions.
The first appendToTail()function: :
function appendToTail(item, array) {
return [...array, item];
}
const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]复制代码
appendToTail()Function main function is iteminserted at the end of the array.
The second function appendToHead():
function appendToHead(item, array) {
return [item, ...array];
}
const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]复制代码
appendToHead()It is purely a function that returns a new array, by [item，... array]show operation iteminto the back of the passed array.
At first glance, there is no reason to believe that the performance of these functions will be different, however, argue the facts better than bear to look look.
2. Performance Test
These three browsers on a MacBook Pro laptop running [... array，item]and [item，... array]to see if the corresponding performance:
Chrome 76
Firefox 68
Safari 12.1
Test Results:
As seen above, in Firefoxand Safaribrowser [... array，item]and [item，... array]essentially the same performance.
However, in Chrome, [... array，item]execution speed than [item，... array]twice as fast. This result is very useful for our.
To Chromeimprove performance, expand the operator, just to expand operations into the beginning of the array to Oh.
const result = [... array, item]; duplicated code
But this is why, why this happens?
3. The fast path optimization (fast-path optimization)
Start the V8 version 7.2 (support for JS execution in Chrome), can be optimized for the new expansion operators: fast path optimization .
Simply put, it works as follows:
Without this optimization, when the engine encounters an expanded operator [...iterable, item], it calls the iterableobject's Iterator ( iterator.next()) method. In each iteration, and returns an array of memory will increase, and the iteration result is added to it.
But the fast path to optimize a known iterable detected (as an array of integers), and completely skip the iteratorcreation of objects. The engine then reads the extended length of the array, the result is allocated only one memory array. Then pass expand the array index, add each element to the result array.
Fast path optimization iterations will skip the creation of an object, as a result of memory allocated only once, thus improving performance.
4. Support data structure
Fast path optimization criteria JS applies to the following data structure.
array
Numbers = const [. 1, 2,. 3,. 4]; [Numbers ...,. 5]; // => [. 1, 2,. 3,. 4,. 5] copy the code
string
Message = const 'the Hi'; [... Message, '!']; // => [ '!' 'H', 'I',] copy the code
set
const colors = new Set(['blue', 'white']); [...colors, 'green']; // => ['blue', 'white', 'green'] [...colors.values(), 'green']; // => ['blue', 'white', 'green'] [...colors.keys(), 'green']; // => ['blue', 'white', 'green']复制代码
map
About the maponly support map.keys()and map.values()methods
const names = new Map([[5, 'five'], [7, 'seven']]); [...names.values(), 'ten']; // => ['five', 'seven', 'ten'] [...names.keys(), 10]; // => [5, 7, 10]复制代码
to sum up
When you expand the array of text at the beginning of the array, you can optimize the fast path performance gains. This optimization (available in Chrome v72 and NodeJS v12 in) V8 engine available in v7.2.
By fast path optimization , [... array，item]execution speed than at least [item，... array]twice as fast.
Please note that although f fast path optimization is indeed useful, but in most cases, can not be forced to optimize, because end users probably will not feel the difference, of course, if we deal with in large arrays, it may be some optimization program .
After the code is deployed may exist BUG can not know in real time, and afterwards in order to solve these BUG, we spent a lot of time debugging log, here for everyone to recommend a way BUG easy to use monitoring tools Fundebug .