WebインスペクタでCPU使用率を把握する – WWDC2019

Sessions
目次

Session概要

WebディベロッパーはハイパフォーマンスなWeb体験に対するユーザの期待に応え、全てのデバイスで電力の使用を最小化する上で重要な役割を果たしています。
このセッションではWebインスペクタの強力な新ツールを使用することで、SafariのWebページやAppに埋めこまれたWebコンテンツの電力効率を向上させる新たな方法についての説明。
CPU使用率を抑え、バッテリー消費の少ない動的な体験を実現するための新しい方法について https://developer.apple.com/videos/play/wwdc2019/513/

省電力のWebを構築するための機能

  • SafariとWebKitには自動省電力機能がある
    • スロットルタイマー、コンテンツブロッカーなど
  • Javascriptを最適化し、CSSアニメーションとトランジションを使用してページのロードを向上させ、バッテリーを節約する

パフォーマンスのためのWebインスペクタの機能

CPU Usage Timeline

  • macOS用のSafari 13のWebインスペクタで追加
  • 電力消費量のウィンドウでCPU使用率が高い動作を確認可能

CPU Usage Timelineの使い方

  • WebインスペクタのTimelineタブにある
  • Timelineでリロードボタン or レコードボタンを押下して測定
    • CPU使用率を測る時には、有効な測定値を得るため15秒以上記録する
  • CPU使用率だけでなく、Main Threadでの処理における種類（Script, Layout, Paint, Style Resolution）や、消費電力が把握可能
  • 統計(Statistics)とソースセクションからScriptの処理数や実行したイベントが把握できる
    • 解決したい問題の対象をクリックすることでJavascriptデバッガーのコードにジャンプしてアクセス可能

画像を遅延読み込みする際のパフォーマンスのための実装

  • RequestAnimationFrameの代わりに Intersection Observerを使用する
最新情報をチェックしよう！