JS performance analysis of adding items to array_javascript skills

Compared the performance between 4 ways to add items to an array:

Use indexer to add

Copy code The code is as follows:

console.time("index");
var a = [];
for (var i = 0, l = times; i a[i] = i;
}
console.timeEnd("index");

Use push method

Copy code The code is as follows:

console.time("push");
var a = [];
for (var i = 0, l = times; i a.push(i);
}
console.timeEnd("push");

Use concat method

Copy code The code is as follows:

console.time("concat");
var a = [];
for (var i = 0, l = times; i a.concat(i);
}
console.timeEnd("concat");

Use the concat method, the parameter is an array

Copy code The code is as follows:

console.time("concat with array");
var a = [];
for (var i = 0, l = times; i a.concat([i]);
}
console.timeEnd("concat with array");

Set times to 10,000 (ten thousand) times:

Copy code The code is as follows:

index: 0.310ms
push: 1.476ms
concat: 8.911ms
concat with array: 2.261ms

Set times to 100000 (one hundred thousand) times:

Copy code The code is as follows:

index: 1.967ms
push: 11.980ms
concat: 70.410ms
concat with array: 28.292ms

Set times to 1000000 (millions) times:

Copy code The code is as follows:

index: 138.559ms
push: 93.074ms
concat: 608.768ms
concat with array: 243.371ms

Set times to 10000000 (ten million) times:

Copy code The code is as follows:

index: 1473.733ms
push: 611.636ms
concat: 6058.528ms
concat with array: 2431.689ms

Summary

This conclusion is only applicable to Chrome browser

The execution efficiency of the concat method is the slowest
Compared with the parameter passing of the two concat methods, when the parameters are accepted as arrays, the execution efficiency is higher than when the parameters are accepted as non-arrays
In most cases, the execution efficiency of the indexer is higher than that of the push method
When the number of executions increases, the execution efficiency of the indexer begins to be inferior to the push method

Browser comparison

Thanks to the netizen for pointing out that I lack experience, so I will add a horizontal comparison between browsers here

The first is to use the concat method. In IE and Firefox, if the parameter is an array, the execution efficiency is slower than if the parameter is a non-array, but the difference is not big
Then the index and push methods are definitely faster than concat. Using the index method in IE is always faster than push. In Firefox, push is slightly better but the difference is not big
Comparing the execution efficiency of the index and push methods between the three browsers, the difference is huge. The execution efficiency of Firefox is much higher than that of IE and Chrome. In the case of millions of times, it is basically 10 times faster. Compared with other browsers, the execution efficiency of Firefox is basically 10 times faster. The slowest of the two

The following are the results of millions of times:

Copy code The code is as follows:

// firefox
index: timer started
index: 229.79ms
push: timer started
push: 205.12ms
concat: timer started
concat: 2136.99ms
concat with array: timer started
concat with array: 2365.18ms
```

Copy code The code is as follows:

//ie
index: 2,533.744 milliseconds
push: 3,865.979 milliseconds
concat: 4,303.139 milliseconds
concat with array: 4,792.208 milliseconds

This article only discusses the performance of JS, and deepens friends' understanding of javascript through comparison. I hope you will like it.