web-dev-qa-db-ja.com

CSS `will-change`-使い方、仕組み

CSS will-changeW3.org docs 、 MDN docs プロパティ（Chromeで既に動作し、FirefoxとOperaで部分的にサポートされています））が、どのように動作するのかはよくわかりません。

ブラウザーが将来要素の計算を準備できるようになることを読んだばかりです。誤解したくありません。そこで、いくつか質問があります。

  1. このプロパティを要素クラスまたはそのホバー状態に追加する必要がありますか？

    .my-class{
    will-change: 'opacity, transform'
}
.my-class:hover{
    opacity: 0.5
}
.my-class:active{
    transform: rotate(5deg);
}

    OR

    .my-class{
    ...
}
.my-class:hover{
    will-change: 'opacity'
    opacity: 0.5
}
.my-class:active{
    will-change: 'transform'
    transform: rotate(5deg);
}

  2. ブラウザのパフォーマンスをどのように向上させることができますか？理論的には、CSSが読み込まれると、ブラウザーは各要素で何が起こるかを既に「知っている」のではないでしょうか。

それを効率的に使用する方法を示す良い例を追加できれば、感謝します:)

csscss3will-change
51
LJ Wadowski

記事 全体をコピーして貼り付けませんが、ここにtl; drバージョンがあります。

変更する内容を正確に指定することで、ブラウザはこれらの特定の変更に対して行う必要がある最適化について、より適切な決定を下すことができます。これは明らかに、ハックに頼らずにブラウザをレイヤー作成に強制することなく速度向上を達成するためのより良い方法です。

それの使い方：

will-change: transform, opacity;

使用しない方法：

will-change: all;

.potato:hover {
  will-change: opacity;
  opacity:1;
}

ホバーでwill-changeを指定しても効果はありません。

変更する直前に要素にwill-changeを設定しても、ほとんど効果はありません。 （実際には、まったく設定しないよりも悪い場合があります。アニメーション化するものが以前に新しいレイヤーに適格でなかった場合、新しいレイヤーのコストが発生する可能性があります！）

28
Patsy Issa

_will-change_プロパティがどのように機能し、どのように使用するかを検索することに時間を費やしました。役に立つ要約になることを願っています。回答ありがとうございます。

1。 Layers Hack/Null Transform Hack

「古代」（2年前など）で、CSSアニメーションをより速く描画できることを誰かが発見しました。

どのように機能しますか？

transform: translateZ(0)をcssセレクターに追加すると、ブラウザーはこのセレクターを持つ要素を新しいコンポジターレイヤーに強制的に移動します。さらに、パフォーマンスが向上します（ほとんどの場合、CPUではなくGPUのパワーを使用します） 詳細はこちら 。

2。さようならハック、「will-change：」を歓迎します

おそらく、レイヤーハックに別れを告げるのは時期尚早ですが、この時間はまもなく来るでしょう。新しいプロパティ_will change_はCSSの仕様に登場し、レイヤーハックの後継者となります。

3。ブラウザのサポート

現在のところ、ChromeおよびOperaで利用可能であり、Firefoxでも部分的にサポートされています。

4。適切に使用する方法

アニメーションの実装が完了するまで、CSSの任意の場所でwill-changeを使用しないでください。その場合にのみ、CSSに戻ってwill-changeを適用する必要があります。 その他

これはおそらくあなたが得ることができる最も貴重なアドバイスです。

アクションを開始する直前に使用する意味はありません。セレクタの_:hover_状態に追加します。ブラウザーには、変更が発生する前に最適化を準備する時間が必要ないためです。ブラウザには約200ミリ秒の最適化を適用するため、たとえば、親要素がホバー状態にあるときに_will-change_を要素に追加することをお勧めします。 その他

例：

_ .parent:hover .change{
     will-change: opacity;
 }
 .change:hover{
    opacity: .5;
 }
_

本当に控えめに使用する必要があります。すべてを最適化する場合、結果は予想される結果とは逆になります。 _will-change_は、ブラウザーに最適化を有効にしたままにし、将来発生する可能性のない変更のためにメモリーなどのリソースを予約します。不要になった場合は、後で_will-change_をオフにすることをお勧めします。アニメーションが終了したとき。

JavaScript document.getElementById('my_element_id').style.willChange = off;を使用して簡単に実行できます

15
LJ Wadowski

CSSの助けを借りて、さまざまなアニメーションを実行できるようになり、このアニメーションがCPUのボトルネックになることがあります。したがって、CPUでこのジョブを実行する代わりに、このタスクにGPUを使用するのが良いでしょう。そして少し前に、人々は次のようなことをすることで2D変換のためにこれを行うトリックを使い始めました：

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

これにより、ブラウザーは3D変換を実行していると見なされ、すべての3D変換がGPUを使用しているため、CPUの負荷が軽減されます。これはハックに見えます（実際はそうであるため）およびwill-changeプロパティは、将来の変更を確認するようブラウザに通知することでこれを変更し、それに応じてメモリを最適化して割り当てます。

W3Cドラフト に基づいて、

Will-change CSSプロパティ…により、作成者はUAにエレメントにどのような変更を加える可能性があるかを事前に通知できます。これにより、UAは要素の処理方法を事前に最適化して、アニメーションが実際に開始される前に、アニメーションの準備に潜在的に高価な作業を実行できます。

使用することをお勧めしますwill-changeは、要素にどのような変更が予想されるかをブラウザに事前に知らせることです。これにより、ブラウザは事前に適切な最適化を行うことができ、レンダリングが高速化されます。

この情報は この優れた説明から about will-changeプロパティ。この記事には、使用するのが良い場合や、役に立たない場合や有害である場合の追加の例があります。

7
Salvador Dali

私の知る限りでは...

  1. Translate-z：0の代替です。
  2. ホバーについては知りませんが、JSによって徐々に変更されるプロパティ、不透明度の変更、スクロール中の位置などで使用するのが最善です。
  3. 特に電話やタブレットでは、このプロパティを過度に使用しないでください。これをあまりにも多くの要素で使用すると、パフォーマンスの問題が発生する可能性があります。
  4. JSは、関連性がなくなったときにこのプロパティを削除/オフにすることをお勧めします。

したがって、使用例としては、スクロールのある時点でscrollTop：400を使用して適用し、次に不透明度を徐々にアニメートし、たとえばscrollTop：500で意志の変更を再び無効にします。

出典：shoptalkshow podcast-この記事に言及- https://dev.opera.com/articles/css-will-change-property/ -whichおそらく私の投稿よりも良い情報源です：D

3
Martin Malinda