CSSアニメーションプロパティの詳しい説明

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

• ペイントは、通常、その中で最もコスト効率が高いため、ペイントをトリガーする CSS アニメーション プロパティの使用を避けることをお勧めします。 CSS アニメーションで webkit-transform: translateX(3em) 的方案代替使用 left: 3em ，因为left会额外触发layout与paint，而webkit-transform を使用すると、ページ全体の合成のみがトリガーされます

div {

-ウェブキット-アニメーション-期間:5秒;

-ウェブキット-アニメーション-名前: 移動;

-ウェブキット-アニメーション-反復-カウント: 無限;

- webkit-アニメーション-方向: 代替;

幅: 200px;

の高さ: 200px;

背景-色: #808080;

位置: 絶対;

}

@-ウェブキット-キーフレーム 移動{ から { left: 100px; } へ { 左: 200px; } }

以下に示すように使用すると、継続的にページのリセットがトリガーされます

赤い枠線で描画: left

@-webkit-keyframes move{

} px);

}

}

添付ファイル: 「[Han Shuping] Web デザインを簡単に扱う (html+css+js)」

以下のように使用します -webkit-transform ページは再編成されるだけで、オレンジ色で表示されますborder:

• CSS アニメーションの CSS プロパティ動作テーブル

高性能 CSS3 アニメーション

PC シナリオと比較して、高性能モバイル Web シナリオでは、考慮すべき要素がますます複雑になります。それらを次のように要約します。 ポイント: トラフィック、電力消費、および流暢さ。 PC時代ではエクスペリエンスのスムーズさをより重視しますが、モバイル側のリッチなシナリオでは、ユーザー基地局のネットワークトラフィックの使用量や機器の消費電力に特別な注意を払う必要があります。

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

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

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

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

-背面-

可視性

:

非表示

;

-moz-背面-可視性 : 非表示;

-ms-背面-可視性: 非表示;

背面-可視性: 非表示 ;

-ウェブキット-視点: 1000;

-moz-視点 : 1000 ;

-ms-視点: 1000;

視点: 1000;

たとえば、次の要素は translate3d右移500px的动画流畅度会明显优于使用left 属性を渡します。

#ball-1 {webkit

トランジション

:

-

-

transform

.5s

ease; -ウェブキット-変換: translation3d(0,

0, 0); } #ball-1. スライドイン { -webkit

-

transform:

translate3d

(500px,

0, 0); } #ball-2 {

トランジション:

左

5秒

安心;

左: 0;

} #ball-2.slidein { 左:

500px

}

注: 3D 変形はより多くのメモリと電力消費を消費するため、パフォーマンスに問題がある場合にのみ使用し、トレードオフを考慮する必要があります

box-shadows と gradients の使用量を減らすことができますbox-shadows与gradients

box-shadows与gradients

box-shadows と gradients は改善される傾向があります特に 1 つの要素で両方を使用する場合は、ページのパフォーマンスが非常に重要になるため、フラット デザインを採用してください。

リフローを減らすために、アニメーション要素をドキュメント フローからできるだけ遠ざけてください

position: fixed; 位置: 絶対;

🎜

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

このトピックを説明するための例から始めます。 th

=

aDiv

。 オフセット幅+10

;

aDiv.スタイル。 幅 = 新しい幅 + 'px' ;

var newHeight = aDiv.offsetHeight +10;

aDiv.style.高さ = newHeight + 'px';

var newWidth = aDiv.offsetWidth +

10

;

var 新しい身長 = aDiv.オフセット高さ+10;

aDiv.スタイル.幅 = 新しい幅 + 'px' ;

aDiv.style.身長 = newHeight + 'px';

これら 2 つのコードは、機能において完全に同等です。明らかな違いは、実行順序のみです。しかし、本当にそうなのでしょうか？以下は、コメント注釈のコード バージョンであり、その中でのさらなる違いを説明しています:

// 2 つのレイアウトをトリガーするトリミング var NewWIDTH 下= aDiv.offsetWidth + 10; // Read aDiv.スタイル. width = newWidth + 'px'; // Write var 新しい身長 = aDiv .offsetHeight + 10; // Read aDiv.スタイル.身長 = 新しい高さ + 'px'; // 書く //レイアウトを一度だけトリガーしますvar newWidth = aDiv.offsetWidth + 10; // Read var 新しい身長 = aDiv.offsetHeight + 10; // 読む aDiv.スタイル.幅 = newWidth + 'px'; // Write 🎜🎜 🎜 aDiv.style.height = newHeight + 'px'; // Write

offsetWidth/Height 属性を継続的に読み取り、width/height 属性を継続的に設定すると、単一の属性を読み取り、設定するよりもトリガーされるトリガーの数が少なくなります。別々に 1 つのレイアウト。

結論から言うと、これはブラウザの最適化戦略に関係しているようです。レイアウトをトリガーできるすべての操作は、一時的に layout-queue に置かれ、更新する必要がある場合、キュー全体のすべての操作の結果が計算されます。このようにして、レイアウトのみを実行できます。一度パフォーマンスを向上させます。 layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout，从而提升性能。

关键一，可触发layout的操作，哪些操作下会layout的更新（也称为reflow或者relayout

重要なのは、layout の操作をトリガーできることです (reflow または relayout とも呼ばれます)。 ）？

オープンソースの Webkit/Blink を例として、ブラウザのソース コードの実装から始めます。レイアウトを更新するために、Webkit は主に Document::updateLayout と Document::updateLayoutIgnorePendingStylesheets の 2 つのメソッドを使用します。

void

Document ::updateLayout() { ASSERT ( はメインスレッドです() ））; if ( frameView && frameView->isInLayout()) { if () Element* oe = ownerElement()) レイアウト(); updateStyleIfNeeded(); StackStats::LayoutCheckPoint layoutCheckPoint; if (frameView && レンダラー() && (frameView->レイアウト保留中() || レンダラー()-&g t;レイアウトが必要()) ) frameView->layout() ; if (m_focusedNode && !m_didPostCheckFocusedNodeTask) { postTask(CheckFocusedNodeTask::create()); m_didPostCheck FocusedNodeTask = true; } } void Document::updateLayoutIgnorePendingStylesheets() { bool oldIgnore = m_ignorePendingStylesheets; if(!haveStylesheets)読み込まれました()) { m_ignorePendingStylesheets = true; HTMLElement* bodyElement = body(); if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) { m_pendingSheetLayout = DidLayoutWithPendingSheets; styleResolverChanged (スタイルを今すぐ再計算); } else if (m_hasNodesWithPlaceholderStyle) ) recalcStyle(力); } updateLayout(); m_ignorePendingStylesheets = oldIgnore; }

从 updateLayoutIgnorePendingStylesheets 方法的内部实现可知，其也是对 updateLayout 方法の展示、および有のレイアウト更新モード中、大部分の场景都は更新されていますLayoutIgnorePendingStylesheets によりレイアウトの更新が実行されます。