CSS: will-change指定時の挙動, パフォーマンスへの影響と考察 - Qiita

※will-changeは編集時点(2016/07/27)でCandidate Recommendationの状態です。仕様変更による挙動差異などがあれば適宜コメントを頂けるとありがたいです。 TL;DR 使いどころ JavaScriptでアニメーションを行う際 CSS animation, transitionを:hover等で遅延実行する際 などの、初期値として変形やアニメーションの値を持たない要素を特定の要因で実行する際に効果を発揮する ユースケースによって、常に指定するか、動かす直前から指定して終了時に解除するかを判断する 最適化はUAごとに異なっており、かつ指定したからといって必ず恩恵が得られるものではない "おまじない"的な使い方も有りだが、本当にパフォーマンスが必要な場面で有効かどうかはブラウザの実装を調べるのがてっとり早い 前提知識 Webブラウザのレンダリングの仕組み ブ

[hisasann]

Composited Layer

[Rockridge]

Firefox／Chromeにおけるwill-changeの実装状況を詳細に解説している。「最適化はUAごとに異なっており、かつ指定したからといって必ず恩恵が得られるものではない」。

[efcl]

CSSの`will-change`の効果の検証とブラウザの実装(ソースコード)について。 指定した値毎の挙動についてなど

[gayou]

will-changeを良い使い方指南