CSS ページレンダリング最適化プロパティ will-change

前の言葉

特定の動作（クリック、移動、スクロール）によってページをトリガーして広い領域を描画するとき、ブラウザは多くの場合準備がされておらず、事前の準備がないため、計算と再描画に受動的に CPU を使用することしかできません。 、レンダリングに対処するのが難しく、フレームが落ちて固まってしまいました。 CSS 属性 will-change は、Web 開発者に要素にどのような変更が加えられるかをブラウザーに伝える方法を提供します。これにより、ブラウザーは、要素の属性が実際に変更される前に、対応する最適化の準備を事前に行うことができます。この最適化により、複雑な計算作業の一部を事前に準備できるため、ページの応答性が向上します。この記事では、CSS プロパティ will-change について紹介します

準備知識

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

いわゆるハードウェア アクセラレーションとは、コンピューターを使用して非常に大量の計算を処理することです。 CPU のワークロードを軽減するために、作業は専用のハードウェアに割り当てられます

CSS アニメーション、変換、およびグラデーションは、GPU アクセラレーションを自動的にトリガーしませんが、ブラウザーのわずかに遅いソフトウェア レンダリング エンジンを使用します。 transition、transform、animation の世界では、処理を高速化するためにプロセスを GPU にオフロードする必要があります。独自のレイヤーを持つのは 3D 変形のみで、2D 変形にはありませんtransition、transform和animation的世界里，应该卸载进程到GPU以加速速度。只有3D变形会有自己的layer，而2D变形则不会

【Hack】

  使用translateZ()或translate3d()方法为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。但是，代价是这种情况通过向它自己的层叠加元素，占用了RAM和GPU的存储空间，且无法确定空间释放时间

 

语法

will-change

  功能: 提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

  值: auto | <animateable-feature></animateable-feature>

  初始值: auto

  应用于: 所有元素

  继承性: 无

  兼容性: IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+

  auto表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化

  <animateable-feature></animateable-feature>可以是以下值：

  scroll-position表示开发者希望在不久后改变滚动条的位置或者使之产生动画

  contents表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画

  <custom-ident></custom-ident>表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性

 

使用

【使用hover】

  不要像下面这样直接写在默认状态中，因为will-change会一直挂着：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

  可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

【使用javascript脚本】

.sidebar {
  will-change: transform;
}

  以上示例在样式表中直接添加了will-change属性，会导致浏览器将对应的优化工作一直保存在内存中，这其实是不必要的。下面展示如何使用脚本正确地应用will-change

【ハック】

変更を加えない場合は、translateZ() または translate3d() メソッドを使用します。要素の 3D 変形により、ブラウザをだましてハードウェア アクセラレーションをトリガーします。ただし、この状況では要素を独自のレイヤーにオーバーレイすることで RAM と GPU のストレージ スペースが占有され、スペースの解放時間が決定できないという代償が伴います

構文

変更予定

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

値: auto | <animateable-feature></animateable-feature>🎜🎜 初期値: auto 🎜🎜 適用先：すべての要素 🎜🎜 継承：なし 🎜🎜 互換性：IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+🎜🎜 Auto は、ブラウザが変更する属性の特定の仕様がないことを意味します。ブラウザでよく使用されるいくつかの一般的なメソッドの最適化 🎜🎜 <animateable-feature></animateable-feature> には、次の値を指定できます。 🎜🎜 scroll-position は、次のことを示します。開発者は近い将来にスクロールを変更したい バーの位置またはアニメーション化🎜🎜 contents は、開発者が近い将来に要素のコンテンツの何かを変更したいことを示します。または、アニメーション化する🎜🎜 <custom-ident> 開発者が、指定されたプロパティ名を変更するか、近い将来アニメーション化することを希望していることを示します。属性名が略語の場合は、対応するすべての略語または完全長の属性を表します 🎜🎜 🎜🎜使用🎜🎜【ホバーを使用】🎜🎜 will-changeなので以下のようにデフォルトの状態で直接記述しないでください常にハングします 作成者: 🎜<pre class="brush:php;toolbar:false">var el = document.getElementById('element'); // 当鼠标移动到该元素上时给该元素设置 will-change 属性 el.addEventListener('mouseenter', hintBrowser); // 当 CSS 动画结束后清除 will-change 属性 el.addEventListener('animationEnd', removeHint); function hintBrowser() {   // 填写在CSS动画中发生改变的CSS属性名   this.style.willChange = 'transform, opacity'; } function removeHint() {   this.style.willChange = 'auto'; }</pre>🎜 親要素がホバーしているときに will-change を宣言できるので、親要素が移動されたときに自動的に削除されます。トリガー範囲は基本的に有効な要素範囲です 🎜<pre class="brush:php;toolbar:false">.slide {   will-change: transform; }</pre>🎜【JavaScript スクリプトを使用】 🎜rrreee🎜 上記の例 will-change 属性をスタイルシートに直接追加すると、ブラウザは対応する最適化作業をメモリに保存しますが、これは実際には不要です。以下は、スクリプトを使用して <code>will-change 属性を正しく適用する方法を示しています🎜rrreee🎜【直接使用】🎜🎜 ただし、フォトアルバムなど、キーボードを押すとページがめくられるアプリケーションの場合は、またはスライドショークラスの場合、そのページは非常に大きく複雑です。現時点では、スタイルシートに will-change を記述するのが適切です。こうすることで、あらかじめブラウザに遷移アニメーションを用意しておき、キーボードを押したときに柔軟で軽快なアニメーションを見ることができます🎜rrreee🎜🎜🎜注意事項🎜🎜 1. あまりにも多くの要素に will-change を適用しないでください: サーバーを参照最適化できるものはすべて最適化するために最善を尽くしてきました。 will-change と組み合わせると、大量のマシン リソースを消費する可能性のある、より強力な最適化がいくつかあります。これを過度に使用すると、ページの応答が遅くなったり、大量のリソースが消費されたりする可能性があります。 2. 使用は控えめにしてください。要素が元の状態に復元されると、ブラウザはそれまでの最適化作業をすべて破棄します。ただし、will-change 属性がスタイル シート内で直接明示的に宣言されている場合、ターゲット要素が頻繁に変更される可能性があることを意味し、ブラウザは最適化作業を以前よりも長く保存することになります。したがって、ベストプラクティスは、要素の変更の前後にスクリプトを通じて will-change の値を切り替えることです🎜

3. will-change 最適化を時期尚早に適用しないでください。ページにパフォーマンスの問題がない場合は、速度を少しでも低下させるために will-change 属性を追加しないでください。 will-change の本来の設計意図は、既存のパフォーマンスの問題を解決しようとする最後の手段の最適化方法です。パフォーマンスの問題を防ぐためには使用しないでください。 will-change を過度に使用すると、ブラウザーが起こり得る変更に備えようとするため、大量のメモリ使用量が発生し、レンダリング プロセスがより複雑になる可能性があります。これは、より深刻なパフォーマンスの問題につながります

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

CSS ページ レンダリングの最適化属性の詳細については、will-change 関連を参照してください。記事をご覧の際は、PHP 中国語 Web サイトにご注意ください。