CSS におけるアニメーションプロパティのパフォーマンスに関するグラフィックおよびテキストコードの紹介-CSSチュートリアル-php.cn

CSS アニメーションプロパティは、ページ全体の再レイアウト、再ペイント、再合成をトリガーします。

ペイントをトリガーする CSS アニメーションプロパティの使用は避けるようにしてください。これが、CSS アニメーションプロパティの使用をお勧めする理由です。、 left: 3em の代わりに webkit-transform: translationX(3em) を使用します。 left はレイアウトとペイントを追加でトリガーしますが、 webkit-transform はページ全体の合成のみをトリガーします

p { -webkit-animation-duration: 5s; -webkit-animation-name: move; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: #808080; position: absolute; }

ログイン後にコピー

@-webkit-keyframes move{ from { left: 100px; } to { left: 200px; } }

ログイン後にコピー

CSS におけるアニメーションプロパティのパフォーマンスに関するグラフィックおよびテキストコードの紹介

@-webkit-keyframes move{ from { -webkit-transform: translateX(100px); } to { -webkit-transform: translateX(200px); } }

ログイン後にコピー

CSS におけるアニメーションプロパティのパフォーマンスに関するグラフィックおよびテキストコードの紹介

CSS プロパティは CSS アニメーションで動作します

-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

ログイン後にコピー

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;

ログイン後にコピー

#ball-1 { transition: -webkit-transform .5s ease; -webkit-transform: translate3d(0, 0, 0); } #ball-1.slidein { -webkit-transform: translate3d(500px, 0, 0); } #ball-2 { transition: left .5s ease; left: 0; } #ball-2.slidein { left: 500px; }

ログイン後にコピー

position: fixed; position: absolute;

ログイン後にコピー

var newWidth = ap.offsetWidth + 10; ap.style.width = newWidth + 'px'; var newHeight = ap.offsetHeight + 10; ap.style.height = newHeight + 'px'; var newWidth = ap.offsetWidth + 10; var newHeight = ap.offsetHeight + 10; ap.style.width = newWidth + 'px'; ap.style.height = newHeight + 'px';

ログイン後にコピー

// 触发两次 layout var newWidth = ap.offsetWidth + 10; // Read ap.style.width = newWidth + 'px'; // Write var newHeight = ap.offsetHeight + 10; // Read ap.style.height = newHeight + 'px'; // Write // 只触发一次 layout var newWidth = ap.offsetWidth + 10; // Read var newHeight = ap.offsetHeight + 10; // Read ap.style.width = newWidth + 'px'; // Write ap.style.height = newHeight + 'px'; // Write

ログイン後にコピー

offsetWidth/Height プロパティの連続読み取りと width/height プロパティの連続設定と比較して、パターンを見つけることができます。それぞれ、単一のプロパティの読み取りと設定により、レイアウトをトリガーする回数が 1 回減ります。

結論から言うと、これはブラウザの最適化戦略に関係しているようです。レイアウトをトリガーできるすべての操作は、レイアウトキューに一時的に配置され、更新する必要がある場合、キュー全体のすべての操作の結果が計算されるため、レイアウトは 1 回だけ実行できるため、パフォーマンスが向上します。

重要なのは、レイアウトをトリガーできる操作です (リフローまたは再レイアウトとも呼ばれます)。

オープンソースの Webkit/Blink を例として、ブラウザのソースコードの実装から始めます。Webkit は主に Document::updateLayout と Document::updateLayoutIgnorePendingStylesheets の 2 つのメソッドを使用します。これは、 updateLayout メソッドの拡張機能でもある updateLayoutIgnorePendingStylesheets メソッドの内部実装からもわかります。また、既存のレイアウト更新モードでは、ほとんどのシナリオで updateLayoutIgnorePendingStylesheets を呼び出してレイアウトを更新します。

以上がCSS におけるアニメーションプロパティのパフォーマンスに関するグラフィックおよびテキストコードの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。