javascript - Google DevTool时间轴: Forced reflow is likely performance bottleneck

我在页面上添加了视差效果。现在我在性能和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。

最佳答案

每次阅读window.scrollY，都会导致重排。这仅表示浏览器正在计算样式和布局以为您提供值(value)。

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

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