24 KiB

Raw Blame History

مشروع إضافة المتصفح الجزء الثالث: تعلم حول المهام الخلفية والأداء

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

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

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

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

المقدمة

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

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

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

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

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

"أداء الموقع يدور حول شيئين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- زاك غروسبارت

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

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

لفتح أدوات المطور في Edge، انقر على تلك النقاط الثلاث في الزاوية العلوية اليمنى، ثم انتقل إلى أدوات إضافية > أدوات المطور. أو استخدم اختصار لوحة المفاتيح: Ctrl + Shift + I على Windows أو Option + Command + I على Mac. بمجرد أن تكون هناك، انقر على علامة تبويب الأداء - هذا هو المكان الذي ستجري فيه تحقيقك.

إليك مجموعة أدوات التحري الخاصة بالأداء:

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

دعونا نجرب هذا. افتح موقعًا (Microsoft.com يعمل بشكل جيد لهذا) وانقر على زر "تسجيل". الآن قم بتحديث الصفحة وشاهد المحلل يلتقط كل ما يحدث. عندما تتوقف عن التسجيل، سترى تفصيلًا دقيقًا لكيفية "كتابة" المتصفح، "عرضه"، و"رسمه" للموقع. يذكرني هذا بكيفية مراقبة مركز التحكم في المهمة لكل نظام أثناء إطلاق الصاروخ - تحصل على بيانات في الوقت الفعلي حول ما يحدث ومتى.

✅ يحتوي توثيق Microsoft على الكثير من التفاصيل إذا كنت تريد التعمق أكثر

نصيحة احترافية: قم بمسح ذاكرة التخزين المؤقت للمتصفح قبل الاختبار لمعرفة كيف يعمل موقعك للزوار لأول مرة - عادةً ما يكون مختلفًا تمامًا عن الزيارات المتكررة!

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

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

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

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

ما الذي يجب البحث عنه عند التحليل

تشغيل المحلل هو مجرد البداية - المهارة الحقيقية هي معرفة ما تخبرك به تلك الرسوم البيانية الملونة. لا تقلق، ستتعلم قراءة هذه الرسوم. المطورون ذوو الخبرة تعلموا كيفية اكتشاف علامات التحذير قبل أن تصبح مشاكل كاملة.

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

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

✅ تحقق من أرشيف الإنترنت لترى كيف نمت أحجام الصفحات بمرور الوقت - إنه كاشف للغاية.

إليك كيفية الحفاظ على أصولك محسنة:

اضغط تلك الصور! يمكن أن تقلل التنسيقات الحديثة مثل WebP من أحجام الملفات بشكل كبير
قدم الحجم الصحيح للصورة لكل جهاز - لا حاجة لإرسال صور ضخمة لأجهزة سطح المكتب إلى الهواتف
قلل من CSS وJavaScript - كل بايت مهم
استخدم التحميل الكسول بحيث يتم تنزيل الصور فقط عندما يقوم المستخدمون بالتمرير إليها

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

استراتيجيات رئيسية لتحسين DOM:

قلل عدد عناصر HTML ومستويات التعشيق
أزل قواعد CSS غير المستخدمة ودمج أوراق الأنماط بكفاءة
نظم CSS لتحميل ما هو مطلوب فقط لكل صفحة
هيكل HTML بشكل دلالي لتحليل أفضل من المتصفح

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

تقنيات تحسين JavaScript الحديثة:

استخدم السمة defer لتحميل النصوص بعد تحليل DOM
نفذ تقسيم الكود لتحميل JavaScript الضروري فقط
طبق التحميل الكسول للوظائف غير الحرجة
قلل من استخدام المكتبات والأطر الثقيلة عند الإمكان

✅ جرب بعض المواقع على موقع اختبار سرعة الموقع لتتعرف على الفحوصات الشائعة التي يتم إجراؤها لتحديد أداء الموقع.

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

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

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

ستأخذ هذه الوظيفة بيانات ثاني أكسيد الكربون من API الخاص بنا وتحدد اللون الذي يمثل بشكل أفضل التأثير البيئي. يشبه ذلك كيف يستخدم العلماء الترميز اللوني في خرائط الحرارة لتصور أنماط البيانات المعقدة - من درجات حرارة المحيطات إلى تكوين النجوم. دعونا نضيف هذا إلى /src/index.js، مباشرة بعد تلك المتغيرات const التي قمنا بإعدادها سابقًا:

function calculateColor(value) {
	// Define CO2 intensity scale (grams per kWh)
	const co2Scale = [0, 150, 600, 750, 800];
	// Corresponding colors from green (clean) to dark brown (high carbon)
	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	// Find the closest scale value to our input
	const closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	
	console.log(`${value} is closest to ${closestNum}`);
	
	// Find the index for color mapping
	const num = (element) => element > closestNum;
	const scaleIndex = co2Scale.findIndex(num);

	const closestColor = colors[scaleIndex];
	console.log(scaleIndex, closestColor);

	// Send color update message to background script
	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}

دعونا نفصل هذه الوظيفة الذكية الصغيرة:

إعداد مصفوفتين - واحدة لمستويات ثاني أكسيد الكربون، وأخرى للألوان (الأخضر = نظيف، البني = ملوث!)
إيجاد أقرب تطابق لقيمة ثاني أكسيد الكربون الفعلية باستخدام بعض الفرز الذكي للمصفوفة
الحصول على اللون المطابق باستخدام طريقة findIndex()
إرسال رسالة إلى نص الخلفية الخاص بـ Chrome مع اللون الذي اخترناه
استخدام القوالب النصية (تلك العلامات الخلفية) لتنسيق النصوص بشكل أنيق
الحفاظ على كل شيء منظمًا باستخدام إعلانات const

API chrome.runtime يشبه النظام العصبي لإضافتك - فهو يتعامل مع جميع الاتصالات والمهام التي تتم خلف الكواليس:

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

لماذا API Chrome Runtime مفيد جدًا:

يسمح لأجزاء مختلفة من الإضافة بالتحدث مع بعضها البعض
يتعامل مع العمل الخلفي دون تجميد واجهة المستخدم
يدير أحداث دورة حياة الإضافة الخاصة بك
يجعل تمرير الرسائل بين النصوص أمرًا سهلاً للغاية

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

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

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

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

في وظيفة init() الخاصة بك، دعنا نعد هذا اللون الأخضر الافتراضي:

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

ما الذي تحققه هذه التهيئة:

تعيين لون أخضر محايد كحالة افتراضية
توفير ملاحظات بصرية فورية عند تحميل الإضافة
تأسيس نمط الاتصال مع نص الخلفية
ضمان رؤية المستخدمين لإضافة وظيفية قبل تحميل البيانات

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

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

أضف هذا السطر مباشرة بعد حصولك على بيانات ثاني أكسيد الكربون من API:

// After retrieving CO2 data from the API
// let CO2 = data.data[0].intensity.actual;
calculateColor(CO2);

ما الذي تحققه هذه التكاملات:

ربط تدفق بيانات API بنظام المؤشر البصري
تشغيل تحديثات الأيقونة تلقائيًا عند وصول بيانات جديدة
ضمان ملاحظات بصرية في الوقت الفعلي بناءً على كثافة الكربون الحالية
الحفاظ على فصل الاهتمامات بين جلب البيانات ومنطق العرض

وأخيرًا، في /dist/background.js، أضف المستمع لهذه الاستدعاءات الخلفية:

// Listen for messages from the content script
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === 'updateIcon') {
		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
	}
});

// Draw dynamic icon using Canvas API
// Borrowed from energy lollipop extension - nice feature!
function drawIcon(value) {
	// Create an offscreen canvas for better performance
	const canvas = new OffscreenCanvas(200, 200);
	const context = canvas.getContext('2d');

	// Draw a colored circle representing carbon intensity
	context.beginPath();
	context.fillStyle = value.color;
	context.arc(100, 100, 50, 0, 2 * Math.PI);
	context.fill();

	// Return the image data for the browser icon
	return context.getImageData(50, 50, 100, 100);
}

ما الذي يفعله هذا النص الخلفي:

الاستماع للرسائل من النص الرئيسي الخاص بك (مثل موظف استقبال يتلقى المكالمات)
معالجة طلبات 'updateIcon' لتغيير أيقونة شريط الأدوات الخاص بك
إنشاء أيقونات جديدة أثناء التنقل باستخدام Canvas API
رسم دائرة ملونة بسيطة تظهر كثافة الكربون الحالية
تحديث شريط الأدوات الخاص بالمتصفح بالأيقونة الجديدة
استخدام OffscreenCanvas لأداء سلس (بدون تجميد واجهة المستخدم)

✅ ستتعلم المزيد عن Canvas API في دروس لعبة الفضاء.

حان وقت اختبار الإضافة الخاصة بك:

قم ببناء كل شيء باستخدام npm run build
أعد تحميل الإضافة الخاصة بك في المتصفح (لا تنسَ هذه الخطوة)
افتح الإضافة الخاصة بك وشاهد تلك الأيقونة تتغير ألوانها
تحقق من كيفية استجابتها لبيانات الكربون الحقيقية من جميع أنحاء العالم

الآن ستعرف في لمحة ما إذا كان الوقت مناسبًا لتشغيل الغسالة أو إذا كان يجب عليك الانتظار للحصول على طاقة أنظف. لقد قمت ببناء شيء مفيد حقًا وتعلمت عن أداء المتصفح على طول الطريق.

تحدي GitHub Copilot Agent 🚀

استخدم وضع الوكيل لإكمال التحدي التالي:

الوصف: عزز قدرات مراقبة الأداء لإضافة المتصفح عن طريق إضافة ميزة تتبع وعرض أوقات التحميل لمكونات الإضافة المختلفة.

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

تعرف على المزيد حول وضع الوكيل هنا.

🚀 التحدي

إليك مهمة تحقيق مثيرة: اختر بعض المواقع المفتوحة المصدر التي كانت موجودة منذ سنوات (مثل ويكيبيديا، GitHub، أو Stack Overflow) وقم بالبحث في تاريخ الالتزامات الخاصة بها. هل يمكنك تحديد الأماكن التي قاموا فيها بتحسين الأداء؟ ما هي المشاكل التي استمرت في الظهور؟

نهج التحقيق الخاص بك:

ابحث في رسائل الالتزامات عن كلمات مثل "تحسين"، "أداء"، أو "أسرع"
لاحظ الأنماط - هل يستمرون في إصلاح نفس أنواع المشاكل؟
حدد الأسباب الشائعة التي تؤدي إلى بطء المواقع
شارك ما تكتشفه - يمكن للمطورين الآخرين التعلم من أمثلة واقعية

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

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

فكر في الاشتراك في نشرة أخبار الأداء

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

الواجب

تحليل موقع للأداء

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.

24 KiB Raw Blame History