Why "Composite Layers" takes so much time?

Question

I'm profiling list with infinite scrolling and data lazy-loading. What can cause this long "Composite Layers" phase?

and

If you are interested in details about the list:

• The list has limited number of physical row elements and uses "transform: translate3d(...)" to reorder them when scrolling.
• Chrome paints each row in separate layer.
• There are just up to 25 layers in entire browser page.

Answer 1

Without a link, it's hard to say for sure - but by the look of all the "purple" (in your first screenshot), you are likely using too many elements that contain any of the below properties:

A) have position: fixed;

B) are using transform before and during animations

C) using too many simultaneous keyframes (for example as you append rows while lazy loading)

Edit: Upgrade your version of Chrome - Performance replaces Timeline and provides a little more insight on the details you might be looking for.