<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "49b58721a71cfda824e2f3e1f46908c6",
  "translation_date": "2025-08-28T14:59:22+00:00",
  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
  "language_code": "ar"
}
-->
# مشروع إضافة المتصفح الجزء الثالث: التعرف على المهام الخلفية والأداء

## اختبار ما قبل المحاضرة

[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/27)

### المقدمة

في الدرسين الأخيرين من هذه الوحدة، تعلمت كيفية إنشاء نموذج ومنطقة عرض للبيانات المسترجعة من واجهة برمجة التطبيقات (API). هذا هو النهج القياسي لإنشاء وجود على الويب. كما تعلمت كيفية التعامل مع استرجاع البيانات بشكل غير متزامن. إضافة المتصفح الخاصة بك أصبحت شبه مكتملة.

ما تبقى هو إدارة بعض المهام الخلفية، بما في ذلك تحديث لون أيقونة الإضافة، لذا فإن هذا وقت رائع للحديث عن كيفية إدارة المتصفح لهذه الأنواع من المهام. دعنا نفكر في هذه المهام في سياق أداء أصول الويب الخاصة بك أثناء بنائها.

## أساسيات أداء الويب

> "أداء الموقع يتعلق بأمرين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- [زاك غروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)

موضوع جعل مواقع الويب سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، وفي جميع أنواع الظروف، هو موضوع واسع بشكل غير مفاجئ. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب قياسي أو إضافة متصفح.

أول شيء تحتاج إلى القيام به لضمان تشغيل موقعك بكفاءة هو جمع بيانات حول أدائه. المكان الأول للقيام بذلك هو أدوات المطور في متصفح الويب الخاص بك. في متصفح Edge، يمكنك اختيار زر "الإعدادات والمزيد" (رمز النقاط الثلاث في الزاوية العلوية اليمنى من المتصفح)، ثم الانتقال إلى المزيد من الأدوات > أدوات المطور وفتح علامة تبويب الأداء. يمكنك أيضًا استخدام اختصارات لوحة المفاتيح `Ctrl` + `Shift` + `I` على نظام Windows أو `Option` + `Command` + `I` على نظام Mac لفتح أدوات المطور.

تحتوي علامة تبويب الأداء على أداة تحليل الأداء. افتح موقع ويب (جرب، على سبيل المثال، [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) وانقر على زر "تسجيل"، ثم قم بتحديث الموقع. أوقف التسجيل في أي وقت، وستتمكن من رؤية الروتينات التي يتم إنشاؤها لـ "البرمجة"، "التقديم"، و"الرسم" للموقع:

![أداة تحليل الأداء في Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ar.png)

✅ قم بزيارة [وثائق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) حول لوحة الأداء في Edge.

> نصيحة: للحصول على قراءة دقيقة لوقت بدء تشغيل موقعك، قم بمسح ذاكرة التخزين المؤقت للمتصفح.

حدد عناصر من الخط الزمني للملف الشخصي لتكبير الأحداث التي تحدث أثناء تحميل صفحتك.

احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من الخط الزمني للملف الشخصي والنظر إلى لوحة الملخص:

![لقطة أداء Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ar.png)

تحقق من لوحة سجل الأحداث لمعرفة ما إذا كان أي حدث استغرق أكثر من 15 مللي ثانية:

![سجل أحداث Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ar.png)

✅ تعرف على أداة التحليل الخاصة بك! افتح أدوات المطور على هذا الموقع وشاهد ما إذا كانت هناك أي اختناقات. ما هو الأصل الذي يستغرق أطول وقت للتحميل؟ الأسرع؟

## فحوصات الأداء

بشكل عام، هناك بعض "مناطق المشاكل" التي يجب على كل مطور ويب مراقبتها عند بناء موقع لتجنب المفاجآت غير السارة عند نشره للإنتاج.

**أحجام الأصول**: أصبح الويب "أثقل"، وبالتالي أبطأ، خلال السنوات القليلة الماضية. يعود جزء من هذا الوزن إلى استخدام الصور.

✅ تصفح [أرشيف الإنترنت](https://httparchive.org/reports/page-weight) للحصول على عرض تاريخي لوزن الصفحات والمزيد.

من الممارسات الجيدة التأكد من أن صورك محسّنة ويتم تقديمها بالحجم والدقة المناسبين لمستخدميك.

**التنقل عبر DOM**: يجب على المتصفح بناء نموذج كائن المستند (DOM) بناءً على الكود الذي تكتبه، لذا من مصلحة الأداء الجيد للصفحة أن تبقي العلامات الخاصة بك بسيطة، باستخدام وتنسيق ما تحتاجه الصفحة فقط. على سبيل المثال، يمكن تحسين CSS الزائد المرتبط بالصفحة؛ الأنماط التي تحتاج إلى استخدامها في صفحة واحدة فقط لا تحتاج إلى تضمينها في ورقة الأنماط الرئيسية.

**JavaScript**: يجب على كل مطور JavaScript مراقبة النصوص البرمجية التي تعيق العرض والتي يجب تحميلها قبل أن يتمكن باقي DOM من التنقل والرسم في المتصفح. فكر في استخدام `defer` مع النصوص البرمجية المضمنة (كما هو الحال في وحدة Terrarium).

✅ جرب بعض المواقع على [موقع اختبار سرعة الموقع](https://www.webpagetest.org/) لتتعرف على الفحوصات الشائعة التي يتم إجراؤها لتحديد أداء الموقع.

الآن بعد أن أصبحت لديك فكرة عن كيفية عرض المتصفح للأصول التي ترسلها إليه، دعنا نلقي نظرة على آخر الأشياء التي تحتاج إلى القيام بها لإكمال الإضافة الخاصة بك:

### إنشاء وظيفة لحساب اللون

أثناء العمل في `/src/index.js`، أضف وظيفة تسمى `calculateColor()` بعد سلسلة المتغيرات `const` التي قمت بتعيينها للوصول إلى 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 الذي أكملته في الدرس الأخير، ثم تحسب مدى قرب قيمتها من الفهرس المقدم في مصفوفة الألوان. بعد ذلك، ترسل قيمة اللون الأقرب إلى chrome runtime.

يحتوي chrome.runtime على [واجهة برمجة تطبيقات](https://developer.chrome.com/extensions/runtime) تتعامل مع جميع أنواع المهام الخلفية، وتستفيد الإضافة الخاصة بك من ذلك:

> "استخدم واجهة برمجة التطبيقات chrome.runtime لاسترداد صفحة الخلفية، وإرجاع تفاصيل حول الملف التعريفي، والاستماع إلى الأحداث والاستجابة لها في دورة حياة التطبيق أو الإضافة. يمكنك أيضًا استخدام هذه الواجهة لتحويل المسارات النسبية لعناوين URL إلى عناوين URL مؤهلة بالكامل."

✅ إذا كنت تطور هذه الإضافة لمتصفح Edge، فقد يفاجئك أنك تستخدم واجهة برمجة تطبيقات chrome. الإصدارات الأحدث من متصفح Edge تعمل على محرك متصفح Chromium، لذا يمكنك الاستفادة من هذه الأدوات.

> ملاحظة، إذا كنت تريد تحليل أداء إضافة متصفح، قم بفتح أدوات المطور من داخل الإضافة نفسها، حيث إنها تعتبر مثيل متصفح منفصل.

### تعيين لون افتراضي للأيقونة

الآن، في وظيفة `init()`، قم بتعيين الأيقونة لتكون باللون الأخضر الافتراضي عن طريق استدعاء إجراء `updateIcon` الخاص بـ chrome مرة أخرى:

```JavaScript
chrome.runtime.sendMessage({
	action: 'updateIcon',
		value: {
			color: 'green',
		},
});
```

### استدعاء الوظيفة وتنفيذ الاستدعاء

بعد ذلك، قم باستدعاء الوظيفة التي أنشأتها للتو عن طريق إضافتها إلى الوعد الذي يتم إرجاعه بواسطة واجهة برمجة التطبيقات C02Signal:

```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'، يتم تشغيل الكود التالي لرسم أيقونة باللون المناسب باستخدام واجهة برمجة التطبيقات Canvas.

✅ ستتعلم المزيد عن واجهة برمجة التطبيقات Canvas في [دروس لعبة الفضاء](../../6-space-game/2-drawing-to-canvas/README.md).

الآن، قم بإعادة بناء الإضافة الخاصة بك (`npm run build`)، وقم بتحديث وتشغيل الإضافة، وشاهد تغير اللون. هل حان الوقت للقيام بمهمة أخرى أو غسل الأطباق؟ الآن تعرف!

تهانينا، لقد قمت ببناء إضافة متصفح مفيدة وتعلمت المزيد عن كيفية عمل المتصفح وكيفية تحليل أدائه.

---

## 🚀 التحدي

قم بالتحقيق في بعض مواقع الويب مفتوحة المصدر التي كانت موجودة منذ فترة طويلة، وبناءً على تاريخها في GitHub، حاول تحديد كيف تم تحسينها على مر السنين من حيث الأداء، إن وجد. ما هي نقطة الألم الأكثر شيوعًا؟

## اختبار ما بعد المحاضرة

[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/28)

## المراجعة والدراسة الذاتية

فكر في الاشتراك في [نشرة أخبار الأداء](https://perf.email/)

قم بالتحقيق في بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات تبويب الأداء في أدواتها. هل تجد أي اختلافات كبيرة؟

## الواجب

[تحليل موقع من حيث الأداء](assignment.md)

---

**إخلاء المسؤولية**:  
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.