この記事は Hacks ブログの記事、”Optimizing JavaScript Performance With Firefox Dev Tools
” の抄訳です。

Firefox の開発ツールに含まれるパフォーマンスツールを利用すると、パフォーマンスの低い JavaScript を調査して、一般的なレスポンスとレイアウトに関する性能を見ることが可能になります。

以下のスクリーンキャストでは、コードの中で性能を低下させている要因を調査し、それを修正する方法を解説しています。具体的には、かろうじて数秒に 1 度画面を更新できる程度に低速な 2D の canvas の描画デモを、パフォーマンス分析し、少しの修正を加えることで実用的なフレームレートで描画できるように改善しています。

スクリーンキャスト：https://youtu.be/VFZFpzQTG6M

関連情報

• MDN のパフォーマンスツールに関する解説
• MDN の Canvas 2D に関する解説
• スクリーンキャストで利用したデモ
• デモのソースコード

Greg Tatum について

Firefox の開発ツールに含まれる、パフォーマンスツールとメモリツールの開発者。
クリエイティブコーディングに対する情熱を持ち、Canvas 2D と WebGL を使った描画の限界を広げるべく活動を行う。

• Web サイト：gregtatum.com/
• Twitter：@TatumCreative

Greg Tatum によるその他の記事はこちら。