जावास्क्रिप्ट अनुकूलन: स्कोप, निम्न स्तर ईएस बनाम ईएस 5 एरे विधियां

आज हम कोड के 2 ब्लॉकों का परीक्षण करेंगे जो निम्नलिखित ऑपरेशन करते हैं:

एक सरणी को देखते हुए, आपको उन सभी तत्वों का चयन करना होगा जिनकी डिग्री 2 5 से अधिक है।



नीले कोने में विकल्प A: निम्न-स्तरीय कोड - पुराना और डरावना (आंशिक अनुकूलन के लिए उत्तरदायी)

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 ) ; } }
   
   
   
   

लाल कोने में, विकल्प बी: उच्च-स्तरीय कोड युवा और सुंदर है (आंशिक अनुकूलन के लिए उत्तरदायी नहीं)

1. एक। नक्शा ( फ़ंक्शन ( टी ) { रिटर्न टी * टी } ) । फ़िल्टर ( फ़ंक्शन ( टी ) { रिटर्न टी > 5 } ) ;

लड़ाई 3 एरेनास में होगी।

1. एओ args - फ़ंक्शन सक्रियण ऑब्जेक्ट के पैरामीटर।

2. एओ - फ़ंक्शन सक्रियण ऑब्जेक्ट के स्थानीय चर।

3. वैश्विक - वैश्विक चर।







शस्त्रागार में हमारे पास सभी लोकप्रिय ब्राउज़रों के नवीनतम स्थिर संस्करण हैं।



सभी परीक्षण कोड:

2. // * * * * * * * * * * * * * * * * * * *
3. // सक्रियण ऑब्जेक्ट तर्क गुंजाइश
4. // * * * * * * * * * * * * * * * * * * *
6. ( फ़ंक्शन ( ए , डीटी , इंडेक्स , आई , सी , आर , टी , रेस ) {
7. आर = [ ] ;
8. सी = ए। लंबाई ;
10. dt = new Date ( ) ;
11. सूचकांक = 20000 ;
12. जबकि ( सूचकांक - ) {
13. एक। नक्शा ( फ़ंक्शन ( टी ) { रिटर्न टी * टी } ) । फ़िल्टर ( फ़ंक्शन ( टी ) { रिटर्न टी > 5 } ) ;
14. }
15. r [ 0 ] = ( नई तिथि ( ) - dt ) ;
17. dt = new Date ( ) ;
18. सूचकांक = 20000 ;
19. जबकि ( सूचकांक - ) {
20. के लिए ( i = 0 , res = [ ] ; मैं < c ; i ++ ) {
21. t = [ a ] ;
22. अगर ( t > = 2.236067 ) {
23. जारी रखें ;
24. } {
25. रेस। धक्का ( टी * टी ) ;
26. }
27. }
28. }
29. r [ 1 ] = ( नई तिथि ( ) - dt ) ;
31. चेतावनी ( 'एओ 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. // एक्टिवेशन ऑब्जेक्ट स्कोप
36. // * * * * * * * * * * * * * * * * * * *
38. ( फ़ंक्शन ( ) {
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. डीटी,
41. सूचकांक ,
42. मैं,
43. ग,
44. आर,
45. टी,
46. रेस
47. ;
49. आर = [ ] ;
50. सी = ए। लंबाई ;
52. dt = new Date ( ) ;
53. सूचकांक = 20000 ;
54. जबकि ( सूचकांक - ) {
55. एक। नक्शा ( फ़ंक्शन ( टी ) { रिटर्न टी * टी } ) । फ़िल्टर ( फ़ंक्शन ( टी ) { रिटर्न टी > 5 } ) ;
56. }
57. r [ 0 ] = ( नई तिथि ( ) - dt ) ;
59. dt = new Date ( ) ;
60. सूचकांक = 20000 ;
61. जबकि ( सूचकांक - ) {
62. के लिए ( i = 0 , res = [ ] ; मैं < c ; i ++ ) {
63. t = [ a ] ;
64. अगर ( t > = 2.236067 ) {
65. जारी रखें ;
66. } {
67. रेस। धक्का ( टी * टी ) ;
68. }
69. }
70. }
71. r [ 1 ] = ( नई तिथि ( ) - dt ) ;
73. चेतावनी ( 'ए ओ:' + आर ) ;
74. } ( ) ) ;
76. // * * * * * * * * * * * * * * * * * * *
77. // वैश्विक गुंजाइश
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. डीटी,
82. सूचकांक ,
83. मैं,
84. ग,
85. आर,
86. टी,
87. रेस
88. ;
90. आर = [ ] ;
91. सी = ए। लंबाई ;
93. dt = new Date ( ) ;
94. सूचकांक = 20000 ;
95. जबकि ( सूचकांक - ) {
96. एक। नक्शा ( फ़ंक्शन ( टी ) { रिटर्न टी * टी } ) । फ़िल्टर ( फ़ंक्शन ( टी ) { रिटर्न टी > 5 } ) ;
97. }
98. r [ 0 ] = ( नई तिथि ( ) - dt ) ;
100. dt = new Date ( ) ;
101. सूचकांक = 20000 ;
102. जबकि ( सूचकांक - ) {
103. के लिए ( i = 0 , res = [ ] ; मैं < c ; i ++ ) {
104. t = [ a ] ;
105. अगर ( t > = 2.236067 ) {
106. जारी रखें ;
107. } {
108. रेस। धक्का ( टी * टी ) ;
109. }
110. }
111. }
112. r [ 1 ] = ( नई तिथि ( ) - dt ) ;
114. चेतावनी ( 'वैश्विक:' + आर ) ;

कोड: pastebin.com/mqBdkXZG

परिणाम

एफएफ	उच्च स्तर	निम्न स्तर
एओ args	458	92
ए ओ	474	122
वैश्विक	479	162

ओपेरा	उच्च स्तर	निम्न स्तर
एओ args	416	22
ए ओ	427	21
वैश्विक	428	49

क्रोम	उच्च स्तर	निम्न स्तर
एओ args	83	9
ए ओ	89	8
वैश्विक	98	28

Sa	उच्च स्तर	निम्न स्तर
एओ args	153	21
ए ओ	146	24
वैश्विक	147	25

IE8	उच्च स्तर	निम्न स्तर
एओ args	बाहर गिरा दिया	441
ए ओ	बाहर गिरा दिया	393
वैश्विक	बाहर गिरा दिया	822

परिणाम

जैसा कि आप देख सकते हैं, ट्रेंड AO args है। AO Global की तुलना में तेज़ है। यह ECMAScript विनिर्देश से स्पष्ट है - सक्रियण ऑब्जेक्ट के चर तक पहुंचना तेज़ है क्योंकि यह (एओ) वैश्विक ऑब्जेक्ट की तुलना में "कोड के करीब" है।

निम्न-स्तरीय कोड, उच्च-स्तरीय कोड की तुलना में कई गुना तेज है क्योंकि ECMAScript में रूबी की तरह कोई ब्लॉक नहीं हैं, सरणी के प्रत्येक तत्व के लिए एक फ़ंक्शन कहा जाता है, और फ़ंक्शन को कॉल करना JS के लिए एक महंगा ऑपरेशन है। उच्च स्तरीय कोड 20 गुना तक धीमा!

क्रोम इतना तेज है क्योंकि इसमें JIT संकलन है, लेकिन अक्सर उपयोग किए जाने वाले ब्लॉक के लिए (1 रन एक ही परिणाम देगा)।

एक दिलचस्प बिंदु फ़ायरफ़ॉक्स दिखाता है: AO args (कम) 92; एओ (कम) 122; AO एक चौथाई तेजी से आगे बढ़ता है। हालाँकि ये सभी चर AO आर्ग हैं, कि AO एक ही वस्तु में हैं, AF AO आर्ग्स में, परिणामों को देखते हुए, एक अलग ऑब्जेक्ट के रूप में आवंटित किया जाता है।



एक और दिलचस्प परीक्षण।

1. ( फ़ंक्शन ( आर , डीटी , इंडेक्स , आई , जे ) {
3. dt = new Date ( ) ;
4. सूचकांक = 50000 ;
5. जबकि ( सूचकांक - ) {
7. // ब्लॉक ए
8. के लिए ( i = 0 , j = 0 ; मैं < 20 ; i ++ ) {
9. जे ++;
10. }
11. // -------
13. }
14. r [ 0 ] = नई तिथि - डीटी ;
16. dt = new Date ( ) ;
17. सूचकांक = 50000 ;
18. जबकि ( सूचकांक - ) {
20. // ब्लॉक बी
21. j 0 है ;
22. जे ++; जे ++; जे ++; जे ++; जे ++;
23. जे ++; जे ++; जे ++; जे ++; जे ++;
24. जे ++; जे ++; जे ++; जे ++; जे ++;
25. जे ++; जे ++; जे ++; जे ++; जे ++;
26. // -------
28. }
29. r [ 1 ] = नई तिथि - डीटी ;
31. सतर्क ( आर ) ;
33. } ( [ ] ) ) ;

कौन सा ब्लॉक तेज होगा? उत्तर: pastebin.com/hXxQb6pk



UPD अंत में, सब कुछ इंटरफ़ेस को फिर से परिभाषित करने पर निर्भर करता है (reflow, redraw), हालाँकि, जैसा कि मेरे अभ्यास ने दिखाया है, रिफ्लो अनुकूलन पर्याप्त नहीं था। अनाम कार्यों के कॉल द्वारा एक महत्वपूर्ण हिस्सा खाया गया था, उन्हें समाप्त करने से, एक अच्छी वृद्धि प्राप्त की गई, विशेष रूप से प्राचीन ब्राउज़रों में, जिसके कारण हम पीड़ित हैं। इस लेख को कार्रवाई के लिए एक मार्गदर्शक के रूप में न लें, जैसा कि आपको लगता है कि आपके लिए सुविधाजनक है कोड लिखें। मैं आपको आवश्यकतानुसार सलाह देता हूं।