𝟩 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀 𝗔𝗻𝗱 𝗛𝗼𝘄 𝗧𝗼 𝗙𝗶𝘅 𝗧𝗵𝗲𝗺

7 پوشیدہ JavaScript Bottlenecks اور انہیں ٹھیک کرنے کا طریقہ

سست ویب ایپس (web apps) شاذ و نادر ہی خراب الگورتھم کی وجہ سے ناکام ہوتی ہیں۔ وہ اس وجہ سے ناکام ہوتی ہیں کہ آپ کا کوڈ براؤزر کے ساتھ کس طرح رابطہ کرتا ہے۔

میں نے 300 پروڈکشن ایپلی کیشنز کا پروفائلنگ (profiled) کیا۔ 73% کارکردگی کے مسائل ان 7 ذرائع سے پیدا ہوتے ہیں۔

1. Layout thrashing یہ تب ہوتا ہے جب آپ ایک پراپرٹی پڑھتے ہیں، DOM میں کچھ لکھتے ہیں، اور پھر دوبارہ پڑھتے ہیں۔ یہ براؤزر کو بار بار لے آؤٹ (layout) دوبارہ کیلکولیٹ کرنے پر مجبور کرتا ہے۔

• حل: پہلے تمام ریڈز (reads) کو ایک ساتھ (batch) کریں۔ پھر requestAnimationFrame کا استعمال کرتے ہوئے تمام رائٹس (writes) کو ایک ساتھ کریں۔

2. Unbounded event listeners ایونٹ لسنر (event listener) شامل کرنے کے بعد اسے ہٹائے بغیر چھوڑ دینا میموری لیکس (memory leaks) کا باعث بنتا ہے۔ یہ سنگل پیج ایپس (single-page apps) میں ایک بڑا مسئلہ ہے۔

• حل: جب کمپوننٹس ان ماؤنٹ (unmount) ہوں تو لسنرز کو صاف کرنے کے لیے AbortController کا استعمال کریں۔

3. لوپس میں Synchronous DOM reads لوپ کے اندر offsetWidth یا getBoundingClientRect پڑھنے سے مسلسل ری فلو (reflows) شروع ہو جاتے ہیں۔

• حل: لوپ شروع کرنے سے پہلے لے آؤٹ ویلیوز (layout values) کو ایک ویری ایبل میں کیش (cache) کر لیں۔

4. Missing requestAnimationFrame batching اسکرول (scroll) یا ریسائز (resize) ایونٹس پر براہ راست DOM تبدیلیاں بہت زیادہ بار ہوتی ہیں۔ اس سے جینک (jank) پیدا ہوتا ہے۔

• حل: اپ ڈیٹس کو پینٹ سائیکل (paint cycle) کے ساتھ سنک (sync) کرنے کے لیے ایک ticking ویری ایبل اور requestAnimationFrame کا استعمال کریں۔

5. بڑے JSON.parse payloads بڑی فائلوں کو پارس (parse) کرنا مین تھریڈ (main thread) کو بلاک کر دیتا ہے۔ اس سے ان پٹ لیگ (input lag) پیدا ہوتا ہے۔

• حل: مین تھریڈ سے ہٹ کر ڈیٹا پارس کرنے کے لیے Web Workers کا استعمال کریں۔

6. پیچیدہ CSS selector matching گہرائی میں موجود یا پیچیدہ سلیکٹرز اسٹائل ری کیلکولیشنز (style recalculations) کو سست کر دیتے ہیں۔

• حل: لے آؤٹ شفٹس (layout shifts) تلاش کرنے اور اپنے سلیکٹرز کو سادہ بنانے کے لیے Lighthouse کا استعمال کریں۔

7. Duplicate bundle chunks بڑے اور غیر موزوں (unoptimized) بنڈلز ٹرانسفر کے وقت کو ضائع کرتے ہیں۔

• حل: ڈپلیکیٹ کوڈ تلاش کرنے اور اسے ہٹانے کے لیے webpack-bundle-analyzer کا استعمال کریں۔

اپنی پیشرفت کو کیسے ناپیں:

• Chrome DevTools کھولیں۔
• Performance ٹیب پر جائیں۔
• 5 سیکنڈ کا سیشن ریکارڈ کریں۔
• Main flame chart میں 50ms سے زیادہ طویل ٹاسک تلاش کریں۔
• ایک حل لاگو کریں اور Rendering اور Painting کے اوقات کا موازنہ کریں۔

ان شعبوں کو ٹھیک کرنے سے آپ کے Core Web Vitals، خاص طور پر Largest Contentful Paint اور Interaction to Next Paint میں بہتری آتی ہے۔

ماخذ: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5