Google DevTool Timeline: Forced reflow is likely performance bottleneck
<p>I added parallax effect to my page. And now I have problems with performance and FPS and many questions :-)</p>

<p>I use <code>transform3d</code> and <code>requestAnimationFrame</code> to realize it (like this recomended <a href="http://www.html5rocks.com/en/tutorials/speed/animations/" rel="noreferrer">http://www.html5rocks.com/en/tutorials/speed/animations/</a>).</p>

<p>My code looks like this:</p>

<pre><code>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();
</code></pre>

<p>Sometimes I have warnings like on the screenshot:</p>

<blockquote>
  <p>Forced reflow is likely performance bottleneck</p>
</blockquote>

<p><a href="https://i.stack.imgur.com/ip4M4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ip4M4.png" alt="enter image description here"></a></p>

<p>Call stack points to <code>latestKnownScrollY = window.scrollY</code>.</p>

<p>But why this warning appears only occasionally? I use <code>window.scrollY</code> each scroll event.</p>