div要素に簡単な遷移アニメーションがあります。不要なペイント イベントを防ぐために、より高い z-index と 0 変換を適用したため、このdivは独自のレイヤーにある可能性があります。ただし、ウォーターフォール チャートは、アニメーション化された各ティックの後に発生する可能性が高いレイヤー構成イベントを示しています。これは、GPU ページ レンダリング前の最終的なレイヤー構成であり、ページ上のすべての変更の前に避けられないのでしょうか、それとも何か間違ったことをしているだけなのでしょうか?
10096 次
1 に答える
12
タイムラインの合成イベントは、アニメーション フレームの更新中に常に発生し、以前の仮定は正しいです。アニメーション化された div が実際にレイヤーになったかどうかを検証するには、Paint イベントを探します。これらはレイヤーごとであり、あるレイヤーが別のレイヤーに対して相対的に遷移する場合、レイヤーの内容が変更されない限り、アニメーション中にペイント イベントが発生することはありません。Chrome の最近のバージョン (m30+) では、タイムラインはイベントのポップオーバーでペイントに関連付けられたレイヤーのルートを表示することにも注意してください。
アニメーション要素がレイヤーに昇格したかどうかを確認する別の方法は、実験的なレイヤー パネルです (about:flags で DevTools の実験を有効にし、Chrome を再起動してから、DevTools の設定の [実験] タブでレイヤー パネルを有効にします)。
于 2013-10-31T15:16:05.050 に答える