Skip to content
学習する 測定する ブログ Case studies 概要
このページ内
  • Lighthouseが合成されていないアニメーションを検出する方法
  • アニメーションを確実に合成する方法
  • 資力

合成されていないアニメーションは避けてください

Aug 12, 2020
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: パフォーマンスの監査
このページ内
  • Lighthouseが合成されていないアニメーションを検出する方法
  • アニメーションを確実に合成する方法
  • 資力

合成されていないアニメーションは、ローエンドの電話で、またはパフォーマンスの高いタスクがメインスレッドで実行されている場合に、ぎくしゃくした(つまりスムーズではない)ように見えることがあります。ぎこちないアニメーションは、ページの累積レイアウトシフト(CLS)を増やす可能性があります。 CLSを減らすと、LighthousePerformanceスコアが向上します。

バックグラウンド #

HTML、CSS、およびJavaScriptをピクセルに変換するためのブラウザーのアルゴリズムは、まとめてレンダリングパイプラインと呼ばれます。

レンダリングパイプラインは、JavaScript、スタイル、レイアウト、ペイント、コンポジット。
レンダリングパイプライン。

レンダリングパイプラインの各ステップが何を意味するのか理解していなくても大丈夫です。ここで理解しておくべき重要なことは、レンダリングパイプラインの各ステップで、ブラウザーが前の操作の結果を使用して新しいデータを作成することです。たとえば、コードがレイアウトをトリガーする何かを実行する場合、ペイントとコンポジットのステップを再度実行する必要があります。合成されていないアニメーションとは、レンダリングパイプラインの初期のステップ(スタイル、レイアウト、またはペイント)のいずれかをトリガーするアニメーションです。合成されていないアニメーションは、ブラウザに多くの作業を強制するため、パフォーマンスが低下します。

レンダリングパイプラインの詳細については、次のリソースを確認してください。

  • 最新のWebブラウザの内部を見る(パート3)
  • ペイントの複雑さを簡素化し、ペイント領域を減らします
  • コンポジターのみのプロパティに固執し、レイヤー数を管理します

Lighthouseが合成されていないアニメーションを検出する方法 #

アニメーションを合成できない場合、Chromeは失敗の理由をDevToolsトレースに報告します。これは、Lighthouseが読み取るものです。 Lighthouseは、合成されなかったアニメーションを持つDOMノードと、各アニメーションの失敗理由を一覧表示します。

アニメーションを確実に合成する方法 #

コンポジターのみのプロパティに固執し、レイヤー数と高性能アニメーションを管理するを参照してください。

資力 #

  • 合成されていないアニメーションを回避する監査のソースコード
  • コンポジターのみのプロパティに固執し、レイヤー数を管理します
  • 高性能アニメーション
  • ペイントの複雑さを簡素化し、ペイント領域を減らします
  • 最新のWebブラウザの内部を見る(パート3)
最終更新: Aug 12, 2020 — 記事を改善する
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.