最適化が入るようにするやーつ。
Firefox (SpiderMonkey) でも試そうね。
結論
- 3か月後に自分が何をしたいかを思い出せるシンプルな書き方をする。
- while と for はそこまで変わらない (人間が読みやすく書け)
- 難解に書いてもそこまで変わらない (コード量の問題ではない)
確認した環境
V8は10.1.70。Firefoxは 99.0a1 を使用。
Google Chrome 101.0.4930.0 (Official Build) canary （64 ビット） (cohort: Clang-64)
変更履歴 d322a83431b1fbb103a806c7eb2b010c60943422-refs/branch-heads/4930@{#1}
OS Windows 10 Version 21H2 (Build 19044.1566)
JavaScript V8 10.1.70
ユーザー エージェント Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4930.0 Safari/537.36
コードはシンプルに、以下のようなものを10万回計算させる。
output = '';
i = 0;
while (bCount > i) {
if(Math.floor(i/2)===i/2)output += i;i++;
}
for は while を書き換えただけのもの、if単体は10万行追加するやつ。
結果
while 。
10～30ms 程度で完了する。おそらくキャッシュが効いたりしていると 3ms 台が出る。
for 。
こちらも15～35ms 程度で完了する。同じく 3ms 台も出る。
if を10万回。
さっぱりダメですね。50ms～70ms 。場合によっては 100ms を超える。
Firefox
While は。4～10ms 。
for は3～10ms 。
if は 35～60ms 。
考察
Chrome と Firefox に大きな差があるのはベンチマーク外の処理が影響していると考えられるやつ。
Chrome → 動かしながら最適化できるところを更に効率よくする
Firefox → 一度に大きく手を入れてから動かしている
Firefoxのデータは ms 以下の数値がきれいで精度が分からないため参考値。
ここではスクリプト受信後に実行できるまでの処理と、ベンチマーク開始行までの処理については比較しない。(繰り返し処理の比較の為)
実環境ではネットワーク間のデータ転送の帯域やスペック、スクリプト内のあまり使われない関数の最適化(投機的な最適化かもしれない)など色々あるので、どのブラウザ・エンジンが優れているか等は別のお話。
素直に書いたものが一番良いと思いますよ。最後に minify しましょう。
コードゴルフ的な書き方も良いですが、多分3か月後に「なにこれ？」となるやつ。
