# براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور پرفارمنس کے بارے میں سیکھیں ## لیکچر سے پہلے کا کوئز [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/27) ### تعارف اس ماڈیول کے پچھلے دو اسباق میں، آپ نے ایک فارم اور ڈیٹا دکھانے کے لیے ایک ایریا بنانے کا طریقہ سیکھا جو API سے حاصل کیا گیا تھا۔ یہ ویب پر موجودگی بنانے کا ایک بہت ہی معیاری طریقہ ہے۔ آپ نے غیر ہم وقت سازی کے ساتھ ڈیٹا حاصل کرنے کا طریقہ بھی سیکھا۔ آپ کا براؤزر ایکسٹینشن تقریباً مکمل ہو چکا ہے۔ اب صرف کچھ بیک گراؤنڈ ٹاسکس کو منظم کرنا باقی ہے، جیسے کہ ایکسٹینشن کے آئیکن کا رنگ ریفریش کرنا۔ یہ ایک اچھا موقع ہے کہ ہم بات کریں کہ براؤزر اس قسم کے کاموں کو کیسے منظم کرتا ہے۔ آئیے ان براؤزر ٹاسکس کو آپ کے ویب اثاثوں کی کارکردگی کے تناظر میں دیکھتے ہیں جب آپ انہیں تیار کرتے ہیں۔ ## ویب پرفارمنس کی بنیادی باتیں > "ویب سائٹ کی کارکردگی دو چیزوں کے بارے میں ہے: صفحہ کتنی تیزی سے لوڈ ہوتا ہے، اور اس پر موجود کوڈ کتنی تیزی سے چلتا ہے۔" -- [زیک گروسبرٹ](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) یہ موضوع کہ آپ اپنی ویب سائٹس کو ہر قسم کے آلات، ہر قسم کے صارفین، اور ہر قسم کے حالات میں انتہائی تیز کیسے بنا سکتے ہیں، یقیناً بہت وسیع ہے۔ یہاں کچھ نکات ہیں جو آپ کو ایک معیاری ویب پروجیکٹ یا براؤزر ایکسٹینشن بناتے وقت ذہن میں رکھنے چاہئیں۔ سب سے پہلی چیز جو آپ کو یقینی بنانی چاہیے کہ آپ کی سائٹ مؤثر طریقے سے چل رہی ہے، اس کی کارکردگی کے بارے میں ڈیٹا اکٹھا کرنا ہے۔ اس کے لیے سب سے پہلا مقام آپ کے ویب براؤزر کے ڈویلپر ٹولز ہیں۔ ایج میں، آپ "سیٹنگز اور مزید" بٹن (اوپر دائیں کونے میں تین نقطوں کا آئیکن) منتخب کر سکتے ہیں، پھر مزید ٹولز > ڈویلپر ٹولز پر جائیں اور پرفارمنس ٹیب کھولیں۔ آپ ونڈوز پر `Ctrl` + `Shift` + `I` یا میک پر `Option` + `Command` + `I` کی بورڈ شارٹ کٹس کا استعمال کرکے بھی ڈویلپر ٹولز کھول سکتے ہیں۔ پرفارمنس ٹیب میں ایک پروفائلنگ ٹول موجود ہے۔ ایک ویب سائٹ کھولیں (مثال کے طور پر [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) اور 'ریکارڈ' بٹن پر کلک کریں، پھر سائٹ کو ریفریش کریں۔ کسی بھی وقت ریکارڈنگ کو روکیں، اور آپ ان روٹینز کو دیکھ سکیں گے جو سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کرنے کے لیے تیار کی گئی ہیں:  ✅ [مائیکروسافٹ ڈاکیومنٹیشن](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) پر ایج کے پرفارمنس پینل کے بارے میں مزید جانیں۔ > ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کا درست اندازہ لگانے کے لیے، اپنے براؤزر کا کیش صاف کریں۔ پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان ایونٹس کو زوم کریں جو آپ کے صفحے کے لوڈ ہونے کے دوران پیش آتے ہیں۔ پروفائل ٹائم لائن کے کسی حصے کو منتخب کرکے اور سمری پین کو دیکھ کر اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں:  ایونٹ لاگ پین کو چیک کریں تاکہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے:  ✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈویلپر ٹولز کھولیں اور دیکھیں کہ کیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز کون سا ہے؟ ## پروفائلنگ چیکس عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جن پر ہر ویب ڈویلپر کو سائٹ بناتے وقت نظر رکھنی چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔ **اثاثوں کے سائز**: پچھلے چند سالوں میں ویب 'بھاری' اور اس طرح سست ہو گیا ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔ ✅ [انٹرنیٹ آرکائیو](https://httparchive.org/reports/page-weight) کو دیکھیں تاکہ صفحے کے وزن اور مزید کے تاریخی جائزے کے لیے۔ ایک اچھا عمل یہ ہے کہ یہ یقینی بنایا جائے کہ آپ کی تصاویر کو بہتر بنایا گیا ہے اور آپ کے صارفین کے لیے صحیح سائز اور ریزولوشن میں فراہم کی گئی ہیں۔ **DOM ٹریورسلز**: براؤزر کو آپ کے لکھے گئے کوڈ کی بنیاد پر اپنا ڈاکیومنٹ آبجیکٹ ماڈل بنانا ہوتا ہے، اس لیے یہ اچھے صفحے کی کارکردگی کے لیے ضروری ہے کہ آپ کے ٹیگز کم سے کم ہوں، اور صرف وہی استعمال کریں اور اسٹائل کریں جو صفحہ کو درکار ہو۔ اس نکتے پر، صفحے سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحے پر استعمال ہونے ہیں، انہیں مرکزی اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے۔ **جاوا اسکرپٹ**: ہر جاوا اسکرپٹ ڈویلپر کو 'رینڈر بلاکنگ' اسکرپٹس پر نظر رکھنی چاہیے جو DOM کو ٹریورس اور براؤزر میں پینٹ کرنے سے پہلے لوڈ ہونی ضروری ہیں۔ اپنے ان لائن اسکرپٹس کے ساتھ `defer` استعمال کرنے پر غور کریں (جیسا کہ ٹیریریم ماڈیول میں کیا گیا ہے)۔ ✅ کچھ سائٹس کو [سائٹ اسپیڈ ٹیسٹ ویب سائٹ](https://www.webpagetest.org/) پر آزمائیں تاکہ ان عام چیکس کے بارے میں مزید جان سکیں جو سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جاتے ہیں۔ اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے ان آخری چند چیزوں پر نظر ڈالیں جو آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے: ### رنگ کا حساب لگانے کے لیے ایک فنکشن بنائیں `/src/index.js` میں کام کرتے ہوئے، `const` ویری ایبلز کے سلسلے کے بعد ایک فنکشن `calculateColor()` شامل کریں تاکہ DOM تک رسائی حاصل کی جا سکے: ```JavaScript function calculateColor(value) { let co2Scale = [0, 150, 600, 750, 800]; let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; let closestNum = co2Scale.sort((a, b) => { return Math.abs(a - value) - Math.abs(b - value); })[0]; console.log(value + ' is closest to ' + closestNum); let num = (element) => element > closestNum; let scaleIndex = co2Scale.findIndex(num); let closestColor = colors[scaleIndex]; console.log(scaleIndex, closestColor); chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } }); } ``` یہاں کیا ہو رہا ہے؟ آپ ایک ویلیو (کاربن شدت) کو پاس کرتے ہیں جو آپ نے پچھلے سبق میں مکمل کیے گئے API کال سے حاصل کی تھی، اور پھر آپ اس کی ویلیو کو کلرز آرے میں پیش کردہ انڈیکس کے قریب ترین ویلیو کے ساتھ موازنہ کرتے ہیں۔ پھر آپ اس قریب ترین رنگ کی ویلیو کو کروم رن ٹائم پر بھیجتے ہیں۔ کروم رن ٹائم میں [ایک API](https://developer.chrome.com/extensions/runtime) موجود ہے جو ہر قسم کے بیک گراؤنڈ ٹاسکس کو ہینڈل کرتا ہے، اور آپ کا ایکسٹینشن اس کا فائدہ اٹھا رہا ہے: > "کروم رن ٹائم API کا استعمال کریں تاکہ بیک گراؤنڈ پیج کو حاصل کیا جا سکے، مینفسٹ کی تفصیلات واپس کی جا سکیں، اور ایپ یا ایکسٹینشن کے لائف سائیکل میں ایونٹس کے لیے سنیں اور ان کا جواب دیں۔ آپ اس API کا استعمال URLs کے رشتہ دار راستے کو مکمل طور پر اہل URLs میں تبدیل کرنے کے لیے بھی کر سکتے ہیں۔" ✅ اگر آپ یہ براؤزر ایکسٹینشن ایج کے لیے تیار کر رہے ہیں، تو یہ جان کر آپ کو حیرت ہو سکتی ہے کہ آپ کروم API استعمال کر رہے ہیں۔ ایج کے نئے براؤزر ورژنز کرومیئم براؤزر انجن پر چلتے ہیں، اس لیے آپ ان ٹولز کا فائدہ اٹھا سکتے ہیں۔ > نوٹ کریں، اگر آپ کسی براؤزر ایکسٹینشن کو پروفائل کرنا چاہتے ہیں، تو ایکسٹینشن کے اندر سے ڈویلپر ٹولز لانچ کریں، کیونکہ یہ اپنا الگ براؤزر انسٹینس ہے۔ ### ڈیفالٹ آئیکن رنگ سیٹ کریں اب، `init()` فنکشن میں، آئیکن کو شروع میں ایک عمومی سبز رنگ پر سیٹ کریں، دوبارہ کروم کے `updateIcon` ایکشن کو کال کرکے: ```JavaScript chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: 'green', }, }); ``` ### فنکشن کو کال کریں، کال کو ایکزیکیوٹ کریں اب، اس فنکشن کو کال کریں جو آپ نے ابھی بنایا ہے، اسے C02Signal API کے ذریعے واپس کیے گئے پرامس میں شامل کرکے: ```JavaScript //let CO2... calculateColor(CO2); ``` اور آخر میں، `/dist/background.js` میں، ان بیک گراؤنڈ ایکشن کالز کے لیے لسٹنر شامل کریں: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); } }); //borrowed from energy lollipop extension, nice feature! function drawIcon(value) { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); context.beginPath(); context.fillStyle = value.color; context.arc(100, 100, 50, 0, 2 * Math.PI); context.fill(); return context.getImageData(50, 50, 100, 100); } ``` اس کوڈ میں، آپ بیک اینڈ ٹاسک مینیجر پر آنے والے کسی بھی میسجز کے لیے ایک لسٹنر شامل کر رہے ہیں۔ اگر اسے 'updateIcon' کہا جاتا ہے، تو اگلا کوڈ صحیح رنگ کے آئیکن کو کینوس API کا استعمال کرتے ہوئے ڈرا کرنے کے لیے چلایا جاتا ہے۔ ✅ آپ کینوس API کے بارے میں مزید [اسپیس گیم اسباق](../../6-space-game/2-drawing-to-canvas/README.md) میں سیکھیں گے۔ اب، اپنے ایکسٹینشن کو دوبارہ بنائیں (`npm run build`)، ریفریش کریں اور اپنے ایکسٹینشن کو لانچ کریں، اور رنگ کو تبدیل ہوتے دیکھیں۔ کیا یہ برتن دھونے یا کوئی اور کام کرنے کا اچھا وقت ہے؟ اب آپ جانتے ہیں! مبارک ہو، آپ نے ایک مفید براؤزر ایکسٹینشن بنایا اور یہ بھی سیکھا کہ براؤزر کیسے کام کرتا ہے اور اس کی کارکردگی کو کیسے پروفائل کیا جاتا ہے۔ --- ## 🚀 چیلنج کچھ اوپن سورس ویب سائٹس کی تحقیق کریں جو کافی عرصے سے موجود ہیں، اور ان کے گٹ ہب ہسٹری کی بنیاد پر دیکھیں کہ آیا انہیں کارکردگی کے لیے بہتر بنایا گیا تھا یا نہیں۔ سب سے عام مسئلہ کیا ہے؟ ## لیکچر کے بعد کا کوئز [لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/28) ## جائزہ اور خود مطالعہ [پرفارمنس نیوز لیٹر](https://perf.email/) کے لیے سائن اپ کرنے پر غور کریں۔ براؤزرز کے ویب پرفارمنس کو جانچنے کے طریقوں کی تحقیق کریں، ان کے ویب ٹولز میں پرفارمنس ٹیبز کو دیکھ کر۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟ ## اسائنمنٹ [سائٹ کی کارکردگی کا تجزیہ کریں](assignment.md) **ڈسکلیمر**: یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔