වෙබ් අඩවි වල ඉදිරිපස කාර්ය සාධනය ගැන කතා කරන විට "වර්චුවලිස් කිරීම" කියන පදය අතිශය ජනප්රියයි, නමුත් එය ඇත්තටම කුමක්ද කියා බොහෝ දෙනා නොදනිති.
මෙම පදය සම්බන්ධයෙන් බොහෝ විට අසල පදයක් වන "Infinite scrolling" සමඟ ගැලපෙයි. Infinite scrolling යනු දත්ත පේජ් කරමින් පරිශීලකයා පේජ් අන්තය ළඟා වූ විට අලුත් දත්ත ලබා ගැනීමයි. එහිදී DOM එක දිගුවෙයි – 5,000 අයිතම තිබුණොත් 5,000 HTML node එකක් තැනෙයි.
වර්චුවලිස් කිරීම වෙනස්. මෙහිදී පෙන්වන පේජ් එකේ දෘශ්යමය වශයෙන් පෙනෙන පේළි (සමහරක් buffer) පමණක් DOM තුළ තබා ගනී. අනෙකුත් දත්ත සියල්ල JavaScript array එකේ පවතී, DOM එකේ අඩංගු නොවේ.
Angular CDK වල itemSize="56" යනු පේළි ගණනක් නොව, එක් පේළියක පික්සල් උසයි. එබැවින් 600px උසස් viewport එකක් තිබේ නම්, (600 ÷ 56) + 5 ≈ 15‑16 පේළි පමණක් DOM තුළ පවතී. 5,000 පේළි තිබුනත්, අඩුම ගණනේ div 15ක් පමණක් පෙන්වයි.
දෘශ්ය පෙන්වෙන පේළි පිටත ඇති අයිතමයන් display:none හෝ මකා නොදමයි. ඒවා DOM තුළ නොමැතිව, පූර්ණයෙන්ම JavaScript objects ලෙස පවතිනවා. මෙය memory සහ style recalculation වලින් නිදහස් කරයි.
වර්චුවලිස් කිරීමේ ඉලක්කය තුනක් ඇත:
- Spacer – මුළු අයිතම ගණන × itemSize උසකින් invisible element එකක් තබා, scrollbar එක නිවැරදි ප්රමාණයෙන් පෙන්වයි.
- Transform – scroll වීමේදී library එක array එකේ කුමන කොටස පෙන්වන්නැයි ගණනය කර, content wrapper එක translateY කරයි.
- Math – firstVisibleIndex = scrollTop ÷ itemSize. නිවැරදි itemSize එකක් තිබීම අත්යවශ්ය.
ශ්රී ලංකාවට ඇති වැදගත්කම
වර්චුවලිස් කිරීමේ තාක්ෂණය ශ්රී ලංකාවේ වෙබ් සංවර්ධකයින්, සිසුයින් සහ ව්යාපාරිකයින් සඳහා විශාල වාසි ලබා දෙයි:
- ඉගෙනුම් – සිසුන්ට UI performance concepts හොඳින් අධ්යයනය කළ හැකිය.
- දියුණු කිරීම – සංවර්ධකයින්ට අඩු memory usage සහ වේගවත් rendering සමඟ වැඩි පිරිසක් පවත්වා ගැනීමට හැකියාව ලැබේ.
- ව්යාපාර – අඩු load time මගින් පාරිභෝගික අත්දැකීම වර්ධනය වෙයි, conversion rates වැඩි වේ.
අවසන් වශයෙන්, වර්චුවලිස් කිරීම කියන්නේ “අවශ්ය දේ පමණක් පෙන්වීම” යන සරල සංකල්පයක්. එය ඔබේ වෙබ් යෙදුම්වල පරිශීලක අත්දැකීම උසස් කරයි, කේත පරිමාණය කුඩා කරයි, සහ අනාගතයේදී වැඩි දත්ත සමඟද සාර්ථකව ක්රියා කරයි.
