Prevent layout thrashing with requestAnimationFrame

In this example we are carrying out the task of setting heights of four divs on the page based on their width. We've solved the problem in two ways:

The first is less performant because it causes the DOM to reflow 4 times by reading and writing in quick succession.

The second makes use of requestAnimationFrame to schedule all DOM writes for the next frame. This means that all the reads happen together, followed by all the writes, and our layout doesn't get 'thrashed' :)

Run timeline in DevTools and observe the number of layouts event that occur for each solution.