13 KiB
مشروع إضافة المتصفح الجزء الثالث: التعرف على المهام الخلفية والأداء
اختبار ما قبل المحاضرة
المقدمة
في الدروس السابقة من هذه الوحدة، تعلمت كيفية إنشاء نموذج ومنطقة عرض للبيانات المستخرجة من واجهة برمجية (API). هذه طريقة شائعة جدًا لإنشاء وجود على الويب. حتى أنك تعلمت كيفية التعامل مع استخراج البيانات بشكل غير متزامن. إضافة المتصفح الخاصة بك أصبحت شبه مكتملة.
ما تبقى هو إدارة بعض المهام الخلفية، بما في ذلك تحديث لون أيقونة الإضافة، لذا هذا وقت مناسب للحديث عن كيفية إدارة المتصفح لهذا النوع من المهام. دعنا نفكر في هذه المهام في سياق أداء أصول الويب الخاصة بك أثناء بنائها.
أساسيات أداء الويب
"أداء الموقع يتعلق بشيئين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- زاك غروسبارت
موضوع كيفية جعل مواقعك سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، وفي جميع أنواع الظروف، هو موضوع واسع بشكل غير مفاجئ. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب عادي أو إضافة متصفح.
أول شيء تحتاج إلى القيام به لضمان تشغيل موقعك بكفاءة هو جمع بيانات حول أدائه. المكان الأول للقيام بذلك هو أدوات المطور في متصفح الويب الخاص بك. في Edge، يمكنك اختيار زر "الإعدادات والمزيد" (رمز النقاط الثلاث في أعلى يمين المتصفح)، ثم الانتقال إلى أدوات إضافية > أدوات المطور وفتح علامة تبويب الأداء. يمكنك أيضًا استخدام اختصارات لوحة المفاتيح Ctrl + Shift + I على Windows أو Option + Command + I على Mac لفتح أدوات المطور.
تحتوي علامة تبويب الأداء على أداة تحليل الأداء. افتح موقع ويب (جرب، على سبيل المثال، https://www.microsoft.com) وانقر على زر "تسجيل"، ثم قم بتحديث الموقع. أوقف التسجيل في أي وقت، وستتمكن من رؤية الروتينات التي تم إنشاؤها لـ "البرمجة"، "التقديم"، و"الرسم" للموقع:
✅ قم بزيارة وثائق Microsoft حول لوحة الأداء في Edge
نصيحة: للحصول على قراءة دقيقة لوقت بدء تشغيل موقعك، قم بمسح ذاكرة التخزين المؤقت للمتصفح الخاص بك.
حدد عناصر من الجدول الزمني للملف الشخصي لتكبير الأحداث التي تحدث أثناء تحميل صفحتك.
احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من الجدول الزمني للملف الشخصي والنظر إلى لوحة الملخص:
تحقق من لوحة سجل الأحداث لمعرفة ما إذا كان أي حدث استغرق أكثر من 15 مللي ثانية:
✅ تعرف على محلل الأداء الخاص بك! افتح أدوات المطور على هذا الموقع وتحقق مما إذا كانت هناك أي اختناقات. ما هو الأصل الذي يستغرق أطول وقت للتحميل؟ الأسرع؟
فحوصات التحليل
بشكل عام، هناك بعض "مناطق المشاكل" التي يجب على كل مطور ويب مراقبتها عند بناء موقع لتجنب المفاجآت السيئة عند وقت النشر للإنتاج.
أحجام الأصول: أصبح الويب "أثقل"، وبالتالي أبطأ، خلال السنوات القليلة الماضية. بعض هذا الوزن يتعلق باستخدام الصور.
✅ تصفح أرشيف الإنترنت للحصول على نظرة تاريخية على وزن الصفحات والمزيد.
من الممارسات الجيدة التأكد من أن صورك محسّنة ويتم تقديمها بالحجم والدقة المناسبين لمستخدميك.
التنقل عبر DOM: يجب على المتصفح بناء نموذج الكائنات المستندة (DOM) بناءً على الكود الذي تكتبه، لذا من مصلحة أداء الصفحة الجيد أن تبقي العلامات الخاصة بك بسيطة، باستخدام وتنسيق ما تحتاجه الصفحة فقط. على سبيل المثال، يمكن تحسين CSS الزائد المرتبط بالصفحة؛ الأنماط التي تحتاج إلى استخدامها فقط في صفحة واحدة لا تحتاج إلى تضمينها في ورقة الأنماط الرئيسية.
JavaScript: يجب على كل مطور JavaScript مراقبة النصوص التي تعيق التقديم والتي يجب تحميلها قبل أن يتمكن DOM من التنقل والرسم في المتصفح. فكر في استخدام defer مع النصوص المضمنة الخاصة بك (كما هو الحال في وحدة Terrarium).
✅ جرب بعض المواقع على موقع اختبار سرعة الموقع لتتعرف على الفحوصات الشائعة التي يتم إجراؤها لتحديد أداء الموقع.
الآن بعد أن أصبحت لديك فكرة عن كيفية تقديم المتصفح للأصول التي ترسلها إليه، دعنا نلقي نظرة على آخر الأشياء التي تحتاج إلى القيام بها لإكمال الإضافة الخاصة بك:
إنشاء وظيفة لحساب اللون
أثناء العمل في /src/index.js، أضف وظيفة تسمى calculateColor() بعد سلسلة المتغيرات const التي قمت بتعيينها للوصول إلى DOM:
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 واجهة برمجية تتعامل مع جميع أنواع المهام الخلفية، وإضافتك تستفيد منها:
"استخدم واجهة chrome.runtime لاسترداد صفحة الخلفية، وإرجاع تفاصيل حول الملف التعريفي، والاستماع إلى الأحداث والرد عليها في دورة حياة التطبيق أو الإضافة. يمكنك أيضًا استخدام هذه الواجهة لتحويل المسارات النسبية لعناوين URL إلى عناوين URL مؤهلة بالكامل."
✅ إذا كنت تطور هذه الإضافة لمتصفح Edge، قد يفاجئك أنك تستخدم واجهة chrome. الإصدارات الأحدث من متصفح Edge تعمل على محرك متصفح Chromium، لذا يمكنك الاستفادة من هذه الأدوات.
ملاحظة، إذا كنت تريد تحليل أداء إضافة متصفح، قم بفتح أدوات المطور من داخل الإضافة نفسها، حيث إنها تعتبر مثيل متصفح منفصل.
تعيين لون أيقونة افتراضي
الآن، في وظيفة init()، قم بتعيين الأيقونة لتكون باللون الأخضر العام كبداية عن طريق استدعاء إجراء updateIcon الخاص بـ chrome مرة أخرى:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
استدعاء الوظيفة، تنفيذ الاستدعاء
بعد ذلك، قم باستدعاء الوظيفة التي أنشأتها للتو عن طريق إضافتها إلى الوعد الذي يتم إرجاعه بواسطة واجهة برمجية C02Signal:
//let CO2...
calculateColor(CO2);
وأخيرًا، في /dist/background.js، أضف المستمع لهذه الاستدعاءات الخاصة بالمهام الخلفية:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = new OffscreenCanvas(200, 200);
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 API.
✅ ستتعلم المزيد عن واجهة Canvas API في دروس لعبة الفضاء.
الآن، قم بإعادة بناء الإضافة الخاصة بك (npm run build)، قم بتحديث وتشغيل الإضافة، وشاهد تغير اللون. هل حان الوقت للقيام بمهمة أو غسل الصحون؟ الآن تعرف!
تهانينا، لقد قمت ببناء إضافة متصفح مفيدة وتعلمت المزيد عن كيفية عمل المتصفح وكيفية تحليل أدائه.
🚀 التحدي
قم بالتحقيق في بعض مواقع الويب مفتوحة المصدر التي كانت موجودة منذ فترة طويلة، وبناءً على تاريخها في GitHub، حاول تحديد كيف تم تحسينها على مر السنين من حيث الأداء، إن وجد. ما هي نقطة الألم الأكثر شيوعًا؟
اختبار ما بعد المحاضرة
المراجعة والدراسة الذاتية
فكر في الاشتراك في نشرة أخبار الأداء
قم بالتحقيق في بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات تبويب الأداء في أدوات الويب الخاصة بها. هل تجد أي اختلافات كبيرة؟
الواجب
إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.