のぞみECMAScript794117ECMAScriptの改訂により、JavaScriptはよりシンプルな構文や、より厳密な構文が書けるようになってきています。JSer.info」)。JavaScriptプログラマーとしてはどのような書き方が最適なのか気になります。Quantum・Edgeで、ECMAScriptの構文を一部ピックアップして実行速度を調べてみました。検証を行いたい構文を使ったコードを100万回実行・計測する関数を用意し、用意した関数を10回ずつ実行しています。はじめに、for文を空の状態で実行するコードを用意しました。計測結果がミリ秒以下になる時があるため、さらなる精度で計測できるconsole.time()関数を使用しています。for文を空で回した場合の結果としては、Chrome・Safariでは1回目に実行時間が大きくかかり、それ以降は高速に、Firefox・Edgeでは1・2回目に実行時間がかかり、それ以降高速になっています。これはJITコンパイラーが複数回の関数の呼び出し後にコンパイルを行い高速に実行できるようになっているためです。{}console.timeEnd("empty");変数の定義方法が変わることでパフォーマンスは変わるのかテンプレートリテラルを使用して文字列の結合の速度を計測します。その上で変数の定義方法を「var」「let」「const」と変えて、パフォーマンスが変わるかどうかを調べました。結果としては、Safariではvarがconstとletに比べ1.3-2倍程度早く、Edgeではconstが最速でした。Chrome・Firefoxではどの定義方法でも大きく変わりませんでした。`${a}_${b}_${c}_${d}`;}文字列を結合するパターン文字列を結合するときに、「プラス演算子」「テンプレートリテラル」を使った場合で速度に違いがあるのか計測しました。結果としては、Firefox・Edgeではプラス演算子がテンプレートリテラルを使う場合より早くなりました。Chrome・Safariでは、プラス演算子の場合もテンプレートリテラルを使う場合も変わりがありませんでした。「プロトタイプ」と「クラス」を生成するときの速度に違いがあるのか計測しました。Chrome・Edgeでは、クラスの生成がプロトタイプの生成と比べて1.2倍ほどの時間がかかっていて、Firefox・Safariではプロトタイプ、クラスの生成で大きく変わりはありませんでした。ClassHoge();}べき乗を表現するパターンべき乗の計算を行うときに、「掛け算を使う」「Math.pow()関数を使う」「**演算子を使う」場合で速度に違いがあるのか計測しました。EdgeでMath.pow()関数を使用した場合は掛け算と**演算子を使用した場合と比べて、3-25倍以上の時間がかかりました。どの構文を使用しても大きく変わりませんでした。関数の呼び出し行うときに、「関数」「アロー関数」「アロー関数で引数のカッコを省略したとき」「プロトタイプメンバー関数」「クラスメンバー関数」で速度に違いがあるのか計測しました。Edgeではクラスメンバー関数の呼び出しは他の呼び出し方に比べ、1.4倍ほどの時間がかかりました。Chrome・Safariではどの構文を使用しても大きく変わりませんでした。classHoge.hoge(0);}計測結果からのまとめ今回の検証によると、構文の書き方はパフォーマンスに大きく影響しないことがわかりました。EdgeだとMath.pow()関数が極端に遅いといった結果も確認できました。特定のブラウザーでのみ性能を改善したいときに、コードの書き方を検証に含める価値は少しはあるかもしれません。今後、ブラウザーのアップデートによりパフォーマンスが改善される可能性もあります。パフォーマンス改善のために無闇に構文を変えるよりは、まずは調査を行った上で、どこに時間がかかっているか調べてみることが大事でしょう。今回の計測コードが気になる方は、GitHubで全コードを公開していますので、ぜひお試しください。ics-creative/180207_javascript_performanceICSではこの他にもパフォーマンス計測を行っています。パフォーマンス計測・改善に興味がある方はぜひ次の記事も参考にしてください。次のブラウザーとOSを使用しました。平成30年4月18日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。