title: Google DevTool Timeline: Forced reflow is likely performance bottleneck
body: <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>