javascript - 谷歌开发工具时间轴 : Forced reflow is likely performance bottleneck

Question

我在页面中添加了视差效果。现在我遇到了性能和 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();

有时我会在屏幕截图上收到警告:

Forced reflow is likely performance bottleneck

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

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

Answer 1

每次阅读 window.scrollY 时，都会导致重排。这只是意味着浏览器正在计算样式和布局来为您提供值(value)。

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

但在您的情况下，这应该不是问题。它说只需要 0.2 毫秒，而且只执行一次。您是否注意到任何性能问题？就像滚动时的滞后？