softchris
04881ec984
|
2 months ago | |
|---|---|---|
| .. | ||
| README.md | 2 months ago | |
| assignment.md | 3 months ago | |
README.md
مشروع إضافة المتصفح الجزء الثالث: تعلم المهام الخلفية والأداء
اختبار ما قبل المحاضرة
المقدمة
في الدروس الأخيرة من هذه الوحدة، تعلمت كيفية إنشاء نموذج ومنطقة عرض للبيانات المستخرجة من واجهة برمجة التطبيقات (API). هذه طريقة شائعة جدًا لإنشاء وجود على الويب. حتى أنك تعلمت كيفية التعامل مع استخراج البيانات بشكل غير متزامن. إضافة المتصفح الخاصة بك أصبحت شبه مكتملة.
يتبقى إدارة بعض المهام الخلفية، بما في ذلك تحديث لون أيقونة الإضافة، لذا هذا وقت رائع للحديث عن كيفية إدارة المتصفح لهذا النوع من المهام. دعونا نفكر في هذه المهام في سياق أداء أصول الويب الخاصة بك أثناء بنائها.
أساسيات أداء الويب
"أداء الموقع يتعلق بشيئين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- زاك جروسبرت
موضوع كيفية جعل مواقعك سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، وفي جميع أنواع الظروف، هو موضوع واسع بشكل غير مفاجئ. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب عادي أو إضافة متصفح.
أول شيء تحتاج إلى القيام به لضمان تشغيل موقعك بكفاءة هو جمع البيانات حول أدائه. المكان الأول للقيام بذلك هو أدوات المطور في متصفح الويب الخاص بك. في Edge، يمكنك اختيار زر "الإعدادات والمزيد" (رمز النقاط الثلاث في أعلى يمين المتصفح)، ثم الانتقال إلى أدوات إضافية > أدوات المطور وفتح علامة تبويب الأداء. يمكنك أيضًا استخدام اختصارات لوحة المفاتيح Ctrl + Shift + I على Windows أو Option + Command + I على Mac لفتح أدوات المطور.
تحتوي علامة تبويب الأداء على أداة تحليل الأداء. افتح موقعًا إلكترونيًا (جرب، على سبيل المثال، https://www.microsoft.com) وانقر على زر "تسجيل"، ثم قم بتحديث الموقع. أوقف التسجيل في أي وقت، وستتمكن من رؤية الروتينات التي يتم إنشاؤها لـ "البرمجة"، "التقديم"، و"الرسم" للموقع:
✅ قم بزيارة وثائق Microsoft حول لوحة الأداء في Edge
نصيحة: للحصول على قراءة دقيقة لوقت بدء تشغيل موقعك، قم بمسح ذاكرة التخزين المؤقت للمتصفح الخاص بك
حدد عناصر من الجدول الزمني للملف الشخصي لتكبير الأحداث التي تحدث أثناء تحميل صفحتك.
احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من الجدول الزمني للملف الشخصي والنظر إلى لوحة الملخص:
تحقق من لوحة سجل الأحداث لمعرفة ما إذا كان أي حدث استغرق أكثر من 15 مللي ثانية:
✅ تعرف على محللك! افتح أدوات المطور على هذا الموقع وشاهد ما إذا كانت هناك أي اختناقات. ما هو الأصل الذي يستغرق أطول وقت للتحميل؟ الأسرع؟
فحوصات التحليل
بشكل عام، هناك بعض "مناطق المشاكل" التي يجب على كل مطور ويب مراقبتها عند بناء موقع لتجنب المفاجآت السيئة عندما يحين وقت النشر للإنتاج.
أحجام الأصول: أصبح الويب "أثقل"، وبالتالي أبطأ، على مدار السنوات القليلة الماضية. بعض هذا الوزن يتعلق باستخدام الصور.
✅ تصفح أرشيف الإنترنت للحصول على نظرة تاريخية على وزن الصفحات والمزيد.
من الممارسات الجيدة التأكد من أن صورك محسّنة ويتم تقديمها بالحجم والدقة المناسبين لمستخدميك.
التنقل عبر 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',
},
});
استدعاء الوظيفة، تنفيذ الاستدعاء
بعد ذلك، قم باستدعاء الوظيفة التي أنشأتها للتو عن طريق إضافتها إلى الوعد الذي يتم إرجاعه بواسطة API الخاص بـ 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.
✅ ستتعلم المزيد عن واجهة برمجة تطبيقات Canvas في دروس لعبة الفضاء.
الآن، قم بإعادة بناء الإضافة الخاصة بك (npm run build)، قم بتحديث وتشغيل الإضافة، وشاهد تغير اللون. هل حان الوقت للقيام بمهمة أو غسل الصحون؟ الآن تعرف!
تهانينا، لقد قمت ببناء إضافة متصفح مفيدة وتعلمت المزيد عن كيفية عمل المتصفح وكيفية تحليل أدائه.
تحدي وكيل GitHub Copilot 🚀
استخدم وضع الوكيل لإكمال التحدي التالي:
الوصف: تحسين قدرات مراقبة الأداء لإضافة المتصفح عن طريق إضافة ميزة تتبع وعرض أوقات التحميل لمكونات الإضافة المختلفة.
المهمة: قم بإنشاء نظام مراقبة الأداء لإضافة المتصفح يقيس ويسجل الوقت الذي يستغرقه استخراج بيانات CO2 من API، حساب الألوان، وتحديث الأيقونة. أضف وظيفة تسمى performanceTracker تستخدم واجهة برمجة تطبيقات الأداء لقياس هذه العمليات وعرض النتائج في وحدة تحكم المتصفح مع الطوابع الزمنية ومقاييس المدة.
🚀 التحدي
قم بالتحقيق في بعض المواقع المفتوحة المصدر التي كانت موجودة منذ فترة طويلة، وبناءً على تاريخها في GitHub، حاول تحديد كيف تم تحسينها على مر السنين من حيث الأداء، إن وجد. ما هي نقطة الألم الأكثر شيوعًا؟
اختبار ما بعد المحاضرة
المراجعة والدراسة الذاتية
فكر في الاشتراك في نشرة الأداء الإخبارية
قم بالتحقيق في بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات تبويب الأداء في أدواتها. هل تجد أي اختلافات كبيرة؟
الواجب
إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.