𝟳 پوشیدہ JavaScript پرفارمنس کی رکاوٹیں (Bottlenecks)

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

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

  1. Layout thrashing یہ تب ہوتا ہے جب آپ کسی layout property کو پڑھتے ہیں اور پھر فوراً بعد DOM میں کچھ لکھتے ہیں۔ اس سے براؤزر کو کئی بار layout دوبارہ کیلکولیٹ کرنے پر مجبور ہونا پڑتا ہے۔ • اثر: 40-60% سست رینڈرنگ (rendering)۔ • حل: پہلے اپنی تمام ریڈز (reads) کو ایک ساتھ (batch) کریں۔ پھر requestAnimationFrame کا استعمال کرتے ہوئے اپنی تمام رائٹس (writes) کو ایک ساتھ کریں۔

  2. Unbounded event listeners کسی لسنر (listener) کو ہٹائے بغیر شامل کرنے سے میموری لیک (memory leaks) ہو جاتے ہیں۔ یہ single-page apps میں ایک بڑا مسئلہ ہے۔ • اثر: فی گھنٹہ 15-30% میموری میں اضافہ۔ • حل: جب کوئی component unmount ہو جائے تو لسنرز کو صاف کرنے کے لیے AbortController کا استعمال کریں۔

  3. Synchronous DOM reads in loops لوپ کے اندر offsetWidth جیسی properties کو پڑھنا جو DOM میں کچھ لکھ بھی رہا ہو، مسلسل reflows کا باعث بنتا ہے۔ • اثر: 20-40% فریم ڈراپس (frame drops)۔ • حل: لوپ شروع ہونے سے پہلے اپنی layout values کو ایک variable میں محفوظ (cache) کر لیں۔

  4. Missing requestAnimationFrame batching scroll یا resize events پر براہ راست DOM تبدیلیاں بہت زیادہ بار ہوتی ہیں۔ • اثر: اسکرولنگ کے دوران 10-25% جھٹکے (jank)۔ • حل: پینٹ سائیکل (paint cycle) کے ساتھ ہم آہنگ کرنے کے لیے اپنے scroll handlers کو requestAnimationFrame میں لپیٹیں۔

  5. Large JSON.parse calls بہت بڑی JSON فائلوں کو پارس کرنا مین تھریڈ (main thread) کو بلاک کر دیتا ہے۔ اس سے ان پٹ لیگ (input lag) پیدا ہوتا ہے۔ • اثر: فی کال 50-200ms کا فریز (freeze)۔ • حل: مین تھریڈ سے ہٹ کر ڈیٹا پارس کرنے کے لیے Web Workers کا استعمال کریں۔

  6. Complex CSS selector matching گہرائی میں موجود یا پیچیدہ سلیکٹرز اسٹائل کی دوبارہ کیلکولیشن کو سست کر دیتے ہیں۔ • اثر: 5-15% اضافی اسٹائل وقت۔ • حل: اپنے CSS ڈھانچے کو سادہ بنائیں اور زیادہ ہموار (flatter) سلیکٹرز استعمال کریں۔

  7. Duplicate bundle chunks غیر موزوں (unoptimized) بنڈلز بینڈوتھ ضائع کرتے ہیں۔ • اثر: 100-500KB کا ضائع شدہ ٹرانسفر۔ • حل: ڈپلیکیٹ کوڈ تلاش کرنے اور اسے ہٹانے کے لیے webpack-bundle-analyzer جیسے ٹولز استعمال کریں۔

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

اپنے Core Web Vitals اسکورز کو بہتر بنانے کے لیے ان شعبوں پر توجہ دیں۔

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