Update Log
2023.4.18: Online JS Common Iteration Method Performance Analysis Comparison Tool launched
  1. Home
  2. Webmaster Tools
  3. Online JS Common Iteration Method Performance Analysis Comparison Tool

Online JS Common Iteration Method Performance Analysis Comparison Tool

This is a tool for comparing the performance of common JS iteration methods. It lists various common iteration methods such as for loop, for-in loop, for-each loop, for-map loop, etc. Users can set the number of iterations and the calculation count for each iteration, and finally get the time used for each iteration method. The fastest and slowest iteration methods are marked. It is provided for reference and use by those who need it.

Analysis and Comparison of Several Common Array Iteration Methods in JS

Note

Comparison of Loop Methods is specifically designed to compare the results of ordinary for loops, foreach, and other traversal methods after a large number of calculations

Currently comparing three major types: for loop, for-in, foreach, and several different uses of for loop

As can be seen, there are significant differences between different methods

Similarly, there is a maximum executable threshold that is currently set, and after exceeding a certain number, the ones that take a long time to execute will be automatically hidden

Among them, for-in will be hidden if it is greater than 100, and map will be hidden if it is greater than 500

It should be noted that for-of can only be used in ES6, so the code is commented out by default

The shortest time-consuming part in the performance test result is marked with green, and the most time-consuming part is marked with pink, which is convenient for readers to observe

Current Analysis Mode:
Calculation Count per Iteration:
Total Loop Executions:
测试环境:Linux    浏览器信息:undefined
Code Premise: 
                            
                                var arr = [0,'1',2,'3',...,'99999',100000];
Test Code Performance Analysis
Execute code using for loop
First method
  1. for(j = 0; j < arr.length; j++) {
  2.    
  3. }
Waiting for execution
for Loop code execution
The second method
  1. for(j = 0,len=arr.length; j < len; j++) {
  2.    
  3. }
Waiting for execution
forLoop code execution
The third way
  1. for(j = 0; arr[j]!=null; j++) {
  2.    
  3. }
Waiting for execution
for inLoop code execution
  1. for(j in arr) {
  2.    
  3. }
Waiting for execution
for each Loop code execution
  1. arr.forEach(function(e){  
  2.    
  3. });
Waiting for execution
for each Loop code execution,The second method
  1. Array.prototype.forEach.call(arr,function(el){  
  2.    
  3. });
Waiting for execution
for mapLoop code execution
  1. arr.map(function(n){  
  2.    
  3. });
Waiting for execution

Related Articles in Series:

Additional Information:

① This tool is excerpted from Dai Lichun's personal blog: https://dailc.github.io/about/about.html

② The tools provided on this site are for reference only. Users should select appropriate methods based on specific scenarios during programming and development.