Pilot Tech Talk #7 — Optimizing Infinite Scroll by Paweł Sułkowski

OPTIMIZING INFINITE SCROLL

Paweł Sułkowski

Symptoms

Lost smoothness of the scroll

Problem

Large amount of elements in the DOM along with too many layout’s recalculations / re-paintings

More about what forces layout/reflow: gist.github.com/paulirish/5d52fb081b3570c81e3a

Solutions

Keep the DOM clean by removing redundant elements

or

Hide not visible elements to remove them from browser’s render-tree

Algorithm

Add an event handler to onscroll event and set „display: none” property to elements which are not

visible

Note If the dimension of an element is not known before rendering don’t forget about caching once you get it.

Algorithm (2)

Add an event handler to onscroll event and set „display: none” property to batch of elements which

are not visible

Note If the dimension of an element is not known before rendering don’t forget about caching once you get it.

Thanks