谷歌DevTool时间表:强制回流可能是性能瓶颈

Question

我在页面上添加了视差效果.现在我遇到性能和FPS问题以及很多问题:-)

我使用transform3d,并requestAnimationFrame去实现它(这样recomended 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();

有时我会在屏幕截图上发出警告:

强制回流可能是性能瓶颈

调用堆栈指向latestKnownScrollY = window.scrollY.

但为什么这个警告只是偶尔出现？我使用window.scrollY每个滚动事件.

Answer 1

每次阅读window.scrollY,都会导致重排.它只是意味着浏览器正在计算样式和布局以为您提供价值.

它说它可能是性能问题,因为它需要时间并且是同步的.如果您读取,设置,读取,设置,读取,设置属性,或者如果您在循环中有这种东西,它将导致瓶颈,直到它可以在您触发重排时重绘整个页面.解决方案通常首先阅读您需要的所有内容,然后设置您需要更改的所有内容.

但在你的情况下,这应该不是问题.它说它只需要0.2毫秒,它只做一次.你注意到任何性能问题吗？滚动时像滞后一样？