『Webページ速度改善ガイド』 4章

レンダリング処理の基礎知識

4.1 スムーズなUIとスムーズでないUIの違い

  • 動きの滑らかさ

    • スクロール操作・アニメーションが発生した時、レンダリング処理が発生する
    • この処理に時間がかかると、スムーズでないUIになる
    • RAILモデル(1.4節)によると、1フレームあたりの処理を10msec以内に収めるべき

  • UIの応答速度

    • ユーザーのアクションに対する応答を早くする
      • 応答の例: ボタンをクリック -> ボタンの見た目を変更
    • RAILモデルによると、ユーザーアクションが発生してから100msec以内に応答するべき

4.2 レンダリング処理の基本

  • FPS(frames per second)

    • 1秒間に何回フレームを更新したか
    • レンダリング処理がスムーズかの基準
    • Webでは60fpsを目標とする
      • 一般的なディスプレイのリフレッシュレートが60Hzのため。
      • 1回のフレーム更新にかけられる時間は16.7msec

  • 1フレームの中の処理

    • スクリプト、スタイル、レイアウト、ペイント、画像のデコード
    • これらの処理のほとんどがブラウザのメインスレッドで行われる
    • 負荷の高い処理があると、レンダリング処理が遅れてFPSが低下する

  • レンダリング処理の最適化

    1. 1フレーム内の処理の軽減
      • 不要な処理の削除
    2. ブラウザの内部処理による最適化を活かす

  • レンダリング処理のパイプライン

    1. スクリプトの処理
      • 例: HTMLテンプレートの処理、イベント発生後のDOM更新
      • スクリプトはメインスレッドを占有するため、重い処理はレンダリングを遅らせる
      • 以下のような処理は避ける
        • 計算量の大きい処理
        • scrollやmousemoveのような高頻度で発生するイベントで、DOMの更新を行う
    2. スタイルの処理
      • CSSのスタイル情報を適用する
      • どのようなセレクタで指定するかよりも、どのようなプロパティを指定しているかがボトルネックとなる
        • CSS3以降のグラデーション、角丸などのプロパティは重い
    3. レイアウトの処理
      • 画面の各要素がどのような位置関係で配置されるかを決める
      • offsetTop, offsetWidthなどのプロパティを参照すると、レイアウト処理を誘発して重くなる
    4. ペイントの実行
      • 算出されたスタイル・レイアウトに基づいてディスプレイに表示する

  • Webアニメーション

    1. DOMアニメーション
      • jsでDOM要素のstyleを連続的に更新
    2. CSS Transitions/Animations
      • CSSセレクタで捕捉可能な要素の変化をトリガとしてアニメーションを行う
        • CSS Transitions: 変化前・変化後の2点間をアニメーション
        • CSS Animations: 最初と最後だけでなく、中間の状態も定義する
      • スクリプト処理がないので、DOMアニメーションより高性能
    3. Web Animations
      • アニメーションを抽象化したjsのAPI
      • CSS Animationsと同じようなもの
        • CSSで簡単に表現できるなら無理に使う必要はない
        • 複雑な制御が必要ならCSSより良い

  • CompositingによるGPUアクセラレーション

    • Compositing
      • ある要素をGPUの管理下に置き(合成レイヤ)、GPUの中で高速に処理する
    • 有効化
      • will-changeプロパティ
        • 変形・更新する可能性がある別のプロパティ名を指定する
      • CSSハック
        • translateZ(0)など
        • will-changeプロパティの方が良い
    • 副作用
      • compositingにも処理コストがあるので、アニメーションする可能性がある要素にのみ適用する

4.3 レンダリング処理の調査と計測

  • Chrome DevToolsを使い、FPSや各種の処理にかかった時間がわかる

  • Long Tasks API

    • ページのレンダリングに伴うフレームの中で、50msecを超えるフレームに関する情報を取得するAPI
    • リアルユーザーモニタリングの時、エンドユーザーの手元で時間がかかっている処理が把握できる

感想

  • 2,3章のネットワーク処理とは異なり、普段意識しない部分だったので勉強になった
  • Long Tasks APIは活用できそう