[転送] CSS3 will-change を使用してページのスクロール、アニメーション、その他のレンダリングのパフォーマンスを向上させる - Zhang Xinxu_html/css_WEB-ITnose

1. まず例を見てみましょう

次の例は外国語のものですが、ここで簡単に言い換えます。

視差スクロールは今非常に人気があるのではないでしょうか? その後、Chris Ruppel が、スクロール バーを使用せずに背景画像をスクロールする効果を実現するために、background-attachment: fix を使用したところ、ページの描画パフォーマンスが 30 フレームに低下したことがわかりました。この種のフレーム レートでは、人間の目はすでにある種のフラストレーションを感じることがあります。

その後、他の同僚や同僚の提案に基づいていくつかの最適化を行いました。その後、ページのレンダリング パフォーマンスが向上しました -

この最適化を行う前は、完全に便秘になっており、実行できないように感じていました。うんこ; しかし、最適化の後は、すべてが終わったように感じられ、ズボンを脱ぐ暇さえありませんでした。

ある兄弟は便秘に悩まされており、長い間トイレで排便できません。
彼が一生懸命働いている間、彼は嵐のようにトイレに駆け込み、彼の隣の席に入るとすぐに、本当に激しい嵐があったのを見て、兄はもう一人の兄弟に羨ましそうに言いました。あなたはとても！
男は言いました：なぜ羨ましいのですか？私はまだパンツを脱いでいません。 。 。

レンダリングをこれほど大幅に向上させるためにどのような魔法が使用されているのか、誰もがきっと興味を持つでしょう。 3 つの小さなヒント:

1. background-attachment:fixed は、position:fixed に変更されました。これは、前のものがリアルタイムでスクロールして再描画を計算するためです。
2. 背景画像が配置されている要素は、疑似 ::before に置き換えられます。要素;
3. CSS3 が使用されます。 Will-change が高速化されます。

関連するコードは次のとおりです (クラス名が先頭であると仮定します):

.front::before {    content: '';    position: fixed; // 代替background-attachment    width: 100%;    height: 100%;    top: 0;    left: 0;    background-color: white;    background: url(/img/front/mm.jpg) no-repeat center center;    background-size: cover;    will-change: transform; // 创建新的渲染层    z-index: -1;  }

OK、主人公が現れました、それは will-change です。これは地獄ですか？

2. CSS3 will-change がデビュー

CSS3 will-change はまだドラフト段階ですが、Chrome/FireFox/Opera はすべて互換性をサポートしています。 。

この属性の機能は非常に単純で、「ページ レンダリングのパフォーマンスを向上させる」というものです。では、どのように強化されているのでしょうか？

3D 変換により、translate3D、scaleZ などの GPU アクセラレーション①が可能になるという話を聞いたことがあるかもしれません。しかし、これらの属性は、業界ではハック アクセラレーション メソッドと呼ばれることがよくあります。実際には Z 軸の変更は必要ありませんが、それでもブラウザを欺くために偽の方法で宣言します。これは実際には非人道的なアプローチです。

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

Will-change は、その名前が「私の形を変えるつもりです」を意味するように、この目的のために設計されており、丁寧でフレンドリーです。

幾何学教師: 「生徒たち、注意してください。変形し始めます。」

ははは、笑わないでください。それは本当だ。

特定の動作 (クリック、移動、スクロール) によってページをトリガーして広い領域を描画する場合、ブラウザーは多くの場合準備ができておらず、事前の準備がないため、CPU を受動的に使用して計算および再描画することしかできません。レンダリングに対処するのが難しく、フレームが落ちたりフリーズしたりするのが非常に迷惑です。 Will-change は、実際の動作がトリガーされる前にブラウザに次のように伝えます。「ブラウザ、私はすぐに変身します。あなたは精神的にも肉体的にも準備ができています。」それ以来、ブラウザーのクラスメートは、今後の変革に冷静に対処するために GPU を起動しました。

これは非常に当然のことですが、事前に予約をして、予定外に訪問するとバタバタしてしまいます。

この属性の構文は MDN で次のように示されています:

/* 关键字值 */will-change: auto;will-change: scroll-position;will-change: contents;will-change: transform; /* <custom-ident>示例 */will-change: opacity; /* <custom-ident>示例 */will-change: left, top; /* 两个<animateable-feature>示例 *//* 全局值 */will-change: inherit;will-change: initial;will-change: unset;

その中には:
auto
width:auto と同じように、これはおそらく他の比較的厄介な値をリセットするために実際には役に立ちませんでした。 。

scroll-position
は、ブラウザにスクロールを開始するように指示します。

contents
は、コンテンツをアニメーション化するか変更する必要があることをブラウザーに指示します。

名前が示すように、カスタマイズされた ID。非標準名は MDN 独自の名前である必要があり、将来的には仕様に明確に書き込まれる可能性があります。例えば、アニメーションの名前、カウンタリセットの名前、カウンタインクリメント定義などです。

上に 2 つの例を示します。1 つは変換、もう 1 つは不透明度で、これらは CSS3 アニメーションの共通プロパティです。指定されたプロパティが略語の場合、すべての略語に関連するプロパティの変更がトリガーされます。同時に、次のキーワード値を指定することはできません: unset、initial、inherit、will-change、auto、scroll-position、または content。

一部の機能値は、アニメ化される。たとえば、左、上、マージンなどです。モバイル側では、非変形属性や不透明属性のアニメーションパフォーマンスが低いため、独自の目的での left/top/margin などの使用は避けることをお勧めします。ただし、マージン属性が大きいと感じてそれを使用したい場合は、will-change:margin を追加してみると、よりスムーズになる可能性があります (モバイル端末のサポートはまだあまり良くありません)。

今のところ、基本的に使用されるものは次のとおりです:

.example {  will-change: transform;}

三、CSS3 will-change使用注意事项

will-change虽然可以加速，但是，一定一定要适度使用。那种全局都开启will-change等待模式的做法，无疑是死路一条。尼玛，用脚趾头想想也知道，你让浏览器各个元素都随时GPU渲染加速待命，还是妥妥搞死！

说到这里，想到了移动端的GPU加速。很多自以为然的同学写CSS3动画的时候，或者静态属性的时候，动不动就把translateZ之类GPU hack属性写上。同学们啊，GPU这玩意提高页面渲染性能它是有代价的呀，什么代价呢，就是手机的电量。你真以为有“既要马儿跑，又要马儿不吃草”的好事情啊！

平时，我们一般地CSS动画，平常的渲染处理，手机都是可以比较流畅的。完全没有必要以牺牲其他东西来实现。手机上的电量弥足珍贵。如果发现(尤其Android)机子h5页面不流畅，找找看是不是动画属性使用问题，或者非可视动画层没隐藏等等原因。

回到will-change. 同样的，will-change的使用也要谨慎，遵循最小化影响原则，所以，一开始的例子，才使用伪元素去搞，独立渲染（虽然我没看出来这个梗在什么地方）。

sitePoint网站上的这篇文章展示了几个处理例子：

不要这样直接写在默认状态中，因为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);}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，于是（示意，不要在意细节）：

dom.onmousedown = function() {    target.style.willChange = 'transform';};dom.onclick = function() {    // target动画哔哩哔哩...};target.onanimationend = function() {    // 动画结束回调，移除will-change    this.style.willChange = 'auto';};

等。

四、参考文章

Fix scrolling performance with CSS will-change property

MDN:will-change

An Introduction to the CSS will-change Property

本文内容均属于外文整理收集，加上自己理解书写。内容并未亲自实践验证，因此，不能保证100%正确，仅供大家学习参考。

如果文中有什么表述不准确的地方，欢迎大力指正，感谢阅读，欢迎交流！

本文为原创文章，包含脚本行为，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=5025

（本篇完）