ホームページ > 記事 > ウェブフロントエンド > CSS 属性の選択がアニメーションのパフォーマンスに与える影響_html/css_WEB-ITnose
CSS 属性の選択がアニメーションのパフォーマンスに与える影響_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:55:551142ブラウズ
携帯電話の比率がますます高まっている現在、さまざまなクールなページが次々と登場していますが、これらの特殊効果は CSS アニメーションと切り離すことができません。 CSS アニメーションに関して言えば、主流の状況は、ディスプレイスメントとデフォーメーションの 2 つのカテゴリに他なりません。アニメーションの特殊効果を作成する場合、そのパフォーマンスを向上させるにはどうすればよいでしょうか?もちろん、最初にブラウザ レンダリングの動作原理などの基本的な概念を理解する必要があります。私は複数の専門家が書いた関連記事を読んだ後、これらについてはある程度理解しています。興味のある学生のためにここでは詳しく説明しません。調べに行ってください。簡単かつ大雑把に言うと、この記事の目的は、アニメーションの描画にどの CSS プロパティを使用すればよいかということです。これにより、レンダリングおよび描画プロセスにおけるブラウザのパフォーマンスを効果的に向上させることができます。
早速本題に入ります。まずデモを見てみましょう。左と変換をそれぞれ使用して、2 秒で 500 ピクセルを右に変換しました。コードは次のとおりです。
<style>.box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}.box-ps{-webkit-animation:box-ps 2s linear;}.box-tf{-webkit-animation:box-tf 2s linear;}@-webkit-keyframes box-ps{0%{left:0;}100%{left:500px;}}@-webkit-keyframes box-tf{0%{-webkit-transform:translate(0,0);}100%{-webkit-transform:translate(500px,0);}}</style><body><div class="box-ps"></div><div class="box-tf"></div></body> 次に、Chrome で次の結果が得られました。最初の画像は left を使用したスクリーンショットで、2 つ目はtransform を使用したスクリーンショットです。
明らかに、フレーム モードでは、左側のフレームの数が変換よりも少ないことがわかり、レンダリングと描画時間の点では、左側の方が変換よりもはるかに長いことがわかります。これを見て、皆さんもう結論は出ていると思います。 Chrome の Show Paint Rectangle を使用して、アニメーション プロセス中のレンダリング領域と描画領域の違いを観察してみましょう。1 つ目は left を使用したスクリーンショットで、2 つ目は、transform を使用したスクリーンショットです:
left を使用して記述されたアニメーション全体の間、ブラウザーが描画していることがわかります。比較的言えば、transform を使用すると、アニメーションの最初と最後にのみ描画されます。したがって、アニメーションのパフォーマンスには変換の方が優れています。その理由として、ここでは再レイアウトをトリガーする概念を紹介します。
一部の属性を変更すると、それがレイアウト関連の属性である場合、再レイアウトがトリガーされ、結果として時間がかかります。レンダリングと描画は長くなります。したがって、アニメーションを作成するときは、幅、高さ、マージン、パディング、境界線、表示、上、右、下、左、位置、フロート、オーバーフローなどの属性を避ける必要があります。再レイアウトされないプロパティには、変換 (変換、回転、拡大縮小)、色、背景などが含まれます。
したがって、通常 CSS アニメーションを記述する場合は、表示されるアニメーション効果がよりスムーズになるように、再レイアウトをトリガーしない属性の使用を優先する必要があります。
この記事の著者: li、zhijia 転載元を明記してください: Ctrip Design Committee