ワイヤレスページアニメーション最適化の例

ワイヤレスページはもともと一刻を争うもので、ワイヤレスページでアニメーションを使用するときは言うまでもありません.cssアニメーションでもcanvasアニメーションでも、常に注意し、ページのパフォーマンスの基本的な分析方法を把握する必要があります.
最適化を目標としている以上、ブラウザのレンダリングと実行メカニズムに関係し、ブラウザの動作に合わせてこそ、アニメーションをスムーズに美しくすることができます.
そう、ブラウザはボスで、全部聞いています.

一、設備リフレッシュ率（フレームレート）

私たちはページを速くしたいし、アニメーションをスムーズにしたいので、何が私たちの感知に影響しているのかを理解する必要があります.
ページはデバイスのブラウザで実行され、現在市販されているモバイルデバイスのリフレッシュ頻度は60回/秒(フレームレート)が多い.したがって、ブラウザに各フレームの画面をレンダリングする時間は(1 s/60=16.67 ms)であるべきである.
しかし、実際には、ブラウザは私たちのページをレンダリングするのに苦労しているわけではありません.レンダリングキューの管理や異なるスレッドの切り替えなど、追加の作業が必要です.したがって、単純なブラウザレンダリング作業は、フレームごとのレンダリング操作がこの時間よりも大きい場合、ページカートン、アニメーションカートンという直感的な表現を残しています.
css animationを使用してアニメーションを完了すると、ブラウザがhandleのためにいくつかのことをしてくれるので、この点はそれほど重要ではありません.しかし、canvasのようなjsを使用してスムーズなフレーム単位のアニメーションを実現する必要がある場合は、この限られた時間を覚えておくことが重要です.

二、ブラウザのページレンダリングライン

私たちのコードはどのようにしてページにレンダリングされますか?

JavaScript.一般的には、JavaScriptを使用してページロジックを実装しますが、JavaScriptを使用して視覚的な変化の効果を実装することもあります.例えばjQueryのanimate関数でアニメーションを作ったり、ページにDOM要素を追加したりします.もちろん、CSS Animations、Transitions、Web Animation APIを使用することが可能になりました.

計算スタイル(Style).このプロセスは、スタイルファイル内のCSSセレクタによって、対応するCSSスタイルをDOM要素ごとに一致させる.

レイアウト(Layout).前のステップでは、各DOM要素のスタイル規則が決定され、各DOM要素が最終的に画面に表示されるサイズと位置を具体的に計算します.Webページの要素のレイアウトは相対的であるため、1つの要素のレイアウトが変化し、連動して他の要素のレイアウトが変化する.したがって、ブラウザではレイアウトプロセスが頻繁に発生します.

ペイント(Paint).描画は、本質的にピクセルを塗りつぶすプロセスです.テキスト、色、画像、枠線、シャドウなど、DOM要素のすべての可視効果を描画します.一般に、このペイントプロセスは複数のレイヤで行われます.

レンダーレイヤマージ(Composite).前のステップから分かるように、ページ内のDOM要素の描画は複数のレイヤで行われる.各レイヤでペイントプロセスが完了すると、ブラウザはすべてのレイヤを適切な順序でレイヤに結合し、画面に表示します.このプロセスは、レイヤのマージ順序が間違っていると、要素の表示が異常になるため、重複する要素があるページで特に重要です.

各ページにはこのようないくつかのプロセスがあるように見えますが、ブラウザがいくつかのステップをスキップし、作業時間を短縮するためにいくつかのテクニックを使用することができます.
1.5つのステップに時間がかかった
jsでDOM要素のlayoutを変更すると、ブラウザはページ内のどの要素が再レイアウトされる必要があるかをチェックし、ページの再レイアウトを完了するためにreflowプロセスを起動します.reflowの要素は、次は必ずペイントとComponentの2つのプロセスを経て、最新のページをレンダリングします.
2.layoutをスキップ
DOM要素のpaint onlyプロパティを1つだけ変更した場合、background-image/color/box-shadowなどです.このときlayoutはトリガーされず、ブラウザはスタイルの計算が完了するとlayoutのプロセスをスキップし、PaintとCompositeだけになります.
3.layoutとpaintの2つのステップをスキップする
非スタイルで非描画のCSSプロパティを変更すると、ブラウザはスタイル計算が完了した後、レイアウトと描画のプロセスをスキップして、直接Compositeします.
transformアニメーションを使用して、できるだけこの効果を達成してみましょう.

三、transformでアニメーションを実現する

秘密を明らかにしたり、初心者が誘導したりするなど、アニメーションを頻繁に行う必要があります.コンテンツを移動する操作が必要です.
もちろん最初に思いついたのはcss transitionがleft値やbottomの値を遷移すればいいということかもしれません.効果はすぐに実現するかもしれませんが、1つのページで頻繁にこのような移動移動操作をしているとき、携帯電話(6 P)に注意深く置いて見てみると、アニメーションはスムーズではありません.特に一部のローエンド機種では.
transformを使用して同じ効果を実現します.

1 transition: left 2s ease-in-out;  ---> transition: transform 2s ease-in-out;  
2 left: xxx; ---> transform: translate3d(xxx, yyy, zzz); 

理由は次のとおりです.
簡単に言えば、ページの描画は単層の画面で行われるものではなく、レンダーレイヤ合成レイヤなどの概念があります.CSSアニメーションをopacityとtransformに適用したレンダリング層、3 Dまたはperspective transformのあるCSS属性のレンダリング層など、いくつかの条件を満たすレンダリング層を合成層と呼ぶ.合成層には独自のレンダリングコンテキストがあり、CPUよりもGPUで処理される.ページを再描画する必要がある場合、合成レイヤの要素はページ全体ではなく、自分のレイヤ内の要素だけを再描画します.最適化してから設備に入れて見ると、効果が著しく向上していることがわかります.実はここで上記のようにして、layoutとpaintを節約しました.

四、cssからcanvasまでrequestAnimationFrameを使う

今cssのアニメーションはますます使いやすくなって、ますます多くの需要を満たすことができます.しかし、いくつかの複雑なニーズの中でjsを助けることを要求する可能性があります.
例えば、私がここで実現した半円のアニメーション:半円progress.cssアニメーションを使うと完全に私のニーズを満たすことができるように見えますが、ニーズが変化すると、私たちも変化を抱擁するしかありません.
requestAnimationFrameの使用
円弧progressここではcanvasでカスタム円弧の成長アニメーションを実現します.
ここでは、このアニメーション効果を利用して、canvasとrequestAnimationFrameを使用してスムーズなフレーム単位のアニメーションを実現する方法を見てみましょう.
window.requestAnimationFrameは、アニメーション専用のWeb APIです.ブラウザにページの再描画前にコールバック関数を実行するように通知します.通常、呼び出される頻度は毎秒60回である.
私たちのページにアニメーション効果があると仮定し、フレームごとにスムーズに描画するにはrequestAnimationFrameが必要です.
多くのフレームワークとサンプルコードは、jQueryのanimationなどのページ内のアニメーション効果をsettimeoutまたはsetIntervalで実現しています.この実装の問題は、settimeoutまたはsetIntervalで指定したコールバック関数の実行タイミングが保証されないことです.このフレームでアニメーション化されます_ある時点_実行されるのは、フレームが終了したときの可能性が高い.これは、このフレームの情報を失う可能性があることを意味します.
requestAnimationFrameの他の高エネルギー用法
requestAnimationFrameの特性によって、実は私たちは他の多くの意外な場所で活躍することができます.

アニメーション:アニメーションの実行タイミングと実行頻度をブラウザに渡して、より良いパフォーマンスを得る主な用途でもあります.

関数スロットル:requestAnimationFrameの実行周波数(フレーム)は16.67 msであり、この特徴を利用して関数スロットルを行うことができ、高周波イベントが1フレーム内で余計な無駄な関数実行を行うことを避けることができる.例:

 1 var $box = $('#J_Test'),
 2       $point = $box.find('b');
 3 $box.on('mouseenter',function(e){
 4   requestAnimationFrame(function(){
 5       $point.css({
 6           top : e.pageY,
 7           left : e.pageX
 8       })
 9   });
11 });

フレーム初期化:同じフレームの実行時間を利用してモジュールの初期化またはレンダリング関数を異なるフレームに分散して実行し、このように各モジュールには16.67 msの実行時間があり、脳の山がそこで実行を待っているのではなく、実行時間がある.

 1  var rAF = window.requestAnimationFrame ||  window.webkitRequestAnimationFrame || 
 2         function(c) {
 3             setTimeout(c, 1 / 60 * 1000);
 4         };
 5 
 6     function render() {
 7        self.$container.html(itemHtml);
 8        self.$container.find('.J_LazyLoad').lazyload();
 9     }
10 
11     rAF(render);
 

五、あなたのワイヤレスページを分析する

この例を用いて,円弧progressは無線ページの性能をどのように分析するかを簡単に見た.
ここでの実現の構想はこうです.

は、円弧の開始弧度(0.75 PI)と終了弧度(現在のスコアが上限スコアに占める割合から計算すると、最大2.25 PI)を決定する.

時間の経過とともにフレーム毎に終点位置requestAnimationFrame(draw)を描画する.

は、各フレームの終点位置のcosおよびsinに従って追従する円座標に値し、描画する.

しかし、もちろん、実装の完了は最初のステップにすぎません.Chrome Timelineを利用して、この簡単なページを分析してみましょう.

フレームレートを見て、進捗アニメーションが行われている間に、フレームレートが悪く見えて、フレームを落とす現象は発生していません.フレームごとに時間がかかるのはokで、私のアニメーションはほとんどカートンしません.

関数の実行と呼び出しの欄では、問題がある可能性のある部分の右上隅が赤く表示され、問題がある可能性のある詳細も表示されます.ここで私のページが強制的に並べ替えられたことを提示して、下のBottom-up tabの中で具体的なコードに位置することができることをよく観察します.

Timelineを使用すると、ページのいくつかの指標、フレームレート、js実行などが表示されます.問題が発生したフレームに対して最適化を開始できます.
ページのパフォーマンスを分析するときは、[https://developer.chrome.com/devtools/docs/timeline] .timelineの詳細な使用説明は、本当に強く、ページの各方面の問題を分析するのに役立ちます.