InmyexampleIhaveatotalof50itemsinthelistandhereisthecomparisonofthenumberoftotalhtmlelementsintheDOM.Withoutvirtualization,ithas197nodes.Withvirtualizationithas27nodes.

Thisisan86%reductionintheDOMnodes.Thisfactorcanchangebasedontheelementseachlistitemhas.Virtualis.helpsinreducingthenumberofDOMnodeswhichreducestheheapsizeoccupiedbythereferencesoftheseelements.Itmaintainstheframeratewhilescrollingincaseoflongerlists.

Let’stakealookathowthisisachieved.ListVirtualizationneedsthedatathatistobeshownasalist,let’ssayninthelength.Thenwedecidehowmanylistitemsaretobeshownatatime,let’ssayt.Basedonthiswewillcontroltherangeofitemsthatisbeingcurrentlyshowntotheuser.Astheuserscrollsdown,weincrementthewindowinawaythatitstartsshowingthenextsetofitems.So,ifitstartswithindex[0,t],uponscrollingitwillchangeto[1,t+1]andsoon.

Todecidewhenthisincrementshouldhappen,weusethescrollheightofthecontainerelement.Let’sgofurtherindetail.Eachitemisgivenafixedheightinthislistandtheirpositionissetrelativetothecontainerbasedontheirindexandheight.Ifthefixedheightofeachitemis10px,thenthefirstelementat0,secondat10px,thirdat20px…Astheuserscrolls,dividingthescrollTopwiththedefaultitemheight,wegethowmanyitemsdownhastheuserscrolled.Thisvalueiswhereourwindowstartsandaddingtinthisvaluegivesusthelastelementofourwindow.

Together,thisdynamicchangeofwindowrangeandtherespectivepositionofeachiteminthiswindowgivestheillusionthattheuserisscrollingthroughastaticlistofitems.

Tounderstandthiswholeworkflowbetter,breakitintentionallyorintroducesomebugs.First,breakthepartwhichisupdatingtherangeofthelisttocontrolthevisibleelements.Then,breakthepartwherewearesettingthepositionsoftheelementsbasedontheirindex.Then,youwillunderstandthesignificanceofeachlogicalcomponentinvolved.