pilot tech talk #7 — optimizing infinite scroll by paweł sułkowski
TRANSCRIPT
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.