JavaScript හි async/await භාවිතා කරන විට බොහෝ දෙනා UI නරක නොවෙන බවට විශ්වාස කරයි. නමුත් මෙය සත්යය නොවේ; CPU‑බර වැඩක් ප්රධාන තන්තුවේ කරද්දී බ්රවුසරය අත්හිටුවේ.
මෙම ලිපියෙහි කතාව වන්නේ, අධික සංඛ්යාත ගණනයක් (උදාහරණයක් ලෙස මිලියන 8ක් පමණ අංක) async function එකක් තුළ රැඳවීමයි. await Promise.resolve() එකක් එක් කරලා UI පිරිසිදු වෙයි කියලා බලාපොරොත්තු වුවත්, පසුදා පේජ් එක ලොක් වෙලා, ස්ක්රෝල්, බටන් ක්ලික්, ස්පිනර් වගොත් නැතිවී යයි. මෙය Promise ගැටලුවක් නොව, CPU වැඩය ප්රධාන තන්තුවේ සිදුවීමේ ප්රශ්නයක්.
ඇයි මෙහෙම වෙන්නේ? Promise එකක් විසඳුමක් ලබා දුන් පසු, .then හෝ await මයික්රොටාස්ක් එකක් ලෙස ඒම තන්තුවේම ක්රියාත්මක වේ. එමඟින් දිගු කාලීන ගණනයක් එම තන්තුවේම සිදු වන අතර, UI තන්තුවට කාලයක් නොලැබේ. ප්රධාන තන්තුවේ එකම call stack එක පිරී යන බැවින් බ්රවුසරය පින්තූර ඇඳීම, ක්ලික් හසුරුවීම, ඇනීමේ හැකියාව අහිමි වේ.
මෙම ගැටළුවට විසඳුමක් වන්නේ Web Workers භාවිතා කිරීමයි. Worker එකක් වෙනත් JavaScript තන්තුවක් ලෙස ක්රියා කරයි; එය DOM සමඟ සම්බන්ධ නොවන බැවින් බර වැඩ කරමින් UI තන්තුව නිදහස් කරයි. ප්රධාන තන්තුව postMessage මගින් Worker එකට දත්ත යවයි, Worker එක ගණනය කරලා onmessage මගින් ප්රතිඵලය ආපසු ලබා දෙයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ අධ්යාපන, සංවර්ධන ක්ෂේත්රයේ JavaScript භාවිතය වර්ධනය වෙමින් තිබේ. Web Workers සහ Comlink වැනි තාක්ෂණයන් ඉගෙන ගැනීමෙන්:
- සැමට UI අගුළු නොවෙන, වේගවත් වෙබ් යෙදුම් නිර්මාණය කළ හැක.
- සිසුන් මූලික async/await සංකල්පය පසුබැසීමේ සීමාවන් හඳුනාගෙන, වැඩි දියුණු මට්ටමේ පරිගණක විද්යාව ඉගෙන ගත හැක.
- ව්යාපාර බ්රවුසර‑පිළිබඳ වැඩකිරීමේ කාර්යක්ෂමතාව වැඩි කර, පාරිභෝගික අත්දැකීම් නවීකරණය කරගත හැක.
Comlink යනු Worker හා ප්රධාන තන්තුව අතර සන්නිවේදනය සරල කරදීමේ ලයිබ්රරියකි; එය API‑වල වඩාත් පිරිසිදු භාවිතයක් සපයයි. වැඩි ප්රමාණයේ දත්ත (SharedArrayBuffer) හෝ Worker pool එකක් සමඟ වැඩ කිරීමේදී මෙම උපකරණය අත්යවශ්ය වේ.
අවසන් වශයෙන්, async/await එකක් UI අගුළු නොවෙයි කියා පුරාවෘත්තයක් නොවේ; එය I/O‑පරීක්ෂා සඳහා පමණක් යොදා ගත යුතුය. CPU‑බර වැඩ සඳහා Worker භාවිතා කර, Comlink වැනි උපකරණ සමඟ කේතය සරල කර, ඔබේ වෙබ් යෙදුම වේගවත්, ප්රතිචාරශීලී, සහ පරිශීලක‑හිතකාමී කරගන්න.
