Google Chrome runs web pages and applications with lightning speed.

Google Chromeなどの開発に従事しているGoogleのエンジニアが2月9日(米国時間)に「JavaScript Start-up Performance - Dev Channel - Medium」に掲載した記事で、Google ChromeにおけるJavaScriptスタートアップパフォーマンスを向上させる方法を伝えた。JavaScriptのスタートアップパフォーマンスはページを読み込んだ最初の段階での快適性に関与する部分で、どのように分析しどのように改善すればよいかの指針がまとめられている。

まず、JavaScriptはブラウザのJavaScriptエンジンがパースしてすぐに実行されるわけではないと説明がある。工程を簡単に説明するとパースしたあとにアブストラクトシンタックスツリーへの変換、バイトコードの生成、最適化のための情報収集、最適化の実施と最適化されたコードの生成、こういった工程を経て実行されることになるとしており、どのようなツールを使って各工程の処理時間を計測し、どこを改善すればよいかが簡単に説明されている。

紹介されているJavaScriptスタートアップパフォーマンスの改善方法は次のとおり。

  • JavaScriptの量を減らす
  • コードを複数のかたまりに分け、必要になった段階で後からコードを読み込むテクニックを利用する(遅延読み込み)
  • sync/deferなどの指定を活用する
  • ライブラリやフレームワークといった使用しているコードのパース時間を計測し、ボトルネックとなっている場合にはほかのライブラリに置き換えたり、遅延読み込みのテクニックを利用したりして、スタートアップパフォーマンスの改善を図る

JavaScriptのスタートアップパフォーマンスの確保と繰り返し実行されるコードの最適化はトレードオフの関係にある。主要ブラウザベンダーはどちらも高速化できるように開発を続けているが、記事ではこうした開発のみならずパフォーマンス計測を実施しコーディングや構成を工夫することでも高速化が可能であることを紹介している。