GoogleでChromeの開発に携わるエンジニアリングマネージャのAddy Osmani氏が先頃、JavaScriptのコストに関する調査結果を発表した。ブラウザのJavaScript解析とコンパイルの時間が改善されるに従って、スクリプト処理の主なコストはダウンロード時間とCPU実行時間に移りつつある、というのが氏の主張だ。
"Cost of Javascript 2019"でOsmani氏は、CSS、JavaScript、イメージ、フォントのミックスを必要とする一般的な対話型サイトにおいて、"JavaScriptは常に最も高価な部分"である、と述べている。170KBのイメージと170KBのJavaScriptスクリプトは、ダウンロード時間では同じだが、スクリプトの解析やコンパイルや実行に比べてイメージのデコードと表示の方がはるかに速いため、スクリプトよりもずっと高速に処理されるのだ。
実際のところ、JavaScriptの処理が速いというのは、スクリプトのダウンロード、解析、コンパイル、実行が速いということである。
スクリプトのダウンロード時間は、主にスクリプトのサイズとネットワーク能力によって決まる。解析およびコンパイル時間には、JavaScriptエンジンの使用するテクノロジセットとデバイスの能力(CPUやメモリのパフォーマンス)が関与する。実行時間はCPUに大きく依存している。
Osmani氏はV8エンジンを中心に、2018年当時に比較して、解析およびコンパイル時間に関して実現された改善について言及している。
V8による生のJavaScript解析速度は、Chrome 60以降2倍になりました。その一方で、並列化による別の最適化作業により、生のJavaScript解析速度のコストは目立たなくなり、重要性も低くなっています。の視認性/重要度は低くなりました。(...)Chrome 61がFacebookのJSを解析するのと同じ時間で、Chrome 75はFacebookのJSに加えて、その６倍のTwitterのJSも解析できるようになりました。
現在はTC39プロセスの初期段階(ステージ1)にあるBinary AST提案は、JavaScript構文の効率的な抽象構文ツリー表現に基づいたバイナリエンコーディングを使用することにより、解析パフォーマンスのさらなる向上を目指すものだ。
従って、今後重視すべきボトルネックはダウンロード時間と実行時間になるだろう、とOsmani氏は推測する。Webにアクセスするユーザの大半をモバイルデバイスが占める現在、実行時間とダウンロード時間は、サーマルスロットリング(thermal throttling)やキャッシュサイズ、CPU、GPU、ネットワークテクノロジ(2G～5G)の違う、ローエンドからハイエンドのモバイルデバイスまで、広い範囲のモバイルデバイスの能力による影響を受けることになる。
ダウンロード時間を短縮するために、Osmani氏は、次のようなことを推奨している。
- 特にモバイルデバイスの場合において、JavaScriptバンドルサイズを最小化する
- 大きなバンドル(50～100 KB以上)を小さなバンドルに分割して、HTTP/2の多重化機能を活用する
さらに氏は、モバイル専用プランの必要性についても言及した。
モバイルでは、ネットワーク速度だけでなく、平均的なメモリ使用量を低減するためにも、送信量をできるだけ小さくしたいと思うはずです。
実行時間を短縮するために、Osmani氏は、"メインスレッドのビジー状態を維持し、ページがインタラクティブになるまでの時間を長くする可能性のある"長いタスク"を避ける、ということを推奨している。さらに開発者は、大規模なインラインスクリプト(1 KB以上)に頼るべきではない。
完全な報告書には、サポートデータ(主にV8エンジンとChromeブラウザが中心)、数値、実用的な推奨事項が記載されている。"The Cost of JavaScript"調査は、2017年に初めて公開された後、2018年と2019年に更新された。