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

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();

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

  

强制回流可能是性能瓶颈

将堆栈点调用latestKnownScrollY = window.scrollY。

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

Answer 1

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

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

但在你的情况下，它不应该是一个问题。它说它只用了0.2毫秒而且它只做了一次。你注意到任何性能问题吗？滚动时就像滞后一样？