CSS フロントエンドページレンダリング最適化属性 will-change の具体的な使用法

序文

スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くなり、間隔が非常に短くなります。イベントに多くの位置計算、DOM 操作、要素の再描画などの作業が含まれ、次のスクロール イベントがトリガーされる前にこれらのタスクを完了できない場合、ブラウザーでフレームがドロップされます (フレーム ドロップとは、たとえば、画像のちらつきやスムーズでない動きのことです)。さらに、ユーザーのマウススクロールは連続的に行われることが多く、スクロールイベントが継続的にトリガーされ、フレームドロップが拡大し、ブラウザの CPU 使用率が増加して、ユーザーエクスペリエンスに影響を与えます。

CSS プロパティ will-change は、要素に発生する変更をブラウザに通知する方法を Web 開発者に提供します。これにより、ブラウザは要素のプロパティが実際に変更される前に、対応する最適化の準備を事前に行うことができます。この最適化により、複雑な計算作業を事前に準備できるため、ページの応答性と感度が向上します。

準備知識

CPU

CPU は中央処理装置の略です。その主な機能は、コンピュータの命令を解釈し、コンピュータ ソフトウェアでデータを処理することです。マザーボードとも呼ばれます。

グラフィックプロセッサ

GPU は、グラフィックス関連のハードウェアの処理と描画に特化したグラフィックス プロセッシング ユニットです。 GPU は、複雑な数学的および幾何学的な計算を実行するように特別に設計されており、CPU をグラフィックス処理タスクから解放し、他のシステム タスクをより多く実行できるようにします。

ハードウェアアクセラレーション

ハードウェア アクセラレーションとは、グラフィック プロセッシング ユニット (GPU) が中央処理装置 (CPU) に代わって負荷の高いタスクを実行し、ブラウザーがページをすばやくレンダリングするのを支援することを意味します。CSS 操作でハードウェア アクセラレーションを使用すると、通常、ページのレンダリングが高速化されます。

ブラウザがページをレンダリングするプロセス:

1. HTMLパーサー

2. DOMツリーの構築

3. レンダリングツリーの構築

4. レンダリングツリーのペイント

簡単に説明すると、ブラウザはリクエストを通じてサーバーから返された HTML を取得します。HTML はツリー構造であるため、ブラウザはそれを解析して DOM ツリーを生成します。 CSS が解析された後、シミュレートされたツリー CSSOM ツリーと DOM ツリーが結合されてレンダリング ツリーが構築され、最終的にペイントに使用されます。

CSS アニメーション、変換、グラデーションでは、GPU アクセラレーションが自動的にトリガーされるのではなく、代わりにブラウザのわずかに遅いソフトウェア レンダリング エンジンが使用されます。遷移、変換、アニメーションの世界では、処理を高速化するためにプロセスを GPU にオフロードすることが適切です。 3D 変換のみに独自のレイヤーがあり、2D 変換にはありません。

変わる

1. 意志変化とは何ですか?

will-changeの機能は、要素がどのようなアニメーションを行うかを事前にブラウザに通知し、ブラウザが事前に適切な最適化設定を準備できるようにすることです。

公式ドキュメントには次のように書かれています: これはまだ実験段階の機能であるため、この構文の機能と動作はブラウザの将来のバージョンで変更される可能性があります。

CSS3 will-change は Web 標準属性であり、互換性の観点から Chrome/FireFox/Opera はすべてこれをサポートしています。

注意: will-change は、実際の動作がトリガーされる前にブラウザに「それをトリガーします」と伝えます。つまり、3D 変換で GPU に強制的に切り替える代わりに、専用のプロパティを使用してブラウザに今後の変更に注意するよう通知し、メモリを最適化して割り当てることができるようになりました。事前に予約してゆっくりお過ごしください。

2. 文法

変更予定: 自動
変更: スクロール位置
変更予定: 内容
will-change: transform // <custom-ident> の例 
will-change: opacity // <custom-ident> の例
will-change: left, top // 2 つの <animateable-feature> の例

変更予定: 未設定
変更予定: 初期
変更予定: 継承

自動車

つまり、どのプロパティが変更されるかについての具体的な指定はなく、ブラウザは推測して、ブラウザで一般的に使用されるいくつかの一般的な方法を使用して最適化する必要があります。

可能な値は次のとおりです:

スクロール位置

開発者が近い将来にスクロールバーの位置を変更したり、アニメーション化したりすることを望んでいることを示します。

コンテンツ

開発者が近い将来に要素のコンテンツを変更したり、アニメーション化したりしたいことを示します。

開発者が近い将来に指定されたプロパティ名を変更またはアニメーション化することを望んでいることを示します。属性名が略語の場合、対応するすべての略語または完全な属性を表します。

意志変化の使用

ホバーを使用する

will-changeは常にマウントされるため、デフォルト状態に直接書き込まないでください。

.変更されます {
  変更します: 変換します;
  遷移: 変換 0.3 秒;
}
.will-change:hover {
  変換: スケール(1.5);
}

親要素にマウスを置いたときに will-change を宣言すると、親要素が移動されたときに自動的に削除され、トリガーされる範囲は基本的に有効な要素の範囲になります。

.will-change-parent:hover .will-change {
  変更します: 変換します;
}
.変更されます {
  遷移: 変換 0.3 秒;
}
.will-change:hover {
  変換: スケール(1.5);
}

JSの使用法

var el = document.getElementById('要素');

// マウスが要素上に移動すると、要素に will-change 属性を設定します el.addEventListener('mouseenter', hintBrowser);
// CSS アニメーションが終了したら will-change プロパティをクリアします el.addEventListener('animationEnd', removeHint);

関数ヒントブラウザ() {
  // CSS アニメーションで変更されることが分かっている CSS プロパティ名を入力します。this.style.willChange = 'transform, opacity';
}

関数removeHint() {
  this.style.willChange = '自動';
}

アルバムやスライドショーなど、キーボードを押すとページがめくれるアプリケーションで、ページが大きく複雑な場合は、スタイルシートに will-change を記述するのが適切です。これにより、ブラウザは事前に遷移を準備できるため、キーボードが押されたときにすぐに滑らかで素早いアニメーションを見ることができます。

.スライド{
  変更します: 変換します;
}

will-changeの使用に関する注意

will-change をあまり多くの要素に適用しないでください。

ブラウザはすでに、可能な限りすべてを最適化しようと最善を尽くしています。より強力な最適化のいくつかは、will-change と組み合わせると、大量のマシン リソースを消費する可能性があります。過度に使用すると、ページの応答が遅くなったり、大量のリソースを消費したりする可能性があります。

控えめに使用してください:

通常、要素が元の状態に復元されると、ブラウザは以前に行われた最適化作業をすべて破棄します。ただし、ターゲット要素が頻繁に変更される可能性があることを示す will-change プロパティをスタイル シート内で直接明示的に宣言すると、ブラウザーは最適化作業を以前よりも長く保存できるようになります。したがって、ベストプラクティスは、要素の変更前と変更後にスクリプトを使用して will-change の値を切り替えることです。

will-change 最適化をあまり早く適用しないでください。

ページにパフォーマンス上の問題がない場合は、速度を少しでも上げるために will-change 属性を追加しないでください。 will-change は、既存のパフォーマンスの問題を修正するための最後の手段となる最適化として設計されました。パフォーマンスの問題を防ぐために使用しないでください。意志変更の過剰使用 これにより、ブラウザが起こり得る変更に備えようとするため、メモリ使用量が大きくなり、レンダリング プロセスがより複雑になる可能性があります。これにより、より深刻なパフォーマンスの問題が発生する可能性があります。

十分な時間をかけて作業してください。

この属性は、ページ開発者が、どのプロパティが変更される可能性があるかをブラウザに通知するために使用されます。ブラウザは、変更が発生する前に事前に最適化作業を実行することを選択できます。したがって、ブラウザが実際にこれらの最適化を実行するための時間を与えることが非常に重要です。これを使用する場合は、要素の起こりうる変更を事前に一定の時間知る方法を見つけて、それに will-change 属性を追加する必要があります。

CSS フロントエンド ページ レンダリング最適化属性 will-change の具体的な使用法については、これで終わりです。CSS will-change に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。