By Addy Osmani CHAPTER 6The child records show a long, repeating pattern of Recalculate Style and
Layout records. Each layout record is a result of the style recalculation that,
in turn, is a result of the requestAnimationFrame() handler requesting the
value of offsetTop for each image on the page. Hover your mouse over one
of the Layout records and click the link for sources.js next to the Layout
Forced property.
The Sources panel opens at line 43 of the source file at the update()
function, which is the requestAnimationCallback() callback handler. The
handler computes the image’s left CSS style property on the the image’s
offsetTop value. This forces Chrome to perform a new layout immediately
to make sure it provides the correct value.
// animation loop
function update(timestamp) {
for (var m = 0; m < movers.length; m++) {
movers[m].style.left = ((Math.sin(movers[m].offsetTop +
timestamp/1000) + 1) * 500) + 'px';
}
raf = window.requestAnimationFrame(update);
};
We know that forcing a page layout during every animation frame is slow-
ing things down. Now we can try to fix the problem directly in DevTools.