Web-Dev-For-Beginners/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "49b58721a71cfda824e2f3e1f46908c6",
  "translation_date": "2025-08-28T15:21:20+00:00",
  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
  "language_code": "ur"
}
-->
# براؤزر ایکسٹینشن پروجیکٹ حصہ 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)) اور 'ریکارڈ' بٹن پر کلک کریں، پھر سائٹ کو ریفریش کریں۔ کسی بھی وقت ریکارڈنگ کو روکیں، اور آپ ان روٹینز کو دیکھ سکیں گے جو سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کرنے کے لیے تیار کی گئی ہیں:

![ایج پروفائلر](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ur.png)

✅ [مائیکروسافٹ دستاویزات](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) پر ایج میں پرفارمنس پینل کے بارے میں مزید جانیں

> ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں

پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان واقعات کو زوم کیا جا سکے جو آپ کے صفحہ کے لوڈ ہونے کے دوران ہوتے ہیں۔

پروفائل ٹائم لائن کے ایک حصے کو منتخب کر کے اور خلاصہ پین کو دیکھ کر اپنے صفحہ کی کارکردگی کا اسنیپ شاٹ حاصل کریں:

![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ur.png)

ایونٹ لاگ پین کو چیک کریں تاکہ یہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے:

![ایج ایونٹ لاگ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ur.png)

✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈویلپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟

## پروفائلنگ چیکس

عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جنہیں ہر ویب ڈویلپر کو سائٹ بناتے وقت دیکھنا چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔

**اثاثوں کے سائز**: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گیا ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔

✅ [انٹرنیٹ آرکائیو](https://httparchive.org/reports/page-weight) کے ذریعے صفحہ کے وزن اور مزید کے تاریخی نظارے کے لیے دیکھیں۔

ایک اچھا عمل یہ ہے کہ یہ یقینی بنایا جائے کہ آپ کی تصاویر آپ کے صارفین کے لیے صحیح سائز اور ریزولوشن پر بہتر اور فراہم کی گئی ہیں۔

**DOM ٹریورسلز**: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا دستاویز آبجیکٹ ماڈل بنانا ہوتا ہے، اس لیے اچھے صفحہ کی کارکردگی کے مفاد میں اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کرنا اور اسٹائل کرنا جو صفحہ کو ضرورت ہے۔ اس نکتے پر، صفحہ سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحہ پر استعمال ہونے کی ضرورت ہے انہیں مثال کے طور پر مین اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے۔

**جاوا اسکرپٹ**: ہر جاوا اسکرپٹ ڈویلپر کو 'رینڈر بلاکنگ' اسکرپٹس کے لیے دیکھنا چاہیے جنہیں DOM کو ٹریورس اور براؤزر پر پینٹ کرنے سے پہلے لوڈ کرنا ضروری ہے۔ اپنے ان لائن اسکرپٹس کے ساتھ `defer` استعمال کرنے پر غور کریں (جیسا کہ ٹیریریم ماڈیول میں کیا گیا ہے)۔

✅ سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جانے والے عام چیکس کے بارے میں مزید جاننے کے لیے کچھ سائٹس کو [سائٹ اسپیڈ ٹیسٹ ویب سائٹ](https://www.webpagetest.org/) پر آزمائیں۔

اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے ان آخری چند چیزوں کو دیکھتے ہیں جنہیں آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے:

### رنگ کا حساب لگانے کے لیے ایک فنکشن بنائیں

`/src/index.js` میں کام کرتے ہوئے، `calculateColor()` نامی ایک فنکشن شامل کریں جو آپ نے DOM تک رسائی حاصل کرنے کے لیے سیٹ کیے گئے `const` متغیرات کی سیریز کے بعد ہو:

```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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔