Google DevTool Timeline: Forced reflow is likely performance bottleneck
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?
Comments
-
FiftiN almost 2 years
I added parallax effect to my page. And now I have problems with performance and FPS and many questions :-)
I use
transform3d
andrequestAnimationFrame
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.