CSS3 アニメーション (パフォーマンス)_html/css_WEB-ITnose

前に書いてあります

PC のシナリオと比較して、高パフォーマンスのモバイル Web では、考慮すべき要素がますます複雑になります: トラフィック、消費電力、および流暢さ 。

PC 時代では、エクスペリエンスのスムーズさにより多くの注意を払っていますが、モバイル側の豊富なシナリオでは、ユーザー基地局のネットワーク トラフィックの使用量と、基地局の電力消費に特別な注意を払う必要があります。装備。

流暢さに関しては、主にフロントエンド アニメーションに反映されます。既存のフロントエンド アニメーション システムには、通常、JS アニメーションと CSS3 アニメーションの 2 つのモードがあります。 JS アニメーションは、JS を使用してスタイルを動的に書き換えてアニメーション機能を実現するソリューションであり、ローエンドのブラウザーと互換性のある PC に推奨されるソリューションです。 モバイル側では、よりパフォーマンスの高いネイティブ ブラウザ実装である CSS3 アニメーションを選択します。

ただし、CSS3 アニメーションは、モバイル マルチターミナル デバイスのシナリオでは PC よりも多くのパフォーマンスの問題に直面し、主にアニメーションの途切れやちらつきに反映されます。

現在、モバイル端末での CSS3 アニメーション エクスペリエンスを向上させる主な方法がいくつかあります。

可能な限り多くのハードウェア機能を使用します (3D 変形はより多くのメモリと電力消費を消費するため、パフォーマンスに問題がある場合にのみ使用してください。これもトレードオフです)

1. 3D 変形を使用して GPU アクセラレーションをオンにします

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

2. アニメーション中にちらつきがある場合 (通常はアニメーションの開始時に発生します)、次のハックを試すことができます

-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;

3. 要素translate3d を使用して右に 500 ピクセル移動するアニメーションの滑らかさは、left 属性を使用するよりも大幅に向上します

CSS アニメーション属性により、ページ全体の再配置、再描画、再合成がトリガーされます

通常、ペイントはその中で最も高価であるため、できるだけ避けてください。 ペイントをトリガーする CSS アニメーション プロパティを使用します。 これが、CSS アニメーションで left: 3em を使用する代わりに webkit-transform: translationX(3em) を使用することをお勧めする理由です。 left はさらにレイアウトとペイントをトリガーしますが、webkit-transform はページ全体のコンポジットのみをトリガーします (これが、CSS アニメーションでは left: 500px の代わりに webkit-transform: translationX(500px) を使用することをお勧めする理由です)

ボックス シャドウとグラデーションはできるだけ使用しないようにします

ボックス シャドウとグラデーションは、特に 1 つの要素で同時に使用される場合、ページのパフォーマンスを低下させることが多いため、フラット デザインを採用してください

アニメーション要素を排除するドキュメント フローを可能な限り減らしてリフローを削減します

#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;}

DOM レイアウトのパフォーマンスを最適化します

div {  -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;}/*第一种方案  用css属性left*/@-webkit-keyframes move{    from {        left: 100px;    }    to {        left: 200px;    }}/*第二种方案  用css3动画属性translateX*/@-webkit-keyframes move{    from {        -webkit-transform: translateX(100px);    }    to {        -webkit-transform: translateX(200px);    }}

offsetWidth/Height 属性を継続的に読み取り、width/height 属性を継続的に設定すると、レイアウトをトリガーする回数が 1 回少なくなります。単一の属性を個別に読み取り、設定します。結論から言うと、これはブラウザの最適化戦略が関係しているようです。

レイアウトをトリガーできるすべての操作は一時的にレイアウトキューに入れられます

、

更新する必要がある場合、キュー全体のすべての操作の結果が計算されます

。そのため、レイアウトは 1 回だけ実行でき、それによって改善されますパフォーマンス。

レイアウトはどのような操作で更新されますか (リフローまたは再レイアウトとも呼ばれます)? 要素: clientHeight、clientLeft、clientTop、clientWidth、focus()、getBoundingClientRect()、getClientRects()、innerText、offsetHeight、offsetLeft、offsetParent、offsetTop、offsetWidth、outerText、scrollByLines()、scrollByPages()、scrollHeight 、scrollIntoView()、scrollIntoViewIfNeeded()、scrollLeft、scrollTop、scrollWidth

Frame、HTMLImageElement: 高さ、幅

Range: getBoundingClientRect()、getClientRects()

SVGLocatable: computeCTM()、getBBox()

SVGTextContent

: getCharNumAtPosition()、getComputedTextLength()、getEndPositionOfChar()、getExtentOfChar()、getNumberOfChars()、getRotationOfChar()、getStartPositionOfChar()、 ) 、selectSubString()

SVGUse

: インスタンスルート

ウィンドウ

: getComputedStyle()、scrollBy()、scrollTo()、scrollX、scrollY、webkitConvertPointFromNodeToPage()、webkitConvertPointFromPageToNode()

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