Clever Geek Handbook

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 args 458 92
あお 474 122
グローバル 479 162
オペラ 高レベル 低レベル
AO args 416 22
あお 427 21
グローバル 428 49
クロム 高レベル 低レベル
AO args 83 9
あお 89 8
グローバル 98 28
さ 高レベル 低レベル
AO args 153 21
あお 146 24
グローバル 147 25
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最終的には、すべてがインターフェイスの再描画（リフロー、リドロー）に依存しますが、私の実践が示しているように、リフローの最適化は十分ではありませんでした。 匿名関数の呼び出しによってかなりの部分が消費され、それらが削除され、特に古代のブラウザではかなりの増加が得られました。 この記事を行動の手引きとして受け取らないでください。あなたにとって便利だと思うコードを書いてください。 必要に応じて最適化することをお勧めします。


More articles:


All Articles