Google DevTool Timeline: Forced reflow is likely performance bottleneck

Question

I added parallax effect to my page. And now I have problems with performance and FPS and many questions :-)

I use transform3d and requestAnimationFrame to realize it (like this recomended http://www.html5rocks.com/en/tutorials/speed/animations/).

My code looks like this:

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

Sometimes I have warnings like on the screenshot:

Forced reflow is likely performance bottleneck

Call stack points to latestKnownScrollY = window.scrollY.

But why this warning appears only occasionally? I use window.scrollY each scroll event.

Answer 1

Each time you read window.scrollY, you're causing a reflow. It just means that the browser is calculating the styles and layout to give you the value.

It says it's likely a performance issue because it takes time and it is synchronous. If you read, set, read, set, read, set properties, or if you have this kind of thing inside a loop, it will cause a bottleneck until it can redraw the whole page all the times you triggered the reflow. The solution is usually first to read everything you need, then set everything you need to change.

But in your case, it shouldn't be a problem. It says it takes just 0.2 ms and it's doing it just once. Do you notice any performance issue? Like a lag when you scroll?