JavaScript optimization: Scope, Low level ES vs ES5 Array methods

Today we will test 2 blocks of code that perform the following operation:
Given an array, you must select all items, degree 2 of which is greater than 5.

In the blue corner, Option A: Low-level code - old and scary (partially optimizable)

1. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
2. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
3. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
4. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
5. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
6. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
7. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }
8. for ( i = 0 , res = [ ] ; i < c ; i ++ ) { t = a [ i ] ; if ( t >= 2.236067 ) { continue ; } else { res. push ( t * t ) ; } }

In the red corner Option B: High-level code - young and beautiful (not amenable to partial optimization)

1. a. map ( function ( t ) { return t * t } ) . filter ( function ( t ) { return t > 5 } ) ;

Battles will take place in 3 arenas.
1. AO args - Parameters of the function activation object.
2. AO - Local variables of the function activation object.
3. Global - Global Variables.


')
In the arsenal we have the latest stable versions of all popular browsers.

All test code:

2. // * * * * * * * * * * * * * * * * *
3. // Activation object Arguments scope
4. // * * * * * * * * * * * * * * * * *
6. ( function ( a , dt , index , i , c , r , t , res ) {
7. r = [ ] ;
8. c = a. length ;
10. dt = new Date ( ) ;
11. index = 20000 ;
12. while ( index - ) {
13. a. map ( function ( t ) { return t * t } ) . filter ( function ( t ) { return t > 5 } ) ;
14. }
15. r [ 0 ] = ( new Date ( ) - dt ) ;
17. dt = new Date ( ) ;
18. index = 20000 ;
19. while ( index - ) {
20. for ( i = 0 , res = [ ] ; i < c ; i ++ ) {
21. t = a [ i ] ;
22. if ( t > = 2.236067 ) {
23. continue ;
24. } else {
25. res. push ( t * t ) ;
26. }
27. }
28. }
29. r [ 1 ] = ( new Date ( ) - dt ) ;
31. alert ( 'ao args:' + r ) ;
32. } ( [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ] ) ) ;
34. // * * * * * * * * * * * * * * * * *
35. // Activation object scope
36. // * * * * * * * * * * * * * * * * *
38. ( function ( ) {
39. var a = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ] ,
40. dt ,
41. index ,
42. i ,
43. c ,
44. r ,
45. t ,
46. res
47. ;
49. r = [ ] ;
50. c = a. length ;
52. dt = new Date ( ) ;
53. index = 20000 ;
54. while ( index - ) {
55. a. map ( function ( t ) { return t * t } ) . filter ( function ( t ) { return t > 5 } ) ;
56. }
57. r [ 0 ] = ( new Date ( ) - dt ) ;
59. dt = new Date ( ) ;
60. index = 20000 ;
61. while ( index - ) {
62. for ( i = 0 , res = [ ] ; i < c ; i ++ ) {
63. t = a [ i ] ;
64. if ( t > = 2.236067 ) {
65. continue ;
66. } else {
67. res. push ( t * t ) ;
68. }
69. }
70. }
71. r [ 1 ] = ( new Date ( ) - dt ) ;
73. alert ( 'ao:' + r ) ;
74. } ( ) ) ;
76. // * * * * * * * * * * * * * * * * *
77. // Global scope
78. // * * * * * * * * * * * * * * * * *
80. var a = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ] ,
81. dt ,
82. index ,
83. i ,
84. c ,
85. r ,
86. t ,
87. res
88. ;
90. r = [ ] ;
91. c = a. length ;
93. dt = new Date ( ) ;
94. index = 20000 ;
95. while ( index - ) {
96. a. map ( function ( t ) { return t * t } ) . filter ( function ( t ) { return t > 5 } ) ;
97. }
98. r [ 0 ] = ( new Date ( ) - dt ) ;
100. dt = new Date ( ) ;
101. index = 20000 ;
102. while ( index - ) {
103. for ( i = 0 , res = [ ] ; i < c ; i ++ ) {
104. t = a [ i ] ;
105. if ( t > = 2.236067 ) {
106. continue ;
107. } else {
108. res. push ( t * t ) ;
109. }
110. }
111. }
112. r [ 1 ] = ( new Date ( ) - dt ) ;
114. alert ( 'global:' + r ) ;

Code: pastebin.com/mqBdkXZG

results

FF	high level	low level
Ao args	458	92
AO	474	122
Global	479	162

Opera	high level	low level
Ao args	416	22
AO	427	21
Global	428	49

Chrome	high level	low level
Ao args	83	9
AO	89	eight
Global	98	28

Sa	high level	low level
Ao args	153	21
AO	146	24
Global	147	25

IE8	high level	low level
Ao args	dropped out	441
AO	dropped out	393
Global	dropped out	822

Results

As you can see, there is a trend AO args | AO faster Global. This is clear from the ECMAScript specification - accessing the variables of the activation object is faster because it (JSC) is “closer to the code” than the global object.
Low-level code, many times faster than the full-level one because ECMAScript does not have blocks like in Ruby, a function is called for each element of the array, and a function call is a costly operation for JS. High level code slower up to 20 times!
Chrome is so fast because it has a JIT compilation, but for frequently used blocks of code (1 run will give the same result).
An interesting point shows Firefox: AO args (low) 92; AO (low) 122; AO args a quarter faster. Although all these variables that AO args, that AO lie in one object, but in FF AO args, judging by the results, are allocated in a separate object.

Another interesting test.

1. ( function ( r , dt , index , i , j ) {
3. dt = new Date ( ) ;
4. index = 50000 ;
5. while ( index - ) {
7. // Block A
8. for ( i = 0 , j = 0 ; i < 20 ; i ++ ) {
9. j ++;
10. }
11. // -------
13. }
14. r [ 0 ] = new Date - dt ;
16. dt = new Date ( ) ;
17. index = 50000 ;
18. while ( index - ) {
20. // Block B
21. j = 0 ;
22. j ++; j ++; j ++; j ++; j ++;
23. j ++; j ++; j ++; j ++; j ++;
24. j ++; j ++; j ++; j ++; j ++;
25. j ++; j ++; j ++; j ++; j ++;
26. // -------
28. }
29. r [ 1 ] = new Date - dt ;
31. alert ( r ) ;
33. } ( [ ] ) ) ;

Which unit will be faster? Answer: pastebin.com/hXxQb6pk

UPD In the end, everything comes down to the interface redrawing (reflow, redraw), however, as my practice has shown, reflow optimization was not enough. Calls of anonymous functions ate a significant part, eliminating them received a good increase, especially in ancient browsers, which is why we suffer. Do not take this article as a guide to action, write the code as you see fit for you. I advise you to optimize as needed.