Geekly Articles each Day

JavaScriptの最適化：スコープ、低レベルESとES5配列メソッド

今日は、次の操作を実行する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 ) ; } }

赤いコーナーのオプションB：高レベルのコードは若くて美しい（部分的な最適化を受け入れられない）
  1. a。 map （ function （ t ） { return t * t } ） 。 filter （ 関数 （ t ） { return t > 5 } ） ;

戦闘は3つのアリーナで行われます。
1. AO args-関数アクティブ化オブジェクトのパラメーター。
2. AO-関数アクティベーションオブジェクトのローカル変数。
3.グローバル-グローバル変数。



武器庫には、すべての一般的なブラウザの最新の安定バージョンがあります。

すべてのテストコード：
  2. // * * * * * * * * * * * * * * * * * *
  3. // Activationオブジェクトの引数スコープ
  4. // * * * * * * * * * * * * * * * * * *
  6. （ 関数 （ a 、 dt 、 index 、 i 、 c 、 r 、 t 、 res ） {
  7. r = [ ] ;
  8. c = a。 長さ
  10. dt = 新しい日付（ ） ;
  11. インデックス= 20000 ;
  12. while （インデックス- ） {
  13. a。 map （ function （ t ） { return t * t } ） 。 filter （ 関数 （ t ） { return t > 5 } ） ;
  14. }
  15. r [ 0 ] = （ 新しい日付（ ） -dt ） ;
  17. dt = 新しい日付（ ） ;
  18. インデックス= 20000 ;
  19. while （インデックス- ） {
  20. for （ i = 0 、 res = [ ] ; i < c ; i ++ ） {
  21. t = a [ i ] ;
  22. if （ t > = 2.236067 ） {
  23. 続ける ;
  24. } else {
  25. 解像度 プッシュ （ t * t ） ;
  26. }
  27. }
  28. }
  29. r [ 1 ] = （ 新しい日付（ ） -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. //アクティベーションオブジェクトのスコープ
  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. dt
  41. インデックス、
  42. 私は
  43. c
  44. r
  45. t
  46. 解像度
  47. ;
  49. r = [ ] ;
  50. c = a。 長さ
  52. dt = 新しい日付（ ） ;
  53. インデックス= 20000 ;
  54. while （インデックス- ） {
  55. a。 map （ function （ t ） { return t * t } ） 。 filter （ 関数 （ t ） { return t > 5 } ） ;
  56. }
  57. r [ 0 ] = （ 新しい日付（ ） -dt ） ;
  59. dt = 新しい日付（ ） ;
  60. インデックス= 20000 ;
  61. while （インデックス- ） {
  62. for （ i = 0 、 res = [ ] ; i < c ; i ++ ） {
  63. t = a [ i ] ;
  64. if （ t > = 2.236067 ） {
  65. 続ける ;
  66. } else {
  67. 解像度 プッシュ （ t * t ） ;
  68. }
  69. }
  70. }
  71. r [ 1 ] = （ 新しい日付（ ） -dt ） ;
  73. alert （ 'ao：' + r ） ;
  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. dt
  82. インデックス、
  83. 私は
  84. c
  85. r
  86. t
  87. 解像度
  88. ;
  90. r = [ ] ;
  91. c = a。 長さ
  93. dt = 新しい日付（ ） ;
  94. インデックス= 20000 ;
  95. while （インデックス- ） {
  96. a。 map （ function （ t ） { return t * t } ） 。 filter （ 関数 （ t ） { return t > 5 } ） ;
  97. }
  98. r [ 0 ] = （ 新しい日付（ ） -dt ） ;
  100. dt = 新しい日付（ ） ;
  101. インデックス= 20000 ;
  102. while （インデックス- ） {
  103. for （ i = 0 、 res = [ ] ; i < c ; i ++ ） {
  104. t = a [ i ] ;
  105. if （ t > = 2.236067 ） {
  106. 続ける ;
  107. } else {
  108. 解像度 プッシュ （ t * t ） ;
  109. }
  110. }
  111. }
  112. r [ 1 ] = （ 新しい日付（ ） -dt ） ;
  114. alert （ 'global：' + r ） ;


コード： pastebin.com/mqBdkXZG

結果


Ff高レベル低レベル
AO args45892
あお474122
グローバル479162
オペラ高レベル低レベル
AO args41622
あお42721
グローバル42849
クロム高レベル低レベル
AO args839
あお898
グローバル9828
さ高レベル低レベル
AO args15321
あお14624
グローバル14725
IE8高レベル低レベル
AO args脱落した441
あお脱落した393
グローバル脱落した822

まとめ


ご覧のとおり、トレンドはAO args | AOがGlobalよりも速いです。 これはECMAScript仕様から明らかです。アクティベーションオブジェクトの変数へのアクセスは、グローバルオブジェクトよりも「コードに近い」ため（AO）高速です。
ECMAScriptにはRubyのようなブロックがないため、配列の各要素に対して関数が呼び出され、関数の呼び出しはJSにとって高価な操作であるため、低レベルコードは高レベルコードよりも何倍も高速です。 高レベルのコードは最大20倍遅くなります！
ChromeはJITコンパイルを備えているため非常に高速ですが、頻繁に使用されるコードブロックについては（1回の実行で同じ結果が得られます）。
興味深い点は、Firefoxを示しています。AOargs（低）92; AO（低）122; AOは4分の1の速さで議論します。 これらの変数はすべてAO引数ですが、AOは同じオブジェクト内にありますが、AF AO引数では、結果から判断して、別のオブジェクトとして割り当てられます。

別の興味深いテスト。
  1. （ function （ r 、 dt 、 index 、 i 、 j ） {
  3. dt = 新しい日付（ ） ;
  4. インデックス= 50000 ;
  5. while （インデックス- ） {
  7. //ブロックA
  8. for （ i = 0 、 j = 0 ; i < 20 ; i ++ ） {
  9. j ++;
  10. }
  11. // -------
  13. }
  14. r [ 0 ] = 新しい日付-dt ;
  16. dt = 新しい日付（ ） ;
  17. インデックス= 50000 ;
  18. while （インデックス- ） {
  20. //ブロック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 ] = 新しい日付-dt ;
  31. アラート （ r ） ;
  33. } （ [ ] ） ） ;


どのブロックが高速になりますか？ 回答： pastebin.com/hXxQb6pk

UPD最終的には、すべてがインターフェイスの再描画（リフロー、リドロー）に依存しますが、私の実践が示しているように、リフローの最適化は十分ではありませんでした。 匿名関数の呼び出しによってかなりの部分が消費され、それらが削除され、特に古代のブラウザではかなりの増加が得られました。 この記事を行動の手引きとして受け取らないでください。あなたにとって便利だと思うコードを書いてください。 必要に応じて最適化することをお勧めします。

Source: https://habr.com/ru/post/J110391/

More articles:


All Articles