web-dev-qa-db-ja.com

Google DevTool Timeline：強制リフローはパフォーマンスのボトルネックになる可能性があります

ページに視差効果を追加しました。そして今、私はパフォーマンスとFPSに問題があり、多くの質問があります:-)

私はtransform3dとrequestAnimationFrameを使用してそれを実現しています（このように推奨されています http://www.html5rocks.com/en/tutorials/speed/animations/ ）。

私のコードは次のようになります：

window.addEventListener('scroll', function() {
  latestKnownScrollY = window.scrollY;
});

function updateParallax() {
  var y = latestKnownScrollY * 0.4;
  element.style.transform = 'translate3d(0, ' + y + 'px, 0)';
  requestAnimationFrame(updateParallax);
}

updateParallax();

時々私はスクリーンショットのような警告があります：

強制リフローはパフォーマンスのボトルネックになる可能性があります

enter image description here

呼び出しスタックはlatestKnownScrollY = window.scrollYを指します。

しかし、この警告がたまにしか表示されないのはなぜですか？スクロールイベントごとにwindow.scrollYを使用します。

javascriptcssgoogle-chromegoogle-chrome-devtools
15
FiftiN

あなたが読むたびにwindow.scrollY、あなたはリフローを引き起こしています。これは、ブラウザーがスタイルとレイアウトを計算して値を提供していることを意味します。

可能性が高い時間がかかり、同期しているため、パフォーマンスの問題であると記載されています。プロパティの読み取り、設定、読み取り、設定、読み取り、設定を行った場合、またはループ内にこの種のものが存在する場合は、リフローをトリガーするたびにページ全体を再描画できるまでボトルネックになります。解決策は通常、最初に必要なすべてのものを読み、次に変更する必要があるすべてのものを設定することです。

しかし、あなたの場合、それは問題ではありません。それはそれがちょうど0.2ミリ秒かかり、それを一度だけやっていると言います。パフォーマンスの問題に気づきましたか？スクロールしたときの遅れが好きですか？

13
Gabriel