Setting up multiple scrollers causing 'layout thrashing'

[wilsonpage]

Below you can see a timeline graph of three scrollers being set up. Each setup operation causes a read and a write operation to the DOM, and therefore results in three layouts/reflows in this particular frame, blowing our 60fps frame budget.

Options

• A. Offer a more granular API that gives the user the option of batching the reads and writes to prevent this thrashing, e.g. scroller.calc() and scroller.set() (favoured).
• B. Use a library like FastDom internally (easiest).