やあ！繰り返しになりますが、DevTools のテクニカル ライターである Kayce です。この DevTools ダイジェストでは、これを少し変更して、過去数年間の Chrome リリースにおける DevTools のパフォーマンス ツールの改善についてまとめます。
特に記載のない限り、すべての機能は Stable 版です。
モバイルファーストの世界に向けた CPU スロットリング
Chrome 54（現在は Canary）で利用できます。
ソフトウェアは世界を席巻し、モバイルはソフトウェアを席巻しています。DevTools は、モバイルファーストの開発世界のニーズにより的確に応えるために着実に進化しています。DevTools のモバイルファースト ツールの最新の開発は、CPU スロットリングです。この機能を使用すると、リソースが制限されたデバイスでのサイトのパフォーマンスをより詳細に把握できます。
[Timeline] パネルの [CPU Throttling] プルダウン メニューからいずれかのオプションを選択して、開発マシンのコンピューティング能力を制限します。
CPU スロットリングに関する注意事項:
- ネットワーク スロットリングと同様に、スロットリングはすぐに有効になり、無効にするまで継続されます。
- この機能は、リソースが制限されたデバイスでのサイトのパフォーマンスを全般的に把握するためのものです。DevTools でモバイル システム オン チップのパフォーマンス特性を真にエミュレートすることは不可能です。
- スロットリングは開発マシンに応じて行われます。つまり、最上位のデスクトップでの 5 倍のスロットリングは、5 年前の低価格ノートパソコンの 5 倍のスロットリングとは異なる結果をもたらすことになります。
とはいえ、CPU スロットリングをネットワーク スロットリングやデバイス モードと組み合わせると、開発マシンのブラウザの利便性から直接、モバイル デバイスでのサイトの表示やパフォーマンスをより正確に把握できるようになります。
タイムライン録画のネットワーク ビュー
次回タイムラインを記録する際に [ネットワーク] チェックボックスをオンにすると、ページでリソースがどのようにダウンロードされたかを分析できます。リソースをクリックすると、その詳細情報が [Summary] ペインに表示されます。
サマリーの [Initiator] フィールドは特に有用です。このフィールドは、リソースがリクエストされている場所を示します。
パッシブなイベント リスナー
パッシブなイベント リスナーは、スクロールのパフォーマンスを向上させる新たな標準です。詳しくは、こちらの記事をご覧ください。
パッシブ イベント リスナーでスクロールのパフォーマンスを向上
DevTools には、{passive: true} へのちょっとした愛からメリットを得られるリスナーを見つけるのに役立つ機能がいくつか用意されています。
まず、同期リスナーがページのスクロールを不当な時間にわたってブロックすると、コンソールで警告が表示されます。
以下のデモで実際に試すことができます。
次に、[Event Listeners] ペインの小さなプルダウン メニューを使用して、パッシブ リスナーやブロッキング リスナーをフィルタします。
最後に、リスナーにカーソルを合わせて [Toggle Passive] を押すと、そのリスナーのパッシブ状態とブロック状態を切り替えることができます。この機能は現在、touchstart、touchmove、mousewheel、wheel のイベント リスナーに限定されています。
ヒントでこのセクションを締めくくります。レンダリング ドロワーの [Scrolling Performance Issues]（スクロールのパフォーマンスに関する問題）チェックボックスをオンにすると、スクロールに関する潜在的な問題を視覚的に確認できます。ページのあるセクションがハイライト表示されているということは、スクロールのパフォーマンスに悪影響を与える可能性のある、ページのそのセクションにバインドされているリスナーがあるということです。
アクティビティ別にグループ化
6 月中旬に、[Timeline] パネルの [Call Tree] ペインに [Group by Activity] という新しい並べ替えカテゴリが追加されました。グループ化すると、ページが HTML の解析、スクリプトの評価、ペイントなどに費やした時間を確認できます。
ソースパネルのタイムライン統計情報
[JS Profile] オプションを有効にしてタイムライン記録を作成すると、[Sources] パネルで実行時間の関数ごとの内訳を確認できます。
ご意見をお寄せください
これまでどおり、DevTools に関するフィードバックやアイデアがありましたら、ぜひお聞かせください。
- ご不明な点やフィードバック、新しいアイデアがありましたら、Twitter の ChromeDevTools までお知らせください。
- 長時間のディスカッションには、メーリング リストまたは Stack Overflow をご利用になることをおすすめします。
- ドキュメント関連の問題については、ドキュメント リポジトリでイシューを作成してください。
来月まで！