في الدرسين الأخيرين من هذه الوحدة، تعلمت كيفية إنشاء نموذج ومنطقة عرض للبيانات المسترجعة من واجهة برمجة التطبيقات (API). هذا هو النهج القياسي لإنشاء وجود على الويب. كما تعلمت كيفية التعامل مع استرجاع البيانات بشكل غير متزامن. إضافة المتصفح الخاصة بك أصبحت شبه مكتملة.
في الدروس السابقة من هذه الوحدة، تعلمت كيفية إنشاء نموذج ومنطقة عرض للبيانات المستخرجة من واجهة برمجية (API). هذه طريقة شائعة جدًا لإنشاء وجود على الويب. حتى أنك تعلمت كيفية التعامل مع استخراج البيانات بشكل غير متزامن. إضافة المتصفح الخاصة بك أصبحت شبه مكتملة.
ما تبقى هو إدارة بعض المهام الخلفية، بما في ذلك تحديث لون أيقونة الإضافة، لذا فإن هذا وقت رائع للحديث عن كيفية إدارة المتصفح لهذه الأنواع من المهام. دعنا نفكر في هذه المهام في سياق أداء أصول الويب الخاصة بك أثناء بنائها.
ما تبقى هو إدارة بعض المهام الخلفية، بما في ذلك تحديث لون أيقونة الإضافة، لذا هذا وقت مناسب للحديث عن كيفية إدارة المتصفح لهذا النوع من المهام. دعنا نفكر في هذه المهام في سياق أداء أصول الويب الخاصة بك أثناء بنائها.
## أساسيات أداء الويب
> "أداء الموقع يتعلق بأمرين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- [زاك غروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "أداء الموقع يتعلق بشيئين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- [زاك غروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
موضوع جعل مواقع الويب سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، وفي جميع أنواع الظروف، هو موضوع واسع بشكل غير مفاجئ. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب قياسي أو إضافة متصفح.
موضوع كيفية جعل مواقعك سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، وفي جميع أنواع الظروف، هو موضوع واسع بشكل غير مفاجئ. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب عادي أو إضافة متصفح.
أول شيء تحتاج إلى القيام به لضمان تشغيل موقعك بكفاءة هو جمع بيانات حول أدائه. المكان الأول للقيام بذلك هو أدوات المطور في متصفح الويب الخاص بك. في متصفح Edge، يمكنك اختيار زر "الإعدادات والمزيد" (رمز النقاط الثلاث في الزاوية العلوية اليمنى من المتصفح)، ثم الانتقال إلى المزيد من الأدوات > أدوات المطور وفتح علامة تبويب الأداء. يمكنك أيضًا استخدام اختصارات لوحة المفاتيح `Ctrl` + `Shift` + `I` على نظام Windows أو `Option` + `Command` + `I` على نظام Mac لفتح أدوات المطور.
أول شيء تحتاج إلى القيام به لضمان تشغيل موقعك بكفاءة هو جمع بيانات حول أدائه. المكان الأول للقيام بذلك هو أدوات المطور في متصفح الويب الخاص بك. في Edge، يمكنك اختيار زر "الإعدادات والمزيد" (رمز النقاط الثلاث في أعلى يمين المتصفح)، ثم الانتقال إلى أدوات إضافية > أدوات المطور وفتح علامة تبويب الأداء. يمكنك أيضًا استخدام اختصارات لوحة المفاتيح `Ctrl` + `Shift` + `I` على Windows أو `Option` + `Command` + `I` على Mac لفتح أدوات المطور.
تحتوي علامة تبويب الأداء على أداة تحليل الأداء. افتح موقع ويب (جرب، على سبيل المثال، [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) وانقر على زر "تسجيل"، ثم قم بتحديث الموقع. أوقف التسجيل في أي وقت، وستتمكن من رؤية الروتينات التي يتم إنشاؤها لـ "البرمجة"، "التقديم"، و"الرسم" للموقع:
تحتوي علامة تبويب الأداء على أداة تحليل الأداء. افتح موقع ويب (جرب، على سبيل المثال، [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) وانقر على زر "تسجيل"، ثم قم بتحديث الموقع. أوقف التسجيل في أي وقت، وستتمكن من رؤية الروتينات التي تم إنشاؤها لـ "البرمجة"، "التقديم"، و"الرسم" للموقع:
✅ قم بزيارة [وثائق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) حول لوحة الأداء في Edge.
✅ قم بزيارة [وثائق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) حول لوحة الأداء في Edge
> نصيحة: للحصول على قراءة دقيقة لوقت بدء تشغيل موقعك، قم بمسح ذاكرة التخزين المؤقت للمتصفح.
> نصيحة: للحصول على قراءة دقيقة لوقت بدء تشغيل موقعك، قم بمسح ذاكرة التخزين المؤقت للمتصفح الخاص بك.
حدد عناصر من الخط الزمني للملف الشخصي لتكبير الأحداث التي تحدث أثناء تحميل صفحتك.
حدد عناصر من الجدول الزمني للملف الشخصي لتكبير الأحداث التي تحدث أثناء تحميل صفحتك.
احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من الخط الزمني للملف الشخصي والنظر إلى لوحة الملخص:
احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من الجدول الزمني للملف الشخصي والنظر إلى لوحة الملخص:
تحقق من لوحة سجل الأحداث لمعرفة ما إذا كان أي حدث استغرق أكثر من 15 مللي ثانية:
✅ تعرف على أداة التحليل الخاصة بك! افتح أدوات المطور على هذا الموقع وشاهد ما إذا كانت هناك أي اختناقات. ما هو الأصل الذي يستغرق أطول وقت للتحميل؟ الأسرع؟
✅ تعرف على محلل الأداء الخاص بك! افتح أدوات المطور على هذا الموقع وتحقق مما إذا كانت هناك أي اختناقات. ما هو الأصل الذي يستغرق أطول وقت للتحميل؟ الأسرع؟
## فحوصات الأداء
## فحوصات التحليل
بشكل عام، هناك بعض "مناطق المشاكل" التي يجب على كل مطور ويب مراقبتها عند بناء موقع لتجنب المفاجآت غير السارة عند نشره للإنتاج.
بشكل عام، هناك بعض "مناطق المشاكل" التي يجب على كل مطور ويب مراقبتها عند بناء موقع لتجنب المفاجآت السيئة عند وقت النشر للإنتاج.
**أحجام الأصول**: أصبح الويب "أثقل"، وبالتالي أبطأ، خلال السنوات القليلة الماضية. يعود جزء من هذا الوزن إلى استخدام الصور.
**أحجام الأصول**: أصبح الويب "أثقل"، وبالتالي أبطأ، خلال السنوات القليلة الماضية. بعض هذا الوزن يتعلق باستخدام الصور.
✅ تصفح [أرشيف الإنترنت](https://httparchive.org/reports/page-weight) للحصول على عرض تاريخي لوزن الصفحات والمزيد.
✅ تصفح [أرشيف الإنترنت](https://httparchive.org/reports/page-weight) للحصول على نظرة تاريخية على وزن الصفحات والمزيد.
من الممارسات الجيدة التأكد من أن صورك محسّنة ويتم تقديمها بالحجم والدقة المناسبين لمستخدميك.
**التنقل عبر DOM**: يجب على المتصفح بناء نموذج كائن المستند (DOM) بناءً على الكود الذي تكتبه، لذا من مصلحة الأداء الجيد للصفحة أن تبقي العلامات الخاصة بك بسيطة، باستخدام وتنسيق ما تحتاجه الصفحة فقط. على سبيل المثال، يمكن تحسين CSS الزائد المرتبط بالصفحة؛ الأنماط التي تحتاج إلى استخدامها في صفحة واحدة فقط لا تحتاج إلى تضمينها في ورقة الأنماط الرئيسية.
**التنقل عبر DOM**: يجب على المتصفح بناء نموذج الكائنات المستندة (DOM) بناءً على الكود الذي تكتبه، لذا من مصلحة أداء الصفحة الجيد أن تبقي العلامات الخاصة بك بسيطة، باستخدام وتنسيق ما تحتاجه الصفحة فقط. على سبيل المثال، يمكن تحسين CSS الزائد المرتبط بالصفحة؛ الأنماط التي تحتاج إلى استخدامها فقط في صفحة واحدة لا تحتاج إلى تضمينها في ورقة الأنماط الرئيسية.
**JavaScript**: يجب على كل مطور JavaScript مراقبة النصوص البرمجية التي تعيق العرض والتي يجب تحميلها قبل أن يتمكن باقي DOM من التنقل والرسم في المتصفح. فكر في استخدام `defer` مع النصوص البرمجية المضمنة (كما هو الحال في وحدة Terrarium).
**JavaScript**: يجب على كل مطور JavaScript مراقبة النصوص التي تعيق التقديم والتي يجب تحميلها قبل أن يتمكن DOM من التنقل والرسم في المتصفح. فكر في استخدام `defer` مع النصوص المضمنة الخاصة بك (كما هو الحال في وحدة Terrarium).
✅ جرب بعض المواقع على [موقع اختبار سرعة الموقع](https://www.webpagetest.org/) لتتعرف على الفحوصات الشائعة التي يتم إجراؤها لتحديد أداء الموقع.
الآن بعد أن أصبحت لديك فكرة عن كيفية عرض المتصفح للأصول التي ترسلها إليه، دعنا نلقي نظرة على آخر الأشياء التي تحتاج إلى القيام بها لإكمال الإضافة الخاصة بك:
الآن بعد أن أصبحت لديك فكرة عن كيفية تقديم المتصفح للأصول التي ترسلها إليه، دعنا نلقي نظرة على آخر الأشياء التي تحتاج إلى القيام بها لإكمال الإضافة الخاصة بك:
### إنشاء وظيفة لحساب اللون
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
ما الذي يحدث هنا؟ تقوم بتمرير قيمة (كثافة الكربون) من استدعاء API الذي أكملته في الدرس الأخير، ثم تحسب مدى قرب قيمتها من الفهرس المقدم في مصفوفة الألوان. بعد ذلك، ترسل قيمة اللون الأقرب إلى chrome runtime.
ما الذي يحدث هنا؟ تقوم بتمرير قيمة (شدة الكربون) من استدعاء API الذي أكملته في الدرس الأخير، ثم تحسب مدى قرب قيمتها من المؤشر المقدم في مصفوفة الألوان. بعد ذلك، ترسل قيمة اللون الأقرب إلى chrome runtime.
يحتوي chrome.runtime على [واجهة برمجة تطبيقات](https://developer.chrome.com/extensions/runtime) تتعامل مع جميع أنواع المهام الخلفية، وتستفيد الإضافة الخاصة بك من ذلك:
لدى chrome.runtime [واجهة برمجية](https://developer.chrome.com/extensions/runtime) تتعامل مع جميع أنواع المهام الخلفية، وإضافتك تستفيد منها:
> "استخدم واجهة برمجة التطبيقات chrome.runtime لاسترداد صفحة الخلفية، وإرجاع تفاصيل حول الملف التعريفي، والاستماع إلى الأحداث والاستجابة لها في دورة حياة التطبيق أو الإضافة. يمكنك أيضًا استخدام هذه الواجهة لتحويل المسارات النسبية لعناوين URL إلى عناوين URL مؤهلة بالكامل."
> "استخدم واجهة chrome.runtime لاسترداد صفحة الخلفية، وإرجاع تفاصيل حول الملف التعريفي، والاستماع إلى الأحداث والرد عليها في دورة حياة التطبيق أو الإضافة. يمكنك أيضًا استخدام هذه الواجهة لتحويل المسارات النسبية لعناوين URL إلى عناوين URL مؤهلة بالكامل."
✅ إذا كنت تطور هذه الإضافة لمتصفح Edge، فقد يفاجئك أنك تستخدم واجهة برمجة تطبيقات chrome. الإصدارات الأحدث من متصفح Edge تعمل على محرك متصفح Chromium، لذا يمكنك الاستفادة من هذه الأدوات.
✅ إذا كنت تطور هذه الإضافة لمتصفح Edge، قد يفاجئك أنك تستخدم واجهة chrome. الإصدارات الأحدث من متصفح Edge تعمل على محرك متصفح Chromium، لذا يمكنك الاستفادة من هذه الأدوات.
> ملاحظة، إذا كنت تريد تحليل أداء إضافة متصفح، قم بفتح أدوات المطور من داخل الإضافة نفسها، حيث إنها تعتبر مثيل متصفح منفصل.
### تعيين لون افتراضي للأيقونة
### تعيين لون أيقونة افتراضي
الآن، في وظيفة `init()`، قم بتعيين الأيقونة لتكون باللون الأخضر الافتراضي عن طريق استدعاء إجراء `updateIcon` الخاص بـ chrome مرة أخرى:
الآن، في وظيفة `init()`، قم بتعيين الأيقونة لتكون باللون الأخضر العام كبداية عن طريق استدعاء إجراء `updateIcon` الخاص بـ chrome مرة أخرى:
```JavaScript
chrome.runtime.sendMessage({
@ -110,10 +110,9 @@ chrome.runtime.sendMessage({
},
});
```
### استدعاء الوظيفة، تنفيذ الاستدعاء
### استدعاء الوظيفة وتنفيذ الاستدعاء
بعد ذلك، قم باستدعاء الوظيفة التي أنشأتها للتو عن طريق إضافتها إلى الوعد الذي يتم إرجاعه بواسطة واجهة برمجة التطبيقات C02Signal:
بعد ذلك، قم باستدعاء الوظيفة التي أنشأتها للتو عن طريق إضافتها إلى الوعد الذي يتم إرجاعه بواسطة واجهة برمجية C02Signal:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,11 +141,11 @@ function drawIcon(value) {
}
```
في هذا الكود، تقوم بإضافة مستمع لأي رسائل تصل إلى مدير المهام الخلفية. إذا تم استدعاؤها بـ 'updateIcon'، يتم تشغيل الكود التالي لرسم أيقونة باللون المناسب باستخدام واجهة برمجة التطبيقات Canvas.
في هذا الكود، تقوم بإضافة مستمع لأي رسائل تصل إلى مدير المهام الخلفية. إذا تم استدعاؤها بـ 'updateIcon'، يتم تشغيل الكود التالي لرسم أيقونة باللون المناسب باستخدام واجهة Canvas API.
✅ ستتعلم المزيد عن واجهة برمجة التطبيقات Canvas في [دروس لعبة الفضاء](../../6-space-game/2-drawing-to-canvas/README.md).
✅ ستتعلم المزيد عن واجهة Canvas API في [دروس لعبة الفضاء](../../6-space-game/2-drawing-to-canvas/README.md).
الآن، قم بإعادة بناء الإضافة الخاصة بك (`npm run build`)، وقم بتحديث وتشغيل الإضافة، وشاهد تغير اللون. هل حان الوقت للقيام بمهمة أخرى أو غسل الأطباق؟ الآن تعرف!
الآن، قم بإعادة بناء الإضافة الخاصة بك (`npm run build`)، قم بتحديث وتشغيل الإضافة، وشاهد تغير اللون. هل حان الوقت للقيام بمهمة أو غسل الصحون؟ الآن تعرف!
تهانينا، لقد قمت ببناء إضافة متصفح مفيدة وتعلمت المزيد عن كيفية عمل المتصفح وكيفية تحليل أدائه.
@ -164,7 +163,7 @@ function drawIcon(value) {
فكر في الاشتراك في [نشرة أخبار الأداء](https://perf.email/)
قم بالتحقيق في بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات تبويب الأداء في أدواتها. هل تجد أي اختلافات كبيرة؟
قم بالتحقيق في بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات تبويب الأداء في أدوات الويب الخاصة بها. هل تجد أي اختلافات كبيرة؟
## الواجب
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
В последните две уроци от този модул научихте как да създадете форма и зона за показване на данни, извлечени от API. Това е много стандартен начин за създаване на уеб присъствие. Дори научихте как да обработвате асинхронно извличане на данни. Вашето браузърно разширение е почти завършено.
В последните два урока от този модул научихте как да създадете форма и зона за показване на данни, извлечени от API. Това е много стандартен начин за създаване на уеб присъствие в интернет. Дори научихте как да обработвате асинхронно извличане на данни. Вашето браузърно разширение е почти готово.
Остава да управлявате някои фонови задачи, включително обновяване на цвета на иконата на разширението, така че това е чудесен момент да обсъдим как браузърът управлява този тип задачи. Нека разгледаме тези задачи в контекста на производителността на вашите уеб ресурси, докато ги изграждате.
Остава да управлявате някои фонови задачи, включително обновяване на цвета на иконата на разширението, така че това е чудесен момент да поговорим за това как браузърът управлява този вид задачи. Нека разгледаме тези задачи в контекста на производителността на вашите уеб ресурси, докато ги изграждате.
## Основи на уеб производителността
> "Производителността на уебсайта сесвежда до две неща: колко бързо се зарежда страницата и колко бързо работи кодът на нея." -- [Зак Гросбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Производителността на уебсайта сеотнася до две неща: колко бързо се зарежда страницата и колко бързо работи кодът на нея." -- [Зак Гросбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Темата за това как да направите вашите уебсайтове изключително бързи на всякакви устройства, за всякакви потребители и във всякакви ситуации е, разбираемо, обширна. Ето някои точки, които да имате предвид, докато изграждате стандартен уеб проект или браузърно разширение.
Темата за това как да направите вашите уебсайтове изключително бързи на всякакви устройства, за всякакви потребители и в всякакви ситуации,е, разбирасе, обширна. Ето някои точки, които трябва да имате предвид, докато изграждате стандартен уеб проект или браузърно разширение.
Първото нещо, което трябва да направите, за да се уверите, че вашият сайт работи ефективно, е да съберете данни за неговата производителност. Първото място за това са инструментите за разработчици на вашия уеб браузър. В Edge можете да изберете бутона "Настройки и още" (иконата с трите точки в горния десен ъгъл на браузъра), след това да отидете на Още инструменти > Инструменти за разработчици и да отворите раздела "Производителност". Можете също да използвате клавишните комбинации `Ctrl` + `Shift` + `I` на Windows или `Option` + `Command` + `I` на Mac, за да отворите инструментите за разработчици.
Първото нещо, което трябва да направите, за да гарантирате, че вашият сайт работи ефективно, е да съберете данни за неговата производителност. Първото място за това е инструментите за разработчици на вашия уеб браузър. В Edge можете да изберете бутона "Настройки и още" (иконата с три точки в горния десен ъгъл на браузъра), след това да навигирате до Още инструменти > Инструменти за разработчици и да отворите раздела Производителност. Можете също да използвате клавишните комбинации `Ctrl` + `Shift` + `I` на Windows или `Option` + `Command` + `I` на Mac, за да отворите инструментите за разработчици.
Разделът "Производителност" съдържа инструмент за профилиране. Отворете уебсайт (например [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликнете върху бутона "Запис", след което обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скриптиране', 'рендиране' и 'рисуване' на сайта:
Разделът Производителност съдържа инструмент за профилиране. Отворете уебсайт (например [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликнете върху бутона 'Запис', след това обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скрипт', 'рендиране' и 'рисуване' на сайта:
✅ Посетете [документацията на Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) за раздела "Производителност" в Edge.
✅ Посетете [Microsoft документацията](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) за панела Производителност в Edge
> Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си.
> Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си
Изберете елементи от времевата линия на профила, за да увеличите събитията, които се случват, докато вашата страница се зарежда.
Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и разгледате панела за обобщение:
Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и погледнете панела за обобщение:
Проверете панела "Дневник на събитията", за да видите дали някое събитие е отнело повече от 15 ms:
Проверете панела за дневник на събитията, за да видите дали някое събитие е отнело повече от 15 ms:
✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви тесни места. Кой е най-бавно зареждащият сересурс? Най-бързият?
✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви затруднения. Кой е най-бавно зареждащият сересурс? Най-бързият?
## Проверки за профилиране
Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади при пускането му в продукция.
Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади, когато дойде време за внедряване в продукция.
**Размери на ресурсите**: Уебът стана "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения.
**Размери на ресурсите**: Уебът естанал "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения.
✅ Разгледайте [Интернет архива](https://httparchive.org/reports/page-weight) за исторически преглед на теглото на страниците и още.
✅ Разгледайте [Интернет архива](https://httparchive.org/reports/page-weight) за исторически поглед върху теглото на страниците и още.
Добра практика е да се уверите, че вашите изображения са оптимизирани и доставени в правилния размер и резолюция за вашите потребители.
**Обхождане на DOM**: Браузърът трябва да изгради своя модел на документния обект (DOM) въз основа на кода, който пишете, така че е в интерес на добрата производителност на страницата да поддържате таговете минимални, като използвате и стилизирате само това, което страницата изисква. Например, излишният CSS, свързан със страницата, може да бъде оптимизиран; стилове, които трябва да се използват само на една страница, не е необходимо да бъдат включени в основния стилов файл.
**DOM обходи**: Браузърът трябва да изгради своя модел на обектите на документа (DOM) въз основа на кода, който пишете, така че е в интерес на добрата производителност на страницата да поддържате вашите тагове минимални, използвайки и стилизирайки само това, което страницата изисква. В тази връзка, излишният CSS, свързан със страницата, може да бъде оптимизиран; стилове, които трябва да се използват само на една страница, не е необходимо да бъдат включени в основния стилов файл, например.
**JavaScript**: Всеки JavaScript разработчик трябва да следи за "скриптове, блокиращи рендирането", които трябва да бъдат заредени, преди останалата част от DOM да може да бъде обходена и нарисувана в браузъра. Помислете за използването на `defer`с вашите вградени скриптове (както е направено в модула Terrarium).
**JavaScript**: Всеки JavaScript разработчик трябва да следи за скриптове, които блокират рендирането и трябва да бъдат заредени преди останалата част от DOM да може да бъде обходена и нарисувана в браузъра. Помислете за използване на `defer`с вашите вътрешни скриптове (както е направено в модула Terrarium).
✅ Изпробвайте някои сайтове на [уебсайт за тестване на скорост](https://www.webpagetest.org/), за да научите повече за общите проверки, които сеизвършват за определяне на производителността на сайта.
✅ Опитайте някои сайтове на [уебсайт за тест на скоростта на сайта](https://www.webpagetest.org/), за да научите повече за общите проверки, които сеправят за определяне на производителността на сайта.
Сега, когато имате представа как браузърът рендира ресурсите, които му изпращате, нека разгледаме последните няколко неща, които трябва да направите, за да завършите вашето разширение:
### Създайте функция за изчисляване на цвета
Работейки в `/src/index.js`, добавете функция, наречена `calculateColor()` след серията от `const` променливи, които зададохте, за да получите достъп до DOM:
Работейки в `/src/index.js`, добавете функция, наречена `calculateColor()` след серията от `const` променливи, които сте задали, за да получите достъп до DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Какво се случва тук? Подавате стойност (интензивността на въглерода) от API извикването, което завършихте в последния урок, и след това изчислявате колко близка е нейната стойност до индекса, представен в масива с цветове. След това изпращате тази най-близка цветова стойност към chrome runtime.
Какво се случва тук? Вие подавате стойност (интензивността на въглерода) от API извикването, което завършихте в последния урок, и след това изчислявате колко близка е нейната стойност до индекса, представен в масива с цветове. След това изпращате тази най-близка цветова стойност към chrome runtime.
Chrome.runtime има [API](https://developer.chrome.com/extensions/runtime), което обработва всякакви фонови задачи, и вашето разширение използва това:
Chrome.runtime има [API](https://developer.chrome.com/extensions/runtime), който обработва всякакви фонови задачи, и вашето разширение гоизползва:
> "Използвайте chrome.runtime API, за да извлечете фоновата страница, да върнете подробности за манифеста и да слушате и отговаряте на събития в жизнения цикъл на приложението или разширението. Можете също така да използвате този API, за да конвертирате относителния път на URL адресите в напълно квалифицирани URL адреси."
✅ Ако разработвате това браузърно разширение за Edge, може да ви изненада, че използвате chrome API. По-новите версии на браузъра Edge работят на браузърния енджин Chromium, така че можете да използвате тези инструменти.
✅ Ако разработвате това браузърно разширение за Edge, може да ви изненада, че използвате chrome API. Новите версии на браузъра Edge работят на браузърния двигател Chromium, така че можете да използвате тези инструменти.
> Забележка: ако искате да профилирате браузърно разширение, стартирайте инструментите за разработчици от самото разширение, тъй като то е отделен браузърен екземпляр.
### Задайте цвят по подразбиране за иконата
Сега, във функцията `init()`, задайте иконата да бъде обикновено зелена в началото, като отново извикате действието `updateIcon` на chrome:
Сега, във функцията `init()`, задайте иконата да бъде общо зелена в началото, като отново извикате действието `updateIcon` на chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,10 +110,9 @@ chrome.runtime.sendMessage({
},
});
```
### Извикайте функцията, изпълнете извикването
След това извикайте функцията, която току-що създадохте, като я добавите към обещанието, върнато от C02Signal API:
След това извикайте функцията, която току-що създадохте, като я добавите към обещанието, върнато от API за C02Signal:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,11 +141,11 @@ function drawIcon(value) {
}
```
В този код добавяте слушател за всякакви съобщения, идващи към мениджъра на фонови задачи. Ако се нарича 'updateIcon', следващият код се изпълнява, за да нарисува икона с правилния цвят, използвайки Canvas API.
В този код добавяте слушател за всякакви съобщения, идващи към мениджъра на фонови задачи. Ако е наречен 'updateIcon', тогава следващият код се изпълнява, за да нарисува икона с правилния цвят, използвайки Canvas API.
✅ Ще научите повече за Canvas API в [уроците за космическата игра](../../6-space-game/2-drawing-to-canvas/README.md).
Сега, изградете отново вашето разширение (`npm run build`), обновете и стартирайте вашето разширение и наблюдавайте как цветът се променя. Добър момент ли е да излезете за малко или да измиете чиниите? Сега знаете!
Сега, изградете отново вашето разширение (`npm run build`), обновете и стартирайте вашето разширение и наблюдавайте промяната на цвета. Добър момент ли е да направите някоя задача или да измиете съдовете? Сега знаете!
Поздравления, създадохте полезно браузърно разширение и научихте повече за това как работи браузърът и как да профилирате неговата производителност.
@ -162,9 +161,9 @@ function drawIcon(value) {
## Преглед и самостоятелно обучение
Помислете за абониране за [бюлетин за производителност](https://perf.email/).
Обмислете да се абонирате за [бюлетин за производителност](https://perf.email/)
Разгледайте някои от начините, по които браузърите оценяват уеб производителността, като разгледате разделите за производителност в техните уеб инструменти. Намирате ли някакви съществени разлики?
Разгледайте някои от начините, по които браузърите оценяват уеб производителността, като прегледате разделите за производителност в техните уеб инструменти. Намирате ли някакви значителни разлики?
## Задание
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
এই মডিউলের শেষ দুটি পাঠে, আপনি শিখেছেন কীভাবে একটি ফর্ম তৈরি করতে হয় এবং একটি API থেকে আনা ডেটা প্রদর্শনের জন্য একটি এলাকা তৈরি করতে হয়। এটি ওয়েবে একটি স্ট্যান্ডার্ড উপস্থিতি তৈরি করার একটি খুব সাধারণ পদ্ধতি। আপনি এমনকি শিখেছেন কীভাবে অ্যাসিঙ্ক্রোনাসভাবে ডেটা ফেচ করতে হয়। আপনার ব্রাউজার এক্সটেনশন প্রায় সম্পূর্ণ।
এই মডিউলের শেষ দুটি পাঠে, আপনি একটি ফর্ম এবং API থেকে ডেটা আনতে এবং প্রদর্শনের জন্য একটি এলাকা তৈরি করতে শিখেছেন। এটি ওয়েব উপস্থিতি তৈরির একটি খুব সাধারণ পদ্ধতি। আপনি এমনকি অ্যাসিঙ্ক্রোনাসভাবে ডেটা আনতে কীভাবে পরিচালনা করতে হয় তা শিখেছেন। আপনার ব্রাউজার এক্সটেনশন প্রায় সম্পূর্ণ।
এখন কিছু ব্যাকগ্রাউন্ড টাস্ক পরিচালনা করা বাকি, যার মধ্যে রয়েছে এক্সটেনশনের আইকনের রঙ রিফ্রেশ করা। এটি একটি চমৎকার সময় ব্রাউজার কীভাবে এই ধরনের কাজ পরিচালনা করে তা নিয়ে আলোচনা করার। আসুন এই ব্রাউজার টাস্কগুলো নিয়ে চিন্তা করি আপনার ওয়েব অ্যাসেট তৈরি করার সময় এর পারফরম্যান্সের প্রেক্ষাপটে।
এখন কিছু ব্যাকগ্রাউন্ড টাস্ক পরিচালনা করা বাকি, যার মধ্যে এক্সটেনশনের আইকনের রঙ রিফ্রেশ করাও অন্তর্ভুক্ত। এটি একটি চমৎকার সময় ব্রাউজার কীভাবে এই ধরনের কাজ পরিচালনা করে তা নিয়ে আলোচনা করার। আসুন এই ব্রাউজার টাস্কগুলোকে আপনার ওয়েব অ্যাসেটের পারফরম্যান্সের প্রেক্ষাপটে চিন্তা করি যখন আপনি এগুলো তৈরি করছেন।
## ওয়েব পারফরম্যান্সের মৌলিক বিষয়
> "ওয়েবসাইট পারফরম্যান্স দুটি বিষয়ে: পেজটি কত দ্রুত লোড হয় এবং এর কোড কত দ্রুত চলে।" -- [জ্যাক গ্রোসবার্ট](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "ওয়েবসাইট পারফরম্যান্স দুটি বিষয়ে: পৃষ্ঠা কত দ্রুত লোড হয় এবং এর কোড কত দ্রুত চলে।" -- [জ্যাক গ্রোসবার্ট](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
আপনার ওয়েবসাইটগুলোকে সব ধরনের ডিভাইস, ব্যবহারকারী এবং পরিস্থিতিতে অত্যন্ত দ্রুতগতির করার বিষয়টি বিস্তৃত। এখানে কিছু পয়েন্ট দেওয়া হলো যা আপনাকে একটি স্ট্যান্ডার্ড ওয়েব প্রকল্প বা ব্রাউজার এক্সটেনশন তৈরি করার সময় মনে রাখতে হবে।
আপনার ওয়েবসাইটকে সব ধরনের ডিভাইসে, সব ধরনের ব্যবহারকারীর জন্য, সব ধরনের পরিস্থিতিতে অত্যন্ত দ্রুত করার বিষয়ে আলোচনা করা একটি বিশাল বিষয়। এখানে কিছু বিষয় মনে রাখার মতো যখন আপনি একটি সাধারণ ওয়েব প্রকল্প বা একটি ব্রাউজার এক্সটেনশন তৈরি করছেন।
আপনার সাইটটি দক্ষতার সাথে চলছে তা নিশ্চিত করার প্রথম ধাপ হলো এর পারফরম্যান্স সম্পর্কে ডেটা সংগ্রহ করা। এটি করার প্রথম জায়গা হলো আপনার ওয়েব ব্রাউজারের ডেভেলপার টুলস। Edge-এ, আপনি "Settings and more" বোতাম (ব্রাউজারের উপরের ডানদিকে তিনটি ডট আইকন) নির্বাচন করতে পারেন, তারপর More Tools > Developer Tools-এ যান এবং Performance ট্যাবটি খুলুন। আপনি Windows-এ `Ctrl` + `Shift` + `I` বা Mac-এ `Option` + `Command` + `I` কিবোর্ড শর্টকাট ব্যবহার করেও ডেভেলপার টুলস খুলতে পারেন।
আপনার সাইটটি দক্ষতার সাথে চলছে কিনা তা নিশ্চিত করার প্রথম কাজ হলো এর পারফরম্যান্স সম্পর্কে ডেটা সংগ্রহ করা। এর প্রথম জায়গা হলো আপনার ওয়েব ব্রাউজারের ডেভেলপার টুলস। Edge-এ, আপনি "Settings and more" বোতাম (ব্রাউজারের উপরের ডানদিকে তিনটি ডট আইকন) নির্বাচন করে More Tools > Developer Tools-এ যেতে পারেন এবং Performance ট্যাব খুলতে পারেন। আপনি Windows-এ `Ctrl` + `Shift` + `I` বা Mac-এ `Option` + `Command` + `I` কীবোর্ড শর্টকাট ব্যবহার করেও ডেভেলপার টুলস খুলতে পারেন।
Performance ট্যাবে একটি প্রোফাইলিং টুল রয়েছে। একটি ওয়েবসাইট খুলুন (উদাহরণস্বরূপ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) এবং 'Record' বোতামে ক্লিক করুন, তারপর সাইটটি রিফ্রেশ করুন। যেকোনো সময় রেকর্ডিং বন্ধ করুন, এবং আপনি দেখতে পাবেন সাইটটি 'স্ক্রিপ্ট', 'রেন্ডার', এবং 'পেইন্ট' করার জন্য যে রুটিনগুলো তৈরি হয়েছে:
Performance ট্যাবে একটি প্রোফাইলিং টুল রয়েছে। একটি ওয়েবসাইট খুলুন (উদাহরণস্বরূপ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) এবং 'Record' বোতামে ক্লিক করুন, তারপর সাইটটি রিফ্রেশ করুন। যেকোনো সময় রেকর্ডিং বন্ধ করুন, এবং আপনি দেখতে পাবেন যে সাইটটি 'script', 'render', এবং 'paint' করার জন্য কী কী রুটিন তৈরি হয়েছে:
✅ Edge-এর Performance প্যানেল সম্পর্কে আরও জানতে [Microsoft ডকুমেন্টেশন](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) দেখুন।
✅ [Microsoft ডকুমেন্টেশন](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) দেখুন Edge-এর Performance প্যানেল সম্পর্কে
✅ আপনার প্রোফাইলারটি চিনে নিন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বোতলনেক আছে কিনা। সবচেয়ে ধীরগতির লোডিং অ্যাসেট কোনটি? সবচেয়ে দ্রুতগতির কোনটি?
✅ আপনার প্রোফাইলার সম্পর্কে জানুন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বাধা আছে কিনা। সবচেয়ে ধীর লোডিং অ্যাসেট কোনটি? সবচেয়ে দ্রুত কোনটি?
## প্রোফাইলিং চেক
সাধারণভাবে, কিছু "সমস্যাজনক এলাকা" রয়েছে যা প্রতিটি ওয়েব ডেভেলপারকে একটি সাইট তৈরি করার সময় লক্ষ্য রাখা উচিত, যাতে প্রোডাকশনে ডিপ্লয় করার সময় কোনো অপ্রত্যাশিত সমস্যা না হয়।
সাধারণভাবে, কিছু "সমস্যার ক্ষেত্র" রয়েছে যা প্রতিটি ওয়েব ডেভেলপারকে একটি সাইট তৈরি করার সময় নজর রাখা উচিত যাতে প্রোডাকশনে ডিপ্লয় করার সময় কোনো অপ্রত্যাশিত সমস্যা না হয়।
**অ্যাসেট সাইজ**: গত কয়েক বছরে ওয়েব 'ভারী' হয়ে উঠেছে এবং এর ফলে ধীরগতির হয়েছে। এর একটি অংশ চিত্র ব্যবহারের সাথে সম্পর্কিত।
**অ্যাসেট সাইজ**: গত কয়েক বছরে ওয়েব 'ভারী' হয়ে উঠেছে এবং তাই ধীর। এই ওজনের কিছু অংশ ইমেজ ব্যবহারের সাথে সম্পর্কিত।
✅ পেজ ওজন এবং আরও অনেক কিছুর ঐতিহাসিক দৃষ্টিভঙ্গির জন্য [ইন্টারনেট আর্কাইভ](https://httparchive.org/reports/page-weight) দেখুন।
✅ [ইন্টারনেট আর্কাইভ](https://httparchive.org/reports/page-weight) দেখুন পৃষ্ঠার ওজনের ঐতিহাসিক দৃশ্য এবং আরও অনেক কিছু।
একটি ভালো অভ্যাস হলো নিশ্চিত করা যে আপনার চিত্রগুলো অপ্টিমাইজ করা হয়েছে এবং আপনার ব্যবহারকারীদের জন্য সঠিক সাইজ এবং রেজোলিউশনে সরবরাহ করা হয়েছে।
একটি ভালো অভ্যাস হলো নিশ্চিত করা যে আপনার ইমেজগুলো অপ্টিমাইজ করা হয়েছে এবং আপনার ব্যবহারকারীদের জন্য সঠিক সাইজ এবং রেজোলিউশনে সরবরাহ করা হয়েছে।
**DOM ট্রাভার্সাল**: ব্রাউজারকে আপনার লেখা কোডের উপর ভিত্তি করে তার ডকুমেন্ট অবজেক্ট মডেল তৈরি করতে হয়, তাই ভালো পেজ পারফরম্যান্সের স্বার্থে আপনার ট্যাগগুলোকে ন্যূনতম রাখা উচিত, শুধুমাত্র পেজে যা প্রয়োজন তা ব্যবহার এবং স্টাইল করা উচিত। এই পয়েন্টে, পেজের সাথে সম্পর্কিত অতিরিক্ত CSS অপ্টিমাইজ করা যেতে পারে; উদাহরণস্বরূপ, শুধুমাত্র একটি পেজে ব্যবহৃত স্টাইলগুলো প্রধান স্টাইল শীটে অন্তর্ভুক্ত করার প্রয়োজন নেই।
**DOM ট্রাভার্সাল**: ব্রাউজারকে তার ডকুমেন্ট অবজেক্ট মডেল তৈরি করতে হয় আপনার লেখা কোডের উপর ভিত্তি করে, তাই ভালো পৃষ্ঠার পারফরম্যান্সের স্বার্থে আপনার ট্যাগগুলোকে ন্যূনতম রাখা উচিত, শুধুমাত্র পৃষ্ঠার প্রয়োজনীয় অংশ ব্যবহার এবং স্টাইল করা উচিত। এই বিষয়ে, পৃষ্ঠার সাথে সম্পর্কিত অতিরিক্ত CSS অপ্টিমাইজ করা যেতে পারে; এমন স্টাইলগুলো যা শুধুমাত্র একটি পৃষ্ঠায় ব্যবহার করা প্রয়োজন সেগুলো প্রধান স্টাইল শিটে অন্তর্ভুক্ত করার প্রয়োজন নেই।
**জাভাস্ক্রিপ্ট**: প্রতিটি জাভাস্ক্রিপ্ট ডেভেলপারকে 'রেন্ডার-ব্লকিং' স্ক্রিপ্টগুলোর দিকে নজর রাখা উচিত, যেগুলো DOM ট্রাভার্স এবং ব্রাউজারে পেইন্ট করার আগে লোড করতে হয়। আপনার ইনলাইন স্ক্রিপ্টগুলোর সাথে `defer` ব্যবহার করার কথা বিবেচনা করুন (যেমনটি Terrarium মডিউলে করা হয়েছে)।
**জাভাস্ক্রিপ্ট**: প্রতিটি জাভাস্ক্রিপ্ট ডেভেলপারকে 'রেন্ডার-ব্লকিং' স্ক্রিপ্টগুলোর জন্য নজর রাখা উচিত যা DOM ট্রাভার্স এবং ব্রাউজারে পেইন্ট করার আগে লোড করতে হবে। আপনার ইনলাইন স্ক্রিপ্টগুলোর সাথে `defer` ব্যবহার করার কথা বিবেচনা করুন (যেমনটি Terrarium মডিউলে করা হয়েছে)।
✅ সাইট পারফরম্যান্স নির্ধারণের জন্য সাধারণ চেক সম্পর্কে আরও জানতে [সাইট স্পিড টেস্ট ওয়েবসাইট](https://www.webpagetest.org/) এ কিছু সাইট চেষ্টা করুন।
✅ [সাইট স্পিড টেস্ট ওয়েবসাইট](https://www.webpagetest.org/) এ কিছু সাইট চেষ্টা করুন এবং সাইট পারফরম্যান্স নির্ধারণের জন্য সাধারণ চেকগুলো সম্পর্কে জানুন।
এখন যেহেতু আপনি জানেন ব্রাউজার আপনার পাঠানো অ্যাসেটগুলো কীভাবে রেন্ডার করে, আসুন আপনার এক্সটেনশন সম্পূর্ণ করতে শেষ কয়েকটি জিনিস দেখি:
এখন আপনি জানেন ব্রাউজার আপনার পাঠানো অ্যাসেটগুলো কীভাবে রেন্ডার করে, আসুন আপনার এক্সটেনশন সম্পূর্ণ করতে প্রয়োজনীয় শেষ কয়েকটি বিষয় দেখি:
### রঙ গণনা করার জন্য একটি ফাংশন তৈরি করুন
`/src/index.js`-এ কাজ করে, DOM-এ অ্যাক্সেস পাওয়ার জন্য সেট করা `const` ভেরিয়েবলগুলোর সিরিজের পরে `calculateColor()` নামে একটি ফাংশন যোগ করুন:
`/src/index.js`-এ কাজ করে, `calculateColor()` নামে একটি ফাংশন যোগ করুন যা আপনি DOM-এ অ্যাক্সেস পাওয়ার জন্য সেট করা `const` ভেরিয়েবলগুলোর সিরিজের পরে লিখবেন:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
এখানে কী হচ্ছে? আপনি একটি মান (কার্বন ইন্টেনসিটি) API কল থেকে পাস করছেন যা আপনি আগের পাঠে সম্পন্ন করেছেন, এবং তারপর আপনি এটি রঙের অ্যারের সূচকের সাথে কতটা কাছাকাছি তা গণনা করছেন। তারপর আপনি সেই সবচেয়ে কাছের রঙের মানটি chrome runtime-এ পাঠাচ্ছেন।
এখানে কী হচ্ছে? আপনি একটি মান (কার্বন ইন্টেনসিটি) API কল থেকে পাস করেন যা আপনি শেষ পাঠে সম্পন্ন করেছেন, এবং তারপর আপনি এর মান কতটা কাছাকাছি তা রঙের অ্যারের সূচকের সাথে গণনা করেন। তারপর আপনি সেই সবচেয়ে কাছাকাছি রঙের মানটি chrome runtime-এ পাঠান।
chrome.runtime-এ [একটি API](https://developer.chrome.com/extensions/runtime) রয়েছে যা সব ধরনের ব্যাকগ্রাউন্ড টাস্ক পরিচালনা করে, এবং আপনার এক্সটেনশন এটি ব্যবহার করছে:
chrome.runtime-এর [একটি API](https://developer.chrome.com/extensions/runtime) রয়েছে যা সব ধরনের ব্যাকগ্রাউন্ড টাস্ক পরিচালনা করে, এবং আপনার এক্সটেনশন এটি ব্যবহার করছে:
> "chrome.runtime API ব্যবহার করে ব্যাকগ্রাউন্ড পেজ পুনরুদ্ধার করুন, ম্যানিফেস্ট সম্পর্কে বিস্তারিত তথ্য ফেরত দিন, এবং অ্যাপ বা এক্সটেনশনের লাইফসাইকেলের ইভেন্টগুলোর জন্য শোনার এবং সাড়া দেওয়ার জন্য ব্যবহার করুন। আপনি এই API ব্যবহার করে URL-এর আপেক্ষিক পথকে সম্পূর্ণ-যোগ্য URL-এ রূপান্তর করতে পারেন।"
> "chrome.runtime API ব্যবহার করে ব্যাকগ্রাউন্ড পৃষ্ঠা পুনরুদ্ধার করুন, ম্যানিফেস্ট সম্পর্কে বিস্তারিত ফেরত দিন এবং অ্যাপ বা এক্সটেনশন লাইফসাইকেলের ইভেন্টগুলোর জন্য শুনুন এবং সাড়া দিন। আপনি এই API ব্যবহার করে URL-এর আপেক্ষিক পথকে সম্পূর্ণযোগ্য URL-এ রূপান্তর করতে পারেন।"
✅ যদি আপনি Edge-এর জন্য এই ব্রাউজার এক্সটেনশনটি তৈরি করছেন, তবে এটি জেনে অবাক হতে পারেন যে আপনি একটি chrome API ব্যবহার করছেন। নতুন Edge ব্রাউজার সংস্করণগুলো Chromium ব্রাউজার ইঞ্জিনে চলে, তাই আপনি এই টুলগুলো ব্যবহার করতে পারেন।
✅ যদি আপনি Edge-এর জন্য এই ব্রাউজার এক্সটেনশনটি তৈরি করছেন, তাহলে এটি আপনাকে অবাক করতে পারে যে আপনি একটি chrome API ব্যবহার করছেন। নতুন Edge ব্রাউজার সংস্করণগুলো Chromium ব্রাউজার ইঞ্জিনে চলে, তাই আপনি এই টুলগুলো ব্যবহার করতে পারেন।
> নোট, যদি আপনি একটি ব্রাউজার এক্সটেনশন প্রোফাইল করতে চান, এক্সটেনশনের ভিতর থেকে ডেভেলপার টুলস চালু করুন, কারণ এটি নিজস্ব একটি আলাদা ব্রাউজার ইনস্ট্যান্স।
> নোট, যদি আপনি একটি ব্রাউজার এক্সটেনশন প্রোফাইল করতে চান, এক্সটেনশন নিজেই থেকে ডেভেলপার টুলস চালু করুন, কারণ এটি নিজস্ব আলাদা ব্রাউজার ইনস্ট্যান্স।
### একটি ডিফল্ট আইকন রঙ সেট করুন
এখন, `init()` ফাংশনে, chrome-এর `updateIcon` অ্যাকশন কল করে আইকনটিকে শুরুতে একটি সাধারণ সবুজ রঙে সেট করুন:
এখন, `init()` ফাংশনে, আইকনটি শুরুতে সাধারণ সবুজ রঙে সেট করুন আবার chrome-এর `updateIcon` অ্যাকশন কল করে:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### ফাংশনটি কল করুন, কলটি সম্পাদন করুন
পরবর্তী ধাপে, আপনি যে ফাংশনটি তৈরি করেছেন সেটি C02Signal API থেকে ফেরত আসা প্রমিসে যোগ করুন:
পরবর্তী, আপনি যে ফাংশনটি তৈরি করেছেন সেটি C02Signal API থেকে ফেরত পাওয়া promise-এ যোগ করে কল করুন:
```JavaScript
//let CO2...
calculateColor(CO2);
```
এবং শেষ পর্যন্ত, `/dist/background.js`-এ এই ব্যাকগ্রাউন্ড অ্যাকশন কলগুলোর জন্য একটি লিসেনার যোগ করুন:
এবং শেষ পর্যন্ত, `/dist/background.js`-এ এই ব্যাকগ্রাউন্ড অ্যাকশন কলগুলোর জন্য লিসনার যোগ করুন:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,29 +141,29 @@ function drawIcon(value) {
}
```
এই কোডে, আপনি ব্যাকএন্ড টাস্ক ম্যানেজারে আসা যেকোনো মেসেজের জন্য একটি লিসেনার যোগ করছেন। যদি এটি 'updateIcon' নামে ডাকা হয়, তবে পরবর্তী কোডটি Canvas API ব্যবহার করে সঠিক রঙের একটি আইকন আঁকতে চালানো হয়।
এই কোডে, আপনি ব্যাকএন্ড টাস্ক ম্যানেজারে আসা কোনো মেসেজের জন্য একটি লিসনার যোগ করছেন। যদি এটি 'updateIcon' নামে ডাকা হয়, তাহলে পরবর্তী কোডটি Canvas API ব্যবহার করে সঠিক রঙের একটি আইকন আঁকতে চালানো হয়।
✅ আপনি Canvas API সম্পর্কে আরও শিখবেন [Space Game পাঠে](../../6-space-game/2-drawing-to-canvas/README.md)।
✅ আপনি Canvas API সম্পর্কে আরও জানবেন [Space Game পাঠে](../../6-space-game/2-drawing-to-canvas/README.md)।
এখন, আপনার এক্সটেনশনটি পুনরায় তৈরি করুন (`npm run build`), রিফ্রেশ করুন এবং আপনার এক্সটেনশন চালু করুন এবং রঙ পরিবর্তন দেখুন। এটি কি কোনো কাজ করার বা থালা-বাসন ধোয়ার ভালো সময়? এখন আপনি জানেন!
এখন, আপনার এক্সটেনশনটি পুনরায় তৈরি করুন (`npm run build`), রিফ্রেশ করুন এবং আপনার এক্সটেনশন চালু করুন, এবং রঙ পরিবর্তন দেখুন। এটি কি কোনো কাজ করার বা থালা-বাসন ধোয়ার ভালো সময়? এখন আপনি জানেন!
অভিনন্দন, আপনি একটি কার্যকরী ব্রাউজার এক্সটেনশন তৈরি করেছেন এবং শিখেছেন কীভাবে ব্রাউজার কাজ করে এবং কীভাবে এর পারফরম্যান্স প্রোফাইল করতে হয়।
অভিনন্দন, আপনি একটি কার্যকরী ব্রাউজার এক্সটেনশন তৈরি করেছেন এবং ব্রাউজার কীভাবে কাজ করে এবং এর পারফরম্যান্স প্রোফাইলিং সম্পর্কে আরও শিখেছেন।
---
## 🚀 চ্যালেঞ্জ
কিছু ওপেন সোর্স ওয়েবসাইট তদন্ত করুন যা অনেক দিন আগে তৈরি হয়েছিল এবং তাদের GitHub ইতিহাসের ভিত্তিতে দেখুন তারা পারফরম্যান্সের জন্য কীভাবে অপ্টিমাইজ করা হয়েছিল, যদি আদৌ করা হয়। সবচেয়ে সাধারণ সমস্যার পয়েন্ট কোনটি?
কিছু ওপেন সোর্স ওয়েবসাইট তদন্ত করুন যা অনেক আগে থেকে রয়েছে, এবং তাদের GitHub ইতিহাসের উপর ভিত্তি করে দেখুন তারা পারফরম্যান্সের জন্য কীভাবে অপ্টিমাইজ করা হয়েছে, যদি করা হয়ে থাকে। সবচেয়ে সাধারণ সমস্যার ক্ষেত্র কোনটি?
একটি [পারফরম্যান্স নিউজলেটার](https://perf.email/) সাবস্ক্রাইব করার কথা বিবেচনা করুন।
ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানার জন্য তাদের ওয়েব টুলগুলোর পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান?
ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানার জন্য তাদের ওয়েব টুলসের পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান?
## অ্যাসাইনমেন্ট
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় লেখা সংস্করণটিকেই প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই।
Nas duas últimas lições deste módulo, você aprendeu a criar um formulário e uma área de exibição para dados obtidos de uma API. Essa é uma maneira bastante comum de criar uma presença na web. Você até aprendeu a lidar com a obtenção de dados de forma assíncrona. Sua extensão para navegador está quase completa.
Nas duas últimas lições deste módulo, você aprendeu como criar um formulário e uma área de exibição para dados obtidos de uma API. É uma maneira bastante padrão de criar uma presença na web. Você até aprendeu como lidar com a obtenção de dados de forma assíncrona. Sua extensão de navegador está quase completa.
Resta gerenciar algumas tarefas em segundo plano, incluindo a atualização da cor do ícone da extensão. Este é um ótimo momento para falar sobre como o navegador gerencia esse tipo de tarefa. Vamos pensar nessas tarefas do navegador no contexto do desempenho dos seus recursos web enquanto você os desenvolve.
Resta gerenciar algumas tarefas em segundo plano, incluindo atualizar a cor do ícone da extensão. Este é um ótimo momento para falar sobre como o navegador gerencia esse tipo de tarefa. Vamos pensar nessas tarefas do navegador no contexto do desempenho dos seus ativos web enquanto você os desenvolve.
## Noções Básicas de Desempenho na Web
> "O desempenho de um site envolve duas coisas: quão rápido a página carrega e quão rápido o código nela é executado." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "O desempenho de um site se resume a duas coisas: quão rápido a página carrega e quão rápido o código nela é executado." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
O tema de como tornar seus sites extremamente rápidos em todos os tipos de dispositivos, para todos os tipos de usuários, em todas as situações, é, sem surpresa, vasto. Aqui estão alguns pontos a serem considerados ao criar um projeto web padrão ou uma extensão para navegador.
O tema de como tornar seus sites incrivelmente rápidos em todos os tipos de dispositivos, para todos os tipos de usuários, em todas as situações, é, sem surpresa, vasto. Aqui estão alguns pontos a serem lembrados enquanto você desenvolve um projeto web padrão ou uma extensão de navegador.
A primeira coisa que você precisa fazer para garantir que seu site esteja funcionando de forma eficiente é coletar dados sobre seu desempenho. O primeiro lugar para fazer isso é nas ferramentas de desenvolvedor do seu navegador. No Edge, você pode selecionar o botão "Configurações e mais" (o ícone de três pontos no canto superior direito do navegador), depois navegar até Mais Ferramentas > Ferramentas do Desenvolvedor e abrir a aba de Desempenho. Você também pode usar os atalhos de teclado `Ctrl` + `Shift` + `I` no Windows ou `Option` + `Command` + `I` no Mac para abrir as ferramentas de desenvolvedor.
A primeira coisa que você precisa fazer para garantir que seu site esteja funcionando de forma eficiente é coletar dados sobre seu desempenho. O primeiro lugar para fazer isso é nas ferramentas de desenvolvedor do seu navegador. No Edge, você pode selecionar o botão "Configurações e mais" (o ícone de três pontos no canto superior direito do navegador), navegar até Mais Ferramentas > Ferramentas de Desenvolvedor e abrir a aba de Desempenho. Você também pode usar os atalhos de teclado `Ctrl` + `Shift` + `I` no Windows ou `Option` + `Command` + `I` no Mac para abrir as ferramentas de desenvolvedor.
A aba de Desempenho contém uma ferramenta de Perfilação. Abra um site (experimente, por exemplo, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) e clique no botão 'Gravar', depois atualize o site. Pare a gravação a qualquer momento, e você poderá ver as rotinas geradas para 'script', 'renderização' e 'pintura' do site:
A aba de Desempenho contém uma ferramenta de Perfil. Abra um site (experimente, por exemplo, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) e clique no botão 'Gravar', depois atualize o site. Pare a gravação a qualquer momento, e você poderá ver as rotinas geradas para 'script', 'renderizar' e 'pintar' o site:
✅ Visite a [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sobre o painel de Desempenho no Edge.
> Dica: para obter uma leitura precisa do tempo de inicialização do seu site, limpe o cache do navegador.
Selecione elementos da linha do tempo do perfil para ampliar eventos que ocorrem enquanto sua página carrega.
Selecione elementos da linha do tempo do perfil para ampliar os eventos que ocorrem enquanto sua página carrega.
Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo:
Verifique o painel de Log de Eventos para ver se algum evento demorou mais de 15 ms:
Verifique o painel de Log de Eventos para ver se algum evento levou mais de 15 ms:
✅ Familiarize-se com seu perfilador! Abra as ferramentas de desenvolvedor neste site e veja se há gargalos. Qual é o recurso que carrega mais lentamente? E o mais rápido?
✅ Conheça seu profiler! Abra as ferramentas de desenvolvedor neste site e veja se há algum gargalo. Qual é o ativo que carrega mais lentamente? E o mais rápido?
## Verificações de Perfilação
## Verificações de Perfil
De modo geral, existem algumas "áreas problemáticas" que todo desenvolvedor web deve observar ao criar um site para evitar surpresas desagradáveis na hora de implantar em produção.
Em geral, há algumas "áreas problemáticas" que todo desenvolvedor web deve observar ao construir um site para evitar surpresas desagradáveis na hora de implantar em produção.
**Tamanhos de recursos**: A web ficou mais "pesada" e, portanto, mais lenta nos últimos anos. Parte desse peso está relacionada ao uso de imagens.
**Tamanhos de ativos**: A web ficou mais 'pesada' e, portanto, mais lenta nos últimos anos. Parte desse peso tem a ver com o uso de imagens.
✅ Consulte o [Internet Archive](https://httparchive.org/reports/page-weight) para uma visão histórica do peso das páginas e mais.
✅ Explore o [Internet Archive](https://httparchive.org/reports/page-weight) para uma visão histórica do peso das páginas e mais.
Uma boa prática é garantir que suas imagens estejam otimizadas e sejam entregues no tamanho e na resolução corretos para seus usuários.
Uma boa prática é garantir que suas imagens sejam otimizadas e entregues no tamanho e resolução certos para seus usuários.
**Percursos no DOM**: O navegador precisa construir seu Modelo de Objeto de Documento (DOM) com base no código que você escreve, então é do interesse de um bom desempenho da página manter suas tags mínimas, usando e estilizando apenas o que a página precisa. Nesse sentido, CSS em excesso associado a uma página pode ser otimizado; estilos que precisam ser usados apenas em uma página não precisam ser incluídos na folha de estilo principal, por exemplo.
**Percursos no DOM**: O navegador precisa construir seu Modelo de Objeto de Documento (DOM) com base no código que você escreve, então é do interesse de um bom desempenho da página manter suas tags mínimas, usando e estilizando apenas o que a página precisa. Nesse sentido, CSS excessivo associado a uma página pode ser otimizado; estilos que precisam ser usados apenas em uma página não precisam ser incluídos na folha de estilo principal, por exemplo.
**JavaScript**: Todo desenvolvedor de JavaScript deve observar scripts que bloqueiam a renderização e que precisam ser carregados antes que o restante do DOM possa ser percorrido e pintado no navegador. Considere usar `defer` com seus scripts inline (como é feito no módulo Terrarium).
✅ Experimente alguns sites em um [site de teste de velocidade](https://www.webpagetest.org/) para aprender mais sobre as verificações comuns feitas para determinar o desempenho do site.
Agora que você tem uma ideia de como o navegador renderiza os recursos que você envia para ele, vamos ver as últimas coisas que você precisa fazer para completar sua extensão:
Agora que você tem uma ideia de como o navegador renderiza os ativos que você envia para ele, vamos olhar para as últimas coisas que você precisa fazer para completar sua extensão:
### Criar uma função para calcular a cor
Trabalhando em `/src/index.js`, adicione uma função chamada `calculateColor()` após a série de variáveis `const` que você definiu para acessar o DOM:
Trabalhando em `/src/index.js`, adicione uma função chamada `calculateColor()` após a série de variáveis `const` que você configurou para acessar o DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
O que está acontecendo aqui? Você passa um valor (a intensidade de carbono) da chamada de API que você completou na última lição e, em seguida, calcula quão próximo esse valor está do índice apresentado no array de cores. Depois, você envia esse valor de cor mais próximo para o runtime do Chrome.
O que está acontecendo aqui? Você passa um valor (a intensidade de carbono) da chamada de API que você completou na última lição e, em seguida, calcula quão próximo seu valor está do índice apresentado no array de cores. Depois, você envia esse valor de cor mais próximo para o runtime do Chrome.
O chrome.runtime possui [uma API](https://developer.chrome.com/extensions/runtime) que lida com todos os tipos de tarefas em segundo plano, e sua extensão está aproveitando isso:
O chrome.runtime tem [uma API](https://developer.chrome.com/extensions/runtime) que lida com todos os tipos de tarefas em segundo plano, e sua extensão está aproveitando isso:
> "Use a API chrome.runtime para recuperar a página de segundo plano, retornar detalhes sobre o manifesto e ouvir e responder a eventos no ciclo de vida do aplicativo ou extensão. Você também pode usar essa API para converter o caminho relativo de URLs em URLs totalmente qualificados."
✅ Se você está desenvolvendo esta extensão para o Edge, pode se surpreender ao descobrir que está usando uma API do Chrome. As versões mais recentes do navegador Edge são baseadas no mecanismo do navegador Chromium, então você pode aproveitar essas ferramentas.
✅ Se você está desenvolvendo esta extensão de navegador para o Edge, pode se surpreender ao saber que está usando uma API do Chrome. As versões mais recentes do navegador Edge funcionam no mecanismo de navegador Chromium, então você pode aproveitar essas ferramentas.
> Nota: se você quiser perfilar uma extensão para navegador, abra as ferramentas de desenvolvedor dentro da própria extensão, pois ela é uma instância separada do navegador.
> Nota: se você quiser fazer o perfil de uma extensão de navegador, abra as ferramentas de desenvolvedor dentro da própria extensão, pois ela é uma instância separada do navegador.
### Definir uma cor padrão para o ícone
Agora, na função `init()`, defina o ícone como um verde genérico para começar, chamando novamente a ação `updateIcon` do Chrome:
Agora, na função `init()`, defina o ícone para ser um verde genérico inicialmente, chamando novamente a ação `updateIcon` do Chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -125,12 +125,12 @@ E, finalmente, em `/dist/background.js`, adicione o listener para essas chamadas
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -146,25 +146,25 @@ Neste código, você está adicionando um listener para quaisquer mensagens que
✅ Você aprenderá mais sobre a API Canvas nas [lições do Jogo Espacial](../../6-space-game/2-drawing-to-canvas/README.md).
Agora, reconstrua sua extensão (`npm run build`), atualize e inicie sua extensão, e observe a mudança de cor. É um bom momento para fazer uma pausa ou lavar a louça? Agora você sabe!
Agora, reconstrua sua extensão (`npm run build`), atualize e inicie sua extensão, e observe a mudança de cor. É um bom momento para fazer uma tarefa ou lavar a louça? Agora você sabe!
Parabéns, você criou uma extensão útil para navegador e aprendeu mais sobre como o navegador funciona e como perfilar seu desempenho.
Parabéns, você construiu uma extensão de navegador útil e aprendeu mais sobre como o navegador funciona e como fazer o perfil de seu desempenho.
---
## 🚀 Desafio
Investigue alguns sites de código aberto que existem há muito tempo e, com base no histórico do GitHub, veja se consegue determinar como eles foram otimizados ao longo dos anos para desempenho, se é que foram. Qual é o ponto problemático mais comum?
Investigue alguns sites de código aberto que existem há muito tempo e, com base no histórico do GitHub deles, veja se você consegue determinar como eles foram otimizados ao longo dos anos para desempenho, se é que foram. Qual é o ponto problemático mais comum?
Considere se inscrever em um [boletim informativo sobre desempenho](https://perf.email/).
Considere se inscrever em um [newsletter de desempenho](https://perf.email/)
Investigue algumas das maneiras como os navegadores avaliam o desempenho da web, explorando as abas de desempenho em suas ferramentas de desenvolvedor. Você encontrou alguma diferença significativa?
Investigue algumas das maneiras como os navegadores avaliam o desempenho da web, olhando as abas de desempenho em suas ferramentas web. Você encontra alguma diferença significativa?
## Tarefa
@ -173,4 +173,4 @@ Investigue algumas das maneiras como os navegadores avaliam o desempenho da web,
---
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
# Projekt rozšíření prohlížeče, část 3: Naučte se o úlohách na pozadí a výkonu
## Kvíz před lekcí
## Kvíz před přednáškou
[Kvíz před lekcí](https://ff-quizzes.netlify.app/web/quiz/27)
[Kvíz před přednáškou](https://ff-quizzes.netlify.app/web/quiz/27)
### Úvod
V posledních dvou lekcích tohoto modulu jste se naučili, jak vytvořit formulář a zobrazovací oblast pro data získaná z API. To je velmi standardní způsob, jak vytvořit webovou prezentaci. Dokonce jste se naučili, jak asynchronně získávat data. Vaše rozšíření prohlížeče je téměř hotové.
V posledních dvou lekcích tohoto modulu jste se naučili, jak vytvořit formulář a zobrazovací oblast pro data získaná z API. Je to velmi standardní způsob, jak vytvořit webovou prezentaci. Dokonce jste se naučili, jak asynchronně získávat data. Vaše rozšíření prohlížeče je téměř hotové.
Zbývá spravovat některé úlohy na pozadí, včetně aktualizace barvy ikony rozšíření, takže je to skvělý čas probrat, jak prohlížeč tyto úlohy spravuje. Pojďme se na tyto úlohy podívat v kontextu výkonu vašich webových prostředků během jejich vývoje.
Zbývá spravovat některé úlohy na pozadí, včetně aktualizace barvy ikony rozšíření, takže je ideální čas promluvit si o tom, jak prohlížeč spravuje tento typ úloh. Pojďme se na tyto úlohy prohlížeče podívat v kontextu výkonu vašich webových prostředků při jejich vytváření.
## Základy webového výkonu
## Základy výkonu webu
> "Výkon webových stránek je o dvou věcech: jak rychle se stránka načítá a jak rychle na ní běží kód." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Téma, jak udělat vaše webové stránky extrémně rychlé na všech typech zařízení, pro všechny typy uživatelů a ve všech situacích, je pochopitelně rozsáhlé. Zde je několik bodů, které je třeba mít na paměti při vytváření standardního webového projektu nebo rozšíření prohlížeče.
Téma, jak udělat vaše webové stránky extrémně rychlé na všech typech zařízení, pro všechny typy uživatelů a v různých situacích, je pochopitelně rozsáhlé. Zde je několik bodů, které je třeba mít na paměti při vytváření standardního webového projektu nebo rozšíření prohlížeče.
První věc, kterou musíte udělat, abyste zajistili efektivní běh vašeho webu, je shromáždit data o jeho výkonu. Prvním místem, kde to můžete udělat, jsou vývojářské nástroje vašeho webového prohlížeče. V Edge můžete vybrat tlačítko "Nastavení a další" (ikona tří teček v pravém horním rohu prohlížeče), poté přejít na Další nástroje > Vývojářské nástroje a otevřít kartu Výkon. Klávesové zkratky `Ctrl` + `Shift` + `I` na Windows nebo `Option` + `Command` + `I` na Macu také otevřou vývojářské nástroje.
Karta Výkon obsahuje nástroj pro profilování. Otevřete webovou stránku (zkuste například [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) a klikněte na tlačítko 'Záznam', poté stránku obnovte. Záznam můžete kdykoli zastavit a zobrazí se vám rutiny generované pro 'skriptování', 'vykreslování' a 'malování' stránky:
Karta Výkon obsahuje nástroj Profilování. Otevřete webovou stránku (zkuste například [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) a klikněte na tlačítko 'Záznam', poté stránku obnovte. Záznam můžete kdykoli zastavit a budete moci vidět rutiny, které byly vytvořeny pro 'skriptování', 'renderování' a 'malování' stránky:
✅ Navštivte [dokumentaci Microsoftu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o panelu Výkon v Edge.
✅ Navštivte [Microsoft Dokumentaci](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o panelu Výkon v Edge.
> Tip: Abyste získali přesné údaje o době spuštění vašeho webu, vymažte mezipaměť prohlížeče.
> Tip: abyste získali přesné údaje o době spuštění vašeho webu, vymažte mezipaměť prohlížeče.
Vyberte prvky časové osy profilu, abyste přiblížili události, které se odehrávají během načítání stránky.
Vyberte prvky časové osy profilu, abyste přiblížili události, které se odehrávají během načítání vaší stránky.
Získejte snímek výkonu vaší stránky výběrem části časové osy profilu a pohledem na souhrnný panel:
Získejte snímek výkonu vaší stránky výběrem části časové osy profilu a pohledem na panel souhrnu:
✅ Seznamte se s vaším profilerem! Otevřete vývojářské nástroje na této stránce a zjistěte, zda existují nějaká úzká místa. Který prostředek se načítá nejpomaleji? Který nejrychleji?
✅ Seznamte se s profilerem! Otevřete vývojářské nástroje na tomto webu a zjistěte, zda existují nějaké úzké hrdla. Který prostředek se načítá nejpomaleji? Nejrychleji?
## Kontroly profilování
Obecně existují některé "problémové oblasti", na které by si měl každý webový vývojář dávat pozor při vytváření webu, aby se vyhnul nepříjemným překvapením při nasazení do produkce.
Obecně existují některé "problémové oblasti", na které by měl každý webový vývojář dávat pozor při vytváření webu, aby se vyhnul nepříjemným překvapením při nasazení do produkce.
**Velikosti prostředků**: Web se v posledních letech stal "těžším" a tím pádem pomalejším. Část této zátěže souvisí s používáním obrázků.
**Velikosti prostředků**: Web se v posledních letech stal "těžším" a tím pádem pomalejším. Část této váhy souvisí s používáním obrázků.
✅ Prohlédněte si [Internetový archiv](https://httparchive.org/reports/page-weight) pro historický pohled na váhu stránek a další informace.
Dobrou praxí je zajistit, aby vaše obrázky byly optimalizované a dodávané ve správné velikosti a rozlišení pro vaše uživatele.
Dobrou praxí je zajistit, aby vaše obrázky byly optimalizované a doručované ve správné velikosti a rozlišení pro vaše uživatele.
**Procházení DOM**: Prohlížeč musí vytvořit svůj model objektů dokumentu (DOM) na základě kódu, který napíšete, takže je v zájmu dobrého výkonu stránky udržovat značky minimální a používat a stylovat pouze to, co stránka potřebuje. Například přebytečné CSS spojené se stránkou by mohlo být optimalizováno; styly, které je třeba použít pouze na jedné stránce, nemusí být zahrnuty v hlavním stylovém souboru.
**Procházení DOM**: Prohlížeč musí vytvořit svůj Document Object Model na základě kódu, který napíšete, takže je v zájmu dobrého výkonu stránky udržovat značky minimální, používat a stylovat pouze to, co stránka potřebuje. K tomuto bodu by mohl být optimalizován nadbytečný CSS spojený se stránkou; styly, které je třeba použít pouze na jedné stránce, nemusí být zahrnuty v hlavním stylovém souboru.
**JavaScript**: Každý vývojář JavaScriptu by měl dávat pozor na skripty blokující vykreslování, které musí být načteny před tím, než může být zbytek DOM procházen a vykreslen do prohlížeče. Zvažte použití `defer` u vašich inline skriptů (jak je to provedeno v modulu Terrarium).
**JavaScript**: Každý vývojář JavaScriptu by měl dávat pozor na 'skripty blokující renderování', které musí být načteny před tím, než může být zbytek DOM procházen a vykreslen do prohlížeče. Zvažte použití `defer` u vašich inline skriptů (jak je to provedeno v modulu Terrarium).
✅ Vyzkoušejte některé stránky na [webu pro testování rychlosti stránek](https://www.webpagetest.org/), abyste se dozvěděli více o běžných kontrolách, které se provádějí pro určení výkonu stránek.
✅ Vyzkoušejte některé weby na [webu pro testování rychlosti stránek](https://www.webpagetest.org/), abyste se dozvěděli více o běžných kontrolách, které se provádějí k určení výkonu webu.
Nyní, když máte představu o tom, jak prohlížeč vykresluje prostředky, které mu posíláte, podívejme se na poslední věci, které musíte udělat, abyste dokončili své rozšíření:
### Vytvořte funkci pro výpočet barvy
V souboru `/src/index.js` přidejte funkci nazvanou `calculateColor()` za sérii proměnných `const`, které jste nastavili pro přístup k DOM:
Pracujte v `/src/index.js` a přidejte funkci nazvanou `calculateColor()` za sérii proměnných `const`, které jste nastavili pro přístup k DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Co se zde děje? Předáte hodnotu (intenzitu uhlíku) z API volání, které jste dokončili v poslední lekci, a poté vypočítáte, jak blízko je její hodnota indexu uvedenému v poli barev. Poté pošlete tuto nejbližší hodnotu barvy do runtime prostředí Chrome.
Co se zde děje? Předáte hodnotu (intenzitu uhlíku) z API volání, které jste dokončili v poslední lekci, a poté vypočítáte, jak blízko je její hodnota indexu uvedenému v poli barev. Poté pošlete tuto nejbližší hodnotu barvy do chrome runtime.
Chrome.runtime má [API](https://developer.chrome.com/extensions/runtime), které zpracovává všechny druhy úloh na pozadí, a vaše rozšíření toho využívá:
> "Použijte chrome.runtime API pro získání stránky na pozadí, vrácení podrobností o manifestu a naslouchání a reagování na události v životním cyklu aplikace nebo rozšíření. Toto API můžete také použít pro převod relativní cesty URL na plně kvalifikované URL."
> "Použijte chrome.runtime API k získání stránky na pozadí, vrácení podrobností o manifestu a poslouchání a reagování na události v životním cyklu aplikace nebo rozšíření. Toto API můžete také použít k převodu relativní cesty URL na plně kvalifikované URL."
✅ Pokud vyvíjíte toto rozšíření pro Edge, může vás překvapit, že používáte API Chrome. Novější verze prohlížeče Edge běží na jádře prohlížeče Chromium, takže můžete tyto nástroje využít.
✅ Pokud vyvíjíte toto rozšíření pro Edge, může vás překvapit, že používáte chrome API. Novější verze prohlížeče Edge běží na enginu prohlížeče Chromium, takže můžete využívat tyto nástroje.
> Poznámka: Pokud chcete profilovat rozšíření prohlížeče, spusťte vývojářské nástroje přímo v rámci rozšíření, protože je to samostatná instance prohlížeče.
> Poznámka: pokud chcete profilovat rozšíření prohlížeče, spusťte vývojářské nástroje přímo z rozšíření, protože je to samostatná instance prohlížeče.
### Nastavte výchozí barvu ikony
Nyní v rámci funkce `init()` nastavte ikonu na obecnou zelenou barvu tím, že znovu zavoláte akci `updateIcon` v Chrome:
Nyní v funkci `init()` nastavte ikonu na obecnou zelenou barvu na začátku tím, že opět zavoláte akci `updateIcon` v chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Zavolejte funkci, proveďte volání
Dále zavolejte funkci, kterou jste právě vytvořili, přidáním do slibu vráceného API C02Signal:
@ -120,17 +119,17 @@ Dále zavolejte funkci, kterou jste právě vytvořili, přidáním do slibu vr
calculateColor(CO2);
```
A nakonec v souboru `/dist/background.js` přidejte posluchač pro tyto volání úloh na pozadí:
A nakonec v `/dist/background.js` přidejte posluchač pro tyto volání úloh na pozadí:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,23 +141,23 @@ function drawIcon(value) {
}
```
V tomto kódu přidáváte posluchač pro jakékoli zprávy přicházející do správce úloh na pozadí. Pokud je volání označeno jako 'updateIcon', spustí se následující kód pro vykreslení ikony správné barvy pomocí Canvas API.
V tomto kódu přidáváte posluchač pro jakékoli zprávy přicházející do správce úloh na pozadí. Pokud je nazván 'updateIcon', pak se spustí následující kód, který nakreslí ikonu správné barvy pomocí Canvas API.
✅ O Canvas API se dozvíte více v [lekcích o vesmírné hře](../../6-space-game/2-drawing-to-canvas/README.md).
Nyní znovu sestavte své rozšíření (`npm run build`), obnovte a spusťte své rozšíření a sledujte, jak se mění barva. Je čas na pochůzky nebo umytí nádobí? Teď už víte!
Nyní znovu sestavte své rozšíření (`npm run build`), obnovte a spusťte své rozšíření a sledujte změnu barvy. Je vhodný čas na vyřízení pochůzek nebo umytí nádobí? Teď už víte!
Gratulujeme, vytvořili jste užitečné rozšíření prohlížeče a dozvěděli jste se více o tom, jak prohlížeč funguje a jak profilovat jeho výkon.
Gratulujeme, vytvořili jste užitečné rozšíření prohlížeče a dozvěděli se více o tom, jak prohlížeč funguje a jak profilovat jeho výkon.
---
## 🚀 Výzva
Prozkoumejte některé open source webové stránky, které existují již dlouhou dobu, a na základě jejich historie na GitHubu zjistěte, zda byly v průběhu let optimalizovány pro výkon, a pokud ano, jak. Jaký je nejčastější problém?
Prozkoumejte některé open source weby, které existují již dlouhou dobu, a na základě jejich historie na GitHubu zjistěte, zda byly v průběhu let optimalizovány pro výkon, pokud vůbec. Jaký je nejčastější problém?
## Kvíz po lekci
## Kvíz po přednášce
[Kvíz po lekci](https://ff-quizzes.netlify.app/web/quiz/28)
[Kvíz po přednášce](https://ff-quizzes.netlify.app/web/quiz/28)
## Přehled a samostudium
@ -166,11 +165,11 @@ Zvažte přihlášení k odběru [newsletteru o výkonu](https://perf.email/).
Prozkoumejte některé způsoby, jak prohlížeče měří výkon webu, prohlédnutím panelů výkonu ve svých webových nástrojích. Najdete nějaké zásadní rozdíly?
## Zadání
## Úkol
[Analyzujte web pro výkon](assignment.md)
[Analyzujte web z hlediska výkonu](assignment.md)
---
**Prohlášení**:
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
**Upozornění**:
Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Za autoritativní zdroj by měl být považován původní dokument v jeho původním jazyce. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.
# Browserudvidelsesprojekt Del 3: Lær om Baggrundsopgaver og Ydeevne
# Browserudvidelsesprojekt del 3: Lær om baggrundsopgaver og ydeevne
## Quiz før forelæsning
## Quiz før lektionen
[Quiz før forelæsning](https://ff-quizzes.netlify.app/web/quiz/27)
[Quiz før lektionen](https://ff-quizzes.netlify.app/web/quiz/27)
### Introduktion
I de sidste to lektioner af dette modul lærte du, hvordan man bygger en formular og et visningsområde til data hentet fra en API. Det er en meget standard måde at skabe en webtilstedeværelse på nettet. Du lærte endda, hvordan man håndterer asynkron datahentning. Din browserudvidelse er næsten færdig.
Det, der mangler, er at håndtere nogle baggrundsopgaver, herunder at opdatere farven på udvidelsens ikon. Dette er derfor et godt tidspunkt at tale om, hvordan browseren håndterer denne type opgaver. Lad os tænke på disse browseropgaver i sammenhæng med ydeevnen af dine webressourcer, mens du bygger dem.
Det, der mangler, er at håndtere nogle baggrundsopgaver, herunder at opdatere farven på udvidelsens ikon. Derfor er det et godt tidspunkt at tale om, hvordan browseren håndterer denne type opgaver. Lad os tænke på disse browseropgaver i konteksten af ydeevnen for dine webressourcer, mens du bygger dem.
## Grundlæggende om webydeevne
> "Webstedets ydeevne handler om to ting: hvor hurtigt siden indlæses, og hvor hurtigt koden på den kører." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Emnet om, hvordan man gør dine websteder lynhurtige på alle slags enheder, for alle slags brugere, i alle slags situationer, er ikke overraskende omfattende. Her er nogle punkter at huske på, mens du bygger enten et standard webprojekt eller en browserudvidelse.
Emnet om, hvordan man gør sine websites lynhurtige på alle slags enheder, for alle slags brugere, i alle slags situationer, er naturligvis omfattende. Her er nogle punkter at huske på, når du bygger enten et standard webprojekt eller en browserudvidelse.
Det første, du skal gøre for at sikre, at dit websted kører effektivt, er at indsamle data om dets ydeevne. Det første sted at gøre dette er i udviklerværktøjerne i din webbrowser. I Edge kan du vælge knappen "Indstillinger og mere" (ikonet med de tre prikker øverst til højre i browseren), derefter navigere til Flere værktøjer > Udviklerværktøjer og åbne fanen Ydeevne. Du kan også bruge tastaturgenvejene `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac for at åbne udviklerværktøjerne.
Det første, du skal gøre for at sikre, at dit websted kører effektivt, er at indsamle data om dets ydeevne. Det første sted at gøre dette er i udviklerværktøjerne i din webbrowser. I Edge kan du vælge knappen "Indstillinger og mere" (ikonet med tre prikker øverst til højre i browseren), derefter navigere til Flere værktøjer > Udviklerværktøjer og åbne fanen Ydeevne. Du kan også bruge tastaturgenvejene `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac for at åbne udviklerværktøjerne.
Fanen Ydeevne indeholder et profileringsværktøj. Åbn et websted (prøv for eksempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) og klik på 'Optag'-knappen, og opdater derefter siden. Stop optagelsen når som helst, og du vil kunne se de rutiner, der genereres for at 'script', 'render' og 'male' siden:
Fanen Ydeevne indeholder et profileringsværktøj. Åbn et websted (prøv for eksempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) og klik på 'Optag'-knappen, og opdater derefter webstedet. Stop optagelsen når som helst, og du vil kunne se de rutiner, der genereres for at 'script', 'render' og 'male' webstedet:
✅ Besøg [Microsoft Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) om Ydeevne-panelet i Edge
✅ Besøg [Microsoft Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) om ydeevnepanelet i Edge
> Tip: For at få en præcis måling af dit websteds opstartstid, ryd din browsers cache
> Tip: For at få en nøjagtig aflæsning af dit websteds opstartstid, skal du rydde din browsers cache.
Vælg elementer i profilens tidslinje for at zoome ind på begivenheder, der sker, mens din side indlæses.
Få et øjebliksbillede af din sides ydeevne ved at vælge en del af profilens tidslinje og kigge på oversigtspanelet:
Få et snapshot af din sides ydeevne ved at vælge en del af profilens tidslinje og se på oversigtspanelet:
@ -51,23 +51,23 @@ Tjek begivenhedslogpanelet for at se, om nogen begivenhed tog længere end 15 ms
Generelt er der nogle "problemområder", som enhver webudvikler bør holde øje med, når de bygger et websted, for at undgå ubehagelige overraskelser, når det er tid til at implementere i produktion.
**Ressourcestørrelser**: Internettet er blevet 'tungere' og dermed langsommere i løbet af de sidste par år. Noget af denne vægt skyldes brugen af billeder.
**Ressourcestørrelser**: Webben er blevet 'tungere' og dermed langsommere i løbet af de seneste år. Noget af denne vægt skyldes brugen af billeder.
✅ Kig gennem [Internetarkivet](https://httparchive.org/reports/page-weight) for et historisk overblik over sidens vægt og mere.
✅ Kig gennem [Internet Archive](https://httparchive.org/reports/page-weight) for en historisk oversigt over sidens vægt og mere.
En god praksis er at sikre, at dine billeder er optimeret og leveret i den rigtige størrelse og opløsning til dine brugere.
En god praksis er at sikre, at dine billeder er optimerede og leveres i den rigtige størrelse og opløsning til dine brugere.
**DOM-gennemløb**: Browseren skal bygge sin Document Object Model baseret på den kode, du skriver, så det er i god sidens ydeevnes interesse at holde dine tags minimale og kun bruge og style det, som siden har brug for. For eksempel kan overskydende CSS, der er knyttet til en side, optimeres; stilarter, der kun skal bruges på én side, behøver ikke at være inkluderet i hoved-stilarket.
**DOM-gennemløb**: Browseren skal bygge sin Document Object Model baseret på den kode, du skriver, så det er i interesse for god sideydeevne at holde dine tags minimale og kun bruge og style det, siden har brug for. I denne forbindelse kunne overskydende CSS, der er knyttet til en side, optimeres; stilarter, der kun skal bruges på én side, behøver for eksempel ikke at være inkluderet i hovedstilarket.
**JavaScript**: Enhver JavaScript-udvikler bør holde øje med 'render-blokerende' scripts, der skal indlæses, før resten af DOM'en kan gennemløbes og males til browseren. Overvej at bruge `defer` med dine inline scripts (som det gøres i Terrarium-modulet).
✅ Prøv nogle websteder på en [Site Speed Test-webside](https://www.webpagetest.org/) for at lære mere om de almindelige tjek, der udføres for at bestemme webstedets ydeevne.
✅ Prøv nogle websteder på en [Site Speed Test hjemmeside](https://www.webpagetest.org/) for at lære mere om de almindelige tjek, der udføres for at bestemme webstedets ydeevne.
Nu hvor du har en idé om, hvordan browseren gengiver de ressourcer, du sender til den, lad os se på de sidste par ting, du skal gøre for at færdiggøre din udvidelse:
Nu hvor du har en idé om, hvordan browseren gengiver de ressourcer, du sender til den, lad os se på de sidste par ting, du skal gøre for at fuldføre din udvidelse:
### Opret en funktion til at beregne farve
Arbejd i `/src/index.js`, og tilføj en funktion kaldet `calculateColor()` efter rækken af `const`-variabler, du satte for at få adgang til DOM'en:
Arbejd i `/src/index.js`, og tilføj en funktion kaldet `calculateColor()` efter de serier af `const`-variabler, du har sat for at få adgang til DOM'en:
```JavaScript
function calculateColor(value) {
@ -88,17 +88,17 @@ function calculateColor(value) {
}
```
Hvad sker der her? Du sender en værdi (kulstofintensiteten) fra API-kaldet, du færdiggjorde i den sidste lektion, og derefter beregner du, hvor tæt dens værdi er på indekset præsenteret i farvearrayet. Derefter sender du den nærmeste farveværdi videre til chrome runtime.
Hvad sker der her? Du sender en værdi (kulstofintensiteten) fra API-kaldet, du fuldførte i sidste lektion, og derefter beregner du, hvor tæt dens værdi er på indekset præsenteret i farvearrayet. Derefter sender du den nærmeste farveværdi videre til chrome runtime.
Chrome.runtime har [en API](https://developer.chrome.com/extensions/runtime), der håndterer alle slags baggrundsopgaver, og din udvidelse udnytter dette:
> "Brug chrome.runtime API'en til at hente baggrundssiden, returnere detaljer om manifestet og lytte til og reagere på begivenheder i appens eller udvidelsens livscyklus. Du kan også bruge denne API til at konvertere relative stier til fuldt kvalificerede URL'er."
> "Brug chrome.runtime API'en til at hente baggrundssiden, returnere detaljer om manifestet og lytte til og reagere på begivenheder i appens eller udvidelsens livscyklus. Du kan også bruge denne API til at konvertere den relative sti for URL'er til fuldt kvalificerede URL'er."
✅ Hvis du udvikler denne browserudvidelse til Edge, kan det overraske dig, at du bruger en chrome API. De nyere versioner af Edge-browseren kører på Chromium-browsermotoren, så du kan udnytte disse værktøjer.
✅ Hvis du udvikler denne browserudvidelse til Edge, kan det overraske dig, at du bruger en chrome API. De nyere Edge-browserversioner kører på Chromium-browsermotoren, så du kan udnytte disse værktøjer.
> Bemærk, hvis du vil profilere en browserudvidelse, skal du starte udviklerværktøjerne fra selve udvidelsen, da den er sin egen separate browserinstans.
### Indstil en standard ikonfarve
### Indstil en standardfarve for ikonet
Nu, i `init()`-funktionen, skal du indstille ikonet til at være generisk grønt til at starte med ved igen at kalde chromes `updateIcon`-handling:
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Kald funktionen, udfør kaldet
Kald derefter den funktion, du lige har oprettet, ved at tilføje den til løftet returneret af C02Signal API:
Dernæst skal du kalde den funktion, du lige har oprettet, ved at tilføje den til løftet, der returneres af C02Signal API'en:
```JavaScript
//let CO2...
calculateColor(CO2);
```
Og endelig, i `/dist/background.js`, tilføj lytteren til disse baggrundshandlingskald:
Og endelig, i `/dist/background.js`, tilføj lytteren til disse baggrundsaktionskald:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,9 +141,9 @@ function drawIcon(value) {
}
```
I denne kode tilføjer du en lytter til eventuelle beskeder, der kommer til baggrundsopgavehåndteringen. Hvis den kaldes 'updateIcon', køres den næste kode for at tegne et ikon i den korrekte farve ved hjælp af Canvas API'en.
I denne kode tilføjer du en lytter til eventuelle beskeder, der kommer til backend-opgavehåndteringen. Hvis den kaldes 'updateIcon', køres den næste kode for at tegne et ikon med den korrekte farve ved hjælp af Canvas API'en.
✅ Du vil lære mere om Canvas API'en i [Space Game-lektionerne](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Du lærer mere om Canvas API'en i [Space Game-lektionerne](../../6-space-game/2-drawing-to-canvas/README.md).
Nu skal du genopbygge din udvidelse (`npm run build`), opdatere og starte din udvidelse og se farven ændre sig. Er det et godt tidspunkt at tage en pause eller vaske op? Nu ved du det!
@ -154,17 +153,17 @@ Tillykke, du har bygget en nyttig browserudvidelse og lært mere om, hvordan bro
## 🚀 Udfordring
Undersøg nogle open source-websteder, der har eksisteret i lang tid, og se, baseret på deres GitHub-historik, om du kan afgøre, hvordan de blev optimeret over årene for ydeevne, hvis overhovedet. Hvad er det mest almindelige problemområde?
Undersøg nogle open source-websteder, der har eksisteret i lang tid, og baseret på deres GitHub-historik, se om du kan afgøre, hvordan de blev optimeret gennem årene for ydeevne, hvis overhovedet. Hvad er det mest almindelige problemområde?
## Quiz efter forelæsning
## Quiz efter lektionen
[Quiz efter forelæsning](https://ff-quizzes.netlify.app/web/quiz/28)
[Quiz efter lektionen](https://ff-quizzes.netlify.app/web/quiz/28)
## Gennemgang & Selvstudie
Overvej at tilmelde dig et [ydeevne-nyhedsbrev](https://perf.email/)
Undersøg nogle af de måder, browsere vurderer webydeevne på ved at kigge gennem ydeevnefanerne i deres webværktøjer. Finder du nogen større forskelle?
Undersøg nogle af de måder, browsere vurderer webydeevne ved at kigge gennem ydeevnefanerne i deres webværktøjer. Finder du nogen større forskelle?
## Opgave
@ -173,4 +172,4 @@ Undersøg nogle af de måder, browsere vurderer webydeevne på ved at kigge genn
---
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.
# Browser-Erweiterungsprojekt Teil 3: Hintergrundaufgaben und Leistung kennenlernen
# Browser-Erweiterungsprojekt Teil 3: Lernen Sie mehr über Hintergrundaufgaben und Leistung
## Quiz vor der Vorlesung
@ -15,59 +15,59 @@ CO_OP_TRANSLATOR_METADATA:
### Einführung
In den letzten beiden Lektionen dieses Moduls hast du gelernt, wie man ein Formular und einen Anzeigebereich für Daten erstellt, die von einer API abgerufen werden. Das ist eine sehr gängige Methode, um eine Webpräsenz zu erstellen. Du hast sogar gelernt, wie man Daten asynchron abruft. Deine Browser-Erweiterung ist fast fertig.
In den letzten beiden Lektionen dieses Moduls haben Sie gelernt, wie man ein Formular und einen Anzeigebereich für Daten erstellt, die von einer API abgerufen werden. Dies ist eine sehr gängige Methode, um eine Webpräsenz zu erstellen. Sie haben sogar gelernt, wie man Daten asynchron abruft. Ihre Browser-Erweiterung ist fast fertig.
Es bleibt noch, einige Hintergrundaufgaben zu verwalten, einschließlich der Aktualisierung der Farbe des Erweiterungssymbols. Dies ist ein guter Zeitpunkt, um darüber zu sprechen, wie der Browser solche Aufgaben handhabt. Lass uns diese Browser-Aufgaben im Kontext der Leistung deiner Webressourcen betrachten, während du sie erstellst.
Es bleibt, einige Hintergrundaufgaben zu verwalten, einschließlich der Aktualisierung der Farbe des Erweiterungssymbols. Dies ist ein guter Zeitpunkt, um darüber zu sprechen, wie der Browser solche Aufgaben verwaltet. Lassen Sie uns über diese Browser-Aufgaben im Kontext der Leistung Ihrer Webressourcen nachdenken, während Sie sie erstellen.
## Grundlagen der Web-Performance
## Grundlagen der Web-Leistung
> "Website-Performance dreht sich um zwei Dinge: wie schnell die Seite lädt und wie schnell der Code darauf ausgeführt wird." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Website-Leistung dreht sich um zwei Dinge: wie schnell die Seite lädt und wie schnell der Code darauf ausgeführt wird." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Das Thema, wie man Websites auf allen Arten von Geräten, für alle Arten von Nutzern und in allen möglichen Situationen blitzschnell macht, ist erwartungsgemäß umfangreich. Hier sind einige Punkte, die du beachten solltest, wenn du entweder ein Standard-Webprojekt oder eine Browser-Erweiterung erstellst.
Das Thema, wie man Websites auf allen Arten von Geräten, für alle Arten von Benutzern und in allen möglichen Situationen blitzschnell macht, ist erwartungsgemäß umfangreich. Hier sind einige Punkte, die Sie beachten sollten, wenn Sie entweder ein Standard-Webprojekt oder eine Browser-Erweiterung erstellen.
Das Erste, was du tun musst, um sicherzustellen, dass deine Website effizient läuft, ist, Daten über ihre Leistung zu sammeln. Der erste Ort, um dies zu tun, sind die Entwicklertools deines Webbrowsers. In Edge kannst du die Schaltfläche "Einstellungen und mehr" (das Drei-Punkte-Symbol oben rechts im Browser) auswählen, dann zu Weitere Tools > Entwicklertools navigieren und den Tab "Leistung" öffnen. Du kannst auch die Tastenkombination `Strg` + `Umschalt` + `I` unter Windows oder `Option` + `Befehl` + `I` auf einem Mac verwenden, um die Entwicklertools zu öffnen.
Das Erste, was Sie tun müssen, um sicherzustellen, dass Ihre Website effizient läuft, ist, Daten über ihre Leistung zu sammeln. Der erste Ort, an dem Sie dies tun können, sind die Entwicklertools Ihres Webbrowsers. In Edge können Sie die Schaltfläche "Einstellungen und mehr" (das Drei-Punkte-Symbol oben rechts im Browser) auswählen, dann zu Weitere Tools > Entwicklertools navigieren und die Registerkarte Leistung öffnen. Sie können auch die Tastenkombinationen `Strg` + `Umschalt` + `I` unter Windows oder `Option` + `Befehl` + `I` auf Mac verwenden, um die Entwicklertools zu öffnen.
Der Tab "Leistung" enthält ein Profiling-Tool. Öffne eine Website (probiere zum Beispiel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) und klicke auf die Schaltfläche "Aufzeichnen", dann aktualisiere die Seite. Beende die Aufzeichnung jederzeit, und du kannst die Routinen sehen, die generiert werden, um die Seite zu "skripten", "rendern" und "zeichnen":
Die Registerkarte Leistung enthält ein Profiling-Tool. Öffnen Sie eine Website (versuchen Sie beispielsweise [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) und klicken Sie auf die Schaltfläche "Aufzeichnen", dann aktualisieren Sie die Website. Beenden Sie die Aufzeichnung jederzeit, und Sie können die Routinen sehen, die generiert werden, um die Website zu 'skripten', 'rendern' und 'malen':
✅ Besuche die [Microsoft-Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) zum Leistungspanel in Edge.
✅ Besuchen Sie die [Microsoft-Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) zur Leistungsübersicht in Edge.
> Tipp: Um eine genaue Messung der Startzeit deiner Website zu erhalten, leere den Cache deines Browsers.
> Tipp: Um eine genaue Messung der Startzeit Ihrer Website zu erhalten, leeren Sie den Cache Ihres Browsers.
Wähle Elemente der Profil-Zeitleiste aus, um Ereignisse zu vergrößern, die während des Ladens deiner Seite auftreten.
Wählen Sie Elemente der Profil-Zeitleiste aus, um Ereignisse zu vergrößern, die während des Ladens Ihrer Seite auftreten.
Erhalte eine Momentaufnahme der Leistung deiner Seite, indem du einen Teil der Profil-Zeitleiste auswählst und dir das Zusammenfassungsfenster ansiehst:
Erhalten Sie eine Momentaufnahme der Leistung Ihrer Seite, indem Sie einen Teil der Profil-Zeitleiste auswählen und das Zusammenfassungsfenster betrachten:
✅ Lerne deinen Profiler kennen! Öffne die Entwicklertools auf dieser Seite und überprüfe, ob es Engpässe gibt. Was ist die am langsamsten ladende Ressource? Die schnellste?
✅ Lernen Sie Ihren Profiler kennen! Öffnen Sie die Entwicklertools auf dieser Website und prüfen Sie, ob es Engpässe gibt. Was ist die am langsamsten ladende Ressource? Die schnellste?
## Profiling-Checks
Im Allgemeinen gibt es einige "Problemzonen", auf die jeder Webentwickler achten sollte, wenn er eine Website erstellt, um böse Überraschungen beim Deployment in die Produktion zu vermeiden.
Im Allgemeinen gibt es einige "Problemzonen", die jeder Webentwickler beim Erstellen einer Website im Auge behalten sollte, um unangenehme Überraschungen zu vermeiden, wenn es Zeit ist, sie in Produktion zu bringen.
**Asset-Größen**: Das Web ist in den letzten Jahren "schwerer" und damit langsamer geworden. Ein Teil dieses Gewichts hängt mit der Verwendung von Bildern zusammen.
**Asset-Größen**: Das Web ist in den letzten Jahren 'schwerer' und damit langsamer geworden. Ein Teil dieses Gewichts hat mit der Verwendung von Bildern zu tun.
✅ Sieh dir das [Internetarchiv](https://httparchive.org/reports/page-weight) an, um einen historischen Überblick über das Seitengewicht und mehr zu erhalten.
✅ Schauen Sie sich das [Internet-Archiv](https://httparchive.org/reports/page-weight) für eine historische Ansicht des Seitengewichts und mehr an.
Eine gute Praxis ist es, sicherzustellen, dass deine Bilder optimiert sind und in der richtigen Größe und Auflösung für deine Nutzer bereitgestellt werden.
Eine gute Praxis ist sicherzustellen, dass Ihre Bilder optimiert sind und in der richtigen Größe und Auflösung für Ihre Benutzer bereitgestellt werden.
**DOM-Traversierungen**: Der Browser muss sein Document Object Model basierend auf dem von dir geschriebenen Code erstellen. Daher ist es im Interesse einer guten Seitenleistung, die Tags minimal zu halten und nur das zu verwenden und zu stylen, was die Seite benötigt. In diesem Zusammenhang könnte überschüssiges CSS, das mit einer Seite verbunden ist, optimiert werden; Stile, die nur auf einer Seite verwendet werden müssen, müssen beispielsweise nicht im Haupt-Stylesheet enthalten sein.
**DOM-Durchläufe**: Der Browser muss sein Document Object Model basierend auf dem von Ihnen geschriebenen Code erstellen, daher ist es im Interesse einer guten Seitenleistung, Ihre Tags minimal zu halten und nur das zu verwenden und zu stylen, was die Seite benötigt. In diesem Zusammenhang könnte überschüssiges CSS, das mit einer Seite verbunden ist, optimiert werden; Stile, die nur auf einer Seite verwendet werden müssen, müssen beispielsweise nicht im Hauptstilblatt enthalten sein.
**JavaScript**: Jeder JavaScript-Entwickler sollte auf "render-blockierende" Skripte achten, die geladen werden müssen, bevor der Rest des DOM durchlaufen und im Browser dargestellt werden kann. Erwäge die Verwendung von `defer` mit deinen Inline-Skripten (wie es im Terrarium-Modul gemacht wird).
**JavaScript**: Jeder JavaScript-Entwickler sollte auf 'render-blockierende' Skripte achten, die geladen werden müssen, bevor der Rest des DOM durchlaufen und im Browser dargestellt werden kann. Erwägen Sie die Verwendung von `defer` mit Ihren Inline-Skripten (wie im Terrarium-Modul).
✅ Probiere einige Websites auf einer [Website-Geschwindigkeitstest-Seite](https://www.webpagetest.org/) aus, um mehr über die gängigen Prüfungen zu erfahren, die durchgeführt werden, um die Leistung einer Website zu bestimmen.
✅ Probieren Sie einige Websites auf einer [Website-Geschwindigkeitstest-Seite](https://www.webpagetest.org/) aus, um mehr über die üblichen Checks zu erfahren, die durchgeführt werden, um die Leistung einer Website zu bestimmen.
Jetzt, da du eine Vorstellung davon hast, wie der Browser die von dir gesendeten Ressourcen rendert, lass uns die letzten Dinge betrachten, die du tun musst, um deine Erweiterung abzuschließen:
Jetzt, da Sie eine Vorstellung davon haben, wie der Browser die von Ihnen gesendeten Ressourcen rendert, schauen wir uns die letzten Dinge an, die Sie tun müssen, um Ihre Erweiterung abzuschließen:
### Eine Funktion zur Farbberechnung erstellen
### Erstellen Sie eine Funktion zur Berechnung der Farbe
Arbeite in `/src/index.js` und füge nach der Reihe von `const`-Variablen, die du gesetzt hast, um Zugriff auf das DOM zu erhalten, eine Funktion namens `calculateColor()` hinzu:
Arbeiten Sie in `/src/index.js` und fügen Sie eine Funktion namens `calculateColor()` nach der Reihe von `const`-Variablen hinzu, die Sie festgelegt haben, um Zugriff auf das DOM zu erhalten:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Was passiert hier? Du übergibst einen Wert (die Kohlenstoffintensität) aus dem API-Aufruf, den du in der letzten Lektion abgeschlossen hast, und berechnest dann, wie nah sein Wert am Index im Farben-Array liegt. Dann sendest du diesen nächstgelegenen Farbwert an den Chrome-Runtime.
Was passiert hier? Sie übergeben einen Wert (die Kohlenstoffintensität) aus dem API-Aufruf, den Sie in der letzten Lektion abgeschlossen haben, und berechnen dann, wie nah sein Wert am Index im Farben-Array liegt. Dann senden Sie diesen nächstgelegenen Farbwert an die Chrome-Laufzeit.
Die chrome.runtime verfügt über [eine API](https://developer.chrome.com/extensions/runtime), die alle Arten von Hintergrundaufgaben handhabt, und deine Erweiterung nutzt diese:
Die chrome.runtime hat [eine API](https://developer.chrome.com/extensions/runtime), die alle Arten von Hintergrundaufgaben verwaltet, und Ihre Erweiterung nutzt diese:
> "Verwende die chrome.runtime-API, um die Hintergrundseite abzurufen, Details zum Manifest zurückzugeben und auf Ereignisse im Lebenszyklus der App oder Erweiterung zu hören und darauf zu reagieren. Du kannst diese API auch verwenden, um relative Pfade von URLs in vollständig qualifizierte URLs umzuwandeln."
> "Verwenden Sie die chrome.runtime-API, um die Hintergrundseite abzurufen, Details zum Manifest zurückzugeben und auf Ereignisse im Lebenszyklus der App oder Erweiterung zu hören und darauf zu reagieren. Sie können diese API auch verwenden, um den relativen Pfad von URLs in vollständig qualifizierte URLs umzuwandeln."
✅ Wenn du diese Browser-Erweiterung für Edge entwickelst, könnte es dich überraschen, dass du eine Chrome-API verwendest. Die neueren Edge-Browser-Versionen laufen auf der Chromium-Browser-Engine, sodass du diese Tools nutzen kannst.
✅ Wenn Sie diese Browser-Erweiterung für Edge entwickeln, könnte es Sie überraschen, dass Sie eine Chrome-API verwenden. Die neueren Edge-Browser-Versionen laufen auf der Chromium-Browser-Engine, sodass Sie diese Tools nutzen können.
> Hinweis: Wenn du eine Browser-Erweiterung profilieren möchtest, starte die Entwicklertools direkt aus der Erweiterung heraus, da sie ihre eigene separate Browserinstanz ist.
> Hinweis: Wenn Sie eine Browser-Erweiterung profilieren möchten, starten Sie die Entwicklertools innerhalb der Erweiterung selbst, da sie eine eigene separate Browser-Instanz ist.
### Eine Standard-Symbolfarbe festlegen
### Setzen Sie eine Standard-Symbolfarbe
Setze nun in der `init()`-Funktion das Symbol zunächst auf ein generisches Grün, indem du erneut die `updateIcon`-Aktion von Chrome aufrufst:
Setzen Sie nun in der `init()`-Funktion das Symbol zunächst auf ein generisches Grün, indem Sie erneut die `updateIcon`-Aktion von Chrome aufrufen:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Rufen Sie die Funktion auf, führen Sie den Aufruf aus
### Die Funktion aufrufen und den Aufruf ausführen
Rufe als Nächstes die Funktion, die du gerade erstellt hast, auf, indem du sie dem Promise hinzufügst, das von der C02Signal-API zurückgegeben wird:
Rufen Sie als Nächstes die Funktion auf, die Sie gerade erstellt haben, indem Sie sie dem Promise hinzufügen, das von der C02Signal-API zurückgegeben wird:
```JavaScript
//let CO2...
calculateColor(CO2);
```
Und schließlich füge in `/dist/background.js` den Listener für diese Hintergrundaktionsaufrufe hinzu:
Und schließlich fügen Sie in `/dist/background.js` den Listener für diese Hintergrundaktionsaufrufe hinzu:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,34 +140,33 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
In diesem Code fügen Sie einen Listener für alle Nachrichten hinzu, die an den Backend-Aufgabenmanager gesendet werden. Wenn er 'updateIcon' genannt wird, wird der nächste Code ausgeführt, um ein Symbol der richtigen Farbe mit der Canvas-API zu zeichnen.
In diesem Code fügst du einen Listener für alle Nachrichten hinzu, die an den Backend-Task-Manager gesendet werden. Wenn er 'updateIcon' genannt wird, wird der nächste Code ausgeführt, um ein Symbol der richtigen Farbe mithilfe der Canvas-API zu zeichnen.
✅ Du wirst mehr über die Canvas-API in den [Space Game-Lektionen](../../6-space-game/2-drawing-to-canvas/README.md) lernen.
✅ Sie werden mehr über die Canvas-API in den [Space Game-Lektionen](../../6-space-game/2-drawing-to-canvas/README.md) lernen.
Baue nun deine Erweiterung neu (`npm run build`), aktualisiere und starte deine Erweiterung und beobachte, wie sich die Farbe ändert. Ist es ein guter Zeitpunkt, um Besorgungen zu machen oder das Geschirr zu spülen? Jetzt weißt du es!
Jetzt bauen Sie Ihre Erweiterung neu (`npm run build`), aktualisieren und starten Sie Ihre Erweiterung und beobachten Sie, wie sich die Farbe ändert. Ist es ein guter Zeitpunkt, um Besorgungen zu machen oder das Geschirr zu spülen? Jetzt wissen Sie es!
Herzlichen Glückwunsch, du hast eine nützliche Browser-Erweiterung erstellt und mehr darüber gelernt, wie der Browser funktioniert und wie man seine Leistung profiliert.
Herzlichen Glückwunsch, Sie haben eine nützliche Browser-Erweiterung erstellt und mehr darüber gelernt, wie der Browser funktioniert und wie man seine Leistung profiliert.
---
## 🚀 Herausforderung
Untersuche einige Open-Source-Websites, die es schon lange gibt, und versuche anhand ihrer GitHub-Historie herauszufinden, ob und wie sie im Laufe der Jahre für die Leistung optimiert wurden. Was ist der häufigste Schwachpunkt?
Untersuchen Sie einige Open-Source-Websites, die es schon lange gibt, und versuchen Sie anhand ihrer GitHub-Historie herauszufinden, wie sie im Laufe der Jahre für die Leistung optimiert wurden, falls überhaupt. Was ist der häufigste Schmerzpunkt?
## Quiz nach der Vorlesung
[Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/quiz/28)
## Rückblick& Selbststudium
## Überprüfung& Selbststudium
Ziehe in Betracht, dich für einen [Performance-Newsletter](https://perf.email/) anzumelden.
Erwägen Sie, sich für einen [Leistungs-Newsletter](https://perf.email/) anzumelden.
Untersuche einige der Möglichkeiten, wie Browser die Web-Performance bewerten, indem du die Leistungstabs in ihren Webtools durchgehst. Findest du größere Unterschiede?
Untersuchen Sie einige der Möglichkeiten, wie Browser die Web-Leistung messen, indem Sie die Leistungsregisterkarten in ihren Webtools durchsehen. Finden Sie wesentliche Unterschiede?
## Aufgabe
[Analysiere eine Website auf Leistung](assignment.md)
[Analysieren Sie eine Website auf Leistung](assignment.md)
Στα δύο τελευταία μαθήματα αυτής της ενότητας, μάθατε πώς να δημιουργείτε μια φόρμα και μια περιοχή εμφάνισης για δεδομένα που λαμβάνονται από ένα API. Είναι ένας πολύ τυπικός τρόπος δημιουργίας παρουσίας στον ιστό. Μάθατε επίσης πώς να χειρίζεστε την ασύγχρονη λήψη δεδομένων. Η επέκταση του περιηγητή σας είναι σχεδόν ολοκληρωμένη.
Στα δύο τελευταία μαθήματα αυτής της ενότητας, μάθατε πώς να δημιουργείτε μια φόρμα και μια περιοχή εμφάνισης για δεδομένα που λαμβάνονται από ένα API. Είναι ένας πολύ τυπικός τρόπος δημιουργίας παρουσίας στο διαδίκτυο. Μάθατε επίσης πώς να χειρίζεστε την ασύγχρονη λήψη δεδομένων. Η επέκταση του περιηγητή σας είναι σχεδόν ολοκληρωμένη.
Απομένει να διαχειριστείτε κάποιες εργασίες υποβάθρου, όπως η ανανέωση του χρώματος του εικονιδίου της επέκτασης, οπότε είναι μια εξαιρετική στιγμή να μιλήσουμε για το πώς ο περιηγητής διαχειρίζεται αυτού του είδους τις εργασίες. Ας σκεφτούμε αυτές τις εργασίες του περιηγητή στο πλαίσιο της απόδοσης των στοιχείων του ιστότοπού σας καθώς τα δημιουργείτε.
Απομένει να διαχειριστείτε κάποιες εργασίες υποβάθρου, όπως η ανανέωση του χρώματος του εικονιδίου της επέκτασης, οπότε είναι μια εξαιρετική στιγμή να μιλήσουμε για το πώς ο περιηγητής διαχειρίζεται αυτού του είδους τις εργασίες. Ας σκεφτούμε αυτές τις εργασίες του περιηγητή στο πλαίσιο της απόδοσης των διαδικτυακών σας πόρων καθώς τους δημιουργείτε.
## Βασικά Στοιχεία Απόδοσης Ιστού
## Βασικά της Απόδοσης Ιστοσελίδων
> "Η απόδοση ενός ιστότοπου αφορά δύο πράγματα: πόσο γρήγορα φορτώνει η σελίδα και πόσο γρήγορα εκτελείται ο κώδικας σε αυτήν." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Η απόδοση μιας ιστοσελίδας αφορά δύο πράγματα: πόσο γρήγορα φορτώνει η σελίδα και πόσο γρήγορα εκτελείται ο κώδικας σε αυτήν." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Το θέμα του πώς να κάνετε τους ιστότοπούς σας εξαιρετικά γρήγορους σε κάθε είδους συσκευές, για κάθε είδους χρήστες, σε κάθε είδους καταστάσεις, είναι αναμενόμενα εκτενές. Ακολουθούν ορισμένα σημεία που πρέπει να έχετε υπόψη σας καθώς δημιουργείτε είτε ένα τυπικό έργο ιστού είτε μια επέκταση περιηγητή.
Το θέμα του πώς να κάνετε τις ιστοσελίδες σας εξαιρετικά γρήγορες σε κάθε είδους συσκευές, για κάθε είδους χρήστες, σε κάθε είδους καταστάσεις, είναι αναμενόμενα τεράστιο. Ακολουθούν ορισμένα σημεία που πρέπει να έχετε υπόψη σας καθώς δημιουργείτε είτε ένα τυπικό διαδικτυακό έργο είτε μια επέκταση περιηγητή.
Το πρώτο πράγμα που πρέπει να κάνετε γιανα διασφαλίσετε ότι ο ιστότοπός σας λειτουργεί αποτελεσματικά είναι να συλλέξετε δεδομένα σχετικά με την απόδοσή του. Το πρώτο μέρος γιανα το κάνετε αυτό είναι στα εργαλεία προγραμματιστών του περιηγητή σας. Στον Edge, μπορείτε να επιλέξετε το κουμπί "Ρυθμίσεις και περισσότερα" (το εικονίδιο με τις τρεις τελείες επάνω δεξιά στον περιηγητή) και στη συνέχεια να μεταβείτε στα Περισσότερα Εργαλεία > Εργαλεία Προγραμματιστών και να ανοίξετε την καρτέλα Απόδοση. Μπορείτε επίσης να χρησιμοποιήσετε τις συντομεύσεις πληκτρολογίου `Ctrl` + `Shift` + `I` στα Windows ή `Option` + `Command` + `I` στο Mac γιανα ανοίξετε τα εργαλεία προγραμματιστών.
Το πρώτο πράγμα που πρέπει να κάνετε γιανα διασφαλίσετε ότι ο ιστότοπός σας λειτουργεί αποτελεσματικά είναι να συλλέξετε δεδομένα σχετικά με την απόδοσή του. Το πρώτο μέρος γιανα το κάνετε αυτό είναι στα εργαλεία προγραμματιστών του περιηγητή σας. Στον Edge, μπορείτε να επιλέξετε το κουμπί "Ρυθμίσεις και περισσότερα" (το εικονίδιο με τις τρεις τελείες στην επάνω δεξιά γωνία του περιηγητή), στη συνέχεια να μεταβείτε στα Περισσότερα Εργαλεία > Εργαλεία Προγραμματιστών και να ανοίξετε την καρτέλα Απόδοσης. Μπορείτε επίσης να χρησιμοποιήσετε τις συντομεύσεις πληκτρολογίου `Ctrl` + `Shift` + `I` στα Windows ή `Option` + `Command` + `I` στο Mac γιανα ανοίξετε τα εργαλεία προγραμματιστών.
Η καρτέλα Απόδοση περιέχει ένα εργαλείο Προφίλ. Ανοίξτε έναν ιστότοπο (δοκιμάστε, για παράδειγμα, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) και κάντε κλικ στο κουμπί 'Εγγραφή', στη συνέχεια ανανεώστε τον ιστότοπο. Σταματήστε την εγγραφή οποιαδήποτε στιγμή και θα μπορείτε να δείτε τις διαδικασίες που δημιουργούνται γιανα 'σενάριο', 'απόδοση' και 'ζωγραφική' του ιστότοπου:
Η καρτέλα Απόδοσης περιέχει ένα εργαλείο Προφίλ. Ανοίξτε έναν ιστότοπο (δοκιμάστε, για παράδειγμα, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) και κάντε κλικ στο κουμπί 'Εγγραφή', στη συνέχεια ανανεώστε τον ιστότοπο. Σταματήστε την εγγραφή οποιαδήποτε στιγμή και θα μπορείτε να δείτε τις ρουτίνες που δημιουργούνται για 'script', 'render' και 'paint' του ιστότοπου:
✅ Επισκεφθείτε την [Τεκμηρίωση της Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) σχετικά με την καρτέλα Απόδοσης στον Edge
✅ Επισκεφθείτε την [Τεκμηρίωση της Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) για την καρτέλα Απόδοσης στον Edge.
> Συμβουλή: γιανα έχετε μια ακριβή μέτρηση του χρόνου εκκίνησης του ιστότοπού σας, καθαρίστε την προσωρινή μνήμη του περιηγητή σας
> Συμβουλή: γιανα έχετε μια ακριβή μέτρηση του χρόνου εκκίνησης του ιστότοπού σας, καθαρίστε την προσωρινή μνήμη του περιηγητή σας.
Επιλέξτε στοιχεία της χρονογραμμής προφίλ γιανα εστιάσετε σε γεγονότα που συμβαίνουν ενώ φορτώνει η σελίδα σας.
Αποκτήστε μια στιγμιότυπο της απόδοσης της σελίδας σας επιλέγοντας ένα μέρος της χρονογραμμής προφίλ και κοιτάζοντας το παράθυρο σύνοψης:
Αποκτήστε μια στιγμιότυπη εικόνα της απόδοσης της σελίδας σας επιλέγοντας ένα μέρος της χρονογραμμής προφίλ και κοιτάζοντας το παράθυρο σύνοψης:
✅ Γνωρίστε το εργαλείο προφίλ σας! Ανοίξτε τα εργαλεία προγραμματιστών σε αυτόν τον ιστότοπο και δείτε αν υπάρχουν σημεία συμφόρησης. Ποιο είναι το στοιχείο που φορτώνει πιο αργά; Το πιο γρήγορο;
✅ Εξοικειωθείτε με το εργαλείο προφίλ σας! Ανοίξτε τα εργαλεία προγραμματιστών σε αυτόν τον ιστότοπο και δείτε αν υπάρχουν σημεία συμφόρησης. Ποιος είναι ο πόρος που φορτώνει πιο αργά; Ποιος είναι ο πιο γρήγορος;
## Έλεγχοι Προφίλ
Γενικά, υπάρχουν ορισμένες "προβληματικές περιοχές" που κάθε προγραμματιστής ιστού πρέπει να παρακολουθεί κατά τη δημιουργία ενός ιστότοπου γιανα αποφύγει δυσάρεστες εκπλήξεις όταν έρθει η ώρα να τον αναπτύξει σε παραγωγή.
**Μεγέθη στοιχείων**: Ο ιστός έχει γίνει πιο 'βαρύς' και, επομένως, πιο αργός τα τελευταία χρόνια. Μέρος αυτού του βάρους έχει να κάνει με τη χρήση εικόνων.
**Μεγέθη πόρων**: Το διαδίκτυο έχει γίνει πιο "βαρύ" και, επομένως, πιο αργό τα τελευταία χρόνια. Μέρος αυτού του βάρους έχει να κάνει με τη χρήση εικόνων.
✅ Αναζητήστε στο [Internet Archive](https://httparchive.org/reports/page-weight) μια ιστορική άποψη του βάρους των σελίδων και περισσότερα.
Μια καλή πρακτική είναι να διασφαλίσετε ότι οι εικόνες σας είναι βελτιστοποιημένες και παραδίδονται στο σωστό μέγεθος και ανάλυση για τους χρήστες σας.
**Περιηγήσεις DOM**: Ο περιηγητής πρέπει να δημιουργήσει το Μοντέλο Αντικειμένου Εγγράφου (DOM) βάσει του κώδικα που γράφετε, οπότε είναι προς το συμφέρον της καλής απόδοσης της σελίδας να διατηρείτε τις ετικέτες σας ελάχιστες, χρησιμοποιώντας και στυλιζάροντας μόνο ό,τι χρειάζεται η σελίδα. Σε αυτό το σημείο, το υπερβολικό CSS που σχετίζεται με μια σελίδα θα μπορούσε να βελτιστοποιηθεί. Στυλ που χρειάζονται μόνο σε μία σελίδα δεν χρειάζεται να περιλαμβάνονται στο κύριο φύλλο στυλ, για παράδειγμα.
**Περιηγήσεις DOM**: Ο περιηγητής πρέπει να δημιουργήσει το Μοντέλο Αντικειμένου Εγγράφου (DOM) με βάση τον κώδικα που γράφετε, οπότε είναι προς το συμφέρον της καλής απόδοσης της σελίδας να διατηρείτε τις ετικέτες σας ελάχιστες, χρησιμοποιώντας και στυλιζάροντας μόνο ό,τι χρειάζεται η σελίδα. Σε αυτό το σημείο, το υπερβολικό CSS που σχετίζεται με μια σελίδα θα μπορούσε να βελτιστοποιηθεί. Στυλ που χρειάζονται μόνο σε μία σελίδα δεν χρειάζεται να περιλαμβάνονται στο κύριο φύλλο στυλ, για παράδειγμα.
**JavaScript**: Κάθε προγραμματιστής JavaScript πρέπει να παρακολουθεί 'σενάρια που μπλοκάρουν την απόδοση', τα οποία πρέπει να φορτωθούν πριν ο υπόλοιπος DOM μπορέσει να περιηγηθεί και να ζωγραφιστεί στον περιηγητή. Σκεφτείτε να χρησιμοποιήσετε `defer` με τα ενσωματωμένα σενάριά σας (όπως γίνεται στην ενότητα Terrarium).
**JavaScript**: Κάθε προγραμματιστής JavaScript πρέπει να παρακολουθεί για 'scripts που μπλοκάρουν την απόδοση', τα οποία πρέπει να φορτωθούν πριν ο υπόλοιπος DOM μπορέσει να περιηγηθεί και να ζωγραφιστεί στον περιηγητή. Σκεφτείτε να χρησιμοποιήσετε `defer` με τα ενσωματωμένα scripts σας (όπως γίνεται στην ενότητα Terrarium).
✅ Δοκιμάστε μερικούς ιστότοπους σε έναν [ιστότοπο δοκιμής ταχύτητας](https://www.webpagetest.org/) γιανα μάθετε περισσότερα σχετικά με τους κοινούς ελέγχους που γίνονται γιανα προσδιοριστεί η απόδοση του ιστότοπου.
Τώρα που έχετε μια ιδέα για το πώς ο περιηγητής αποδίδει τα στοιχεία που του στέλνετε, ας δούμε τα τελευταία πράγματα που πρέπει να κάνετε γιανα ολοκληρώσετε την επέκτασή σας:
Τώρα που έχετε μια ιδέα για το πώς ο περιηγητής αποδίδει τους πόρους που του στέλνετε, ας δούμε τα τελευταία πράγματα που πρέπει να κάνετε γιανα ολοκληρώσετε την επέκτασή σας:
### Δημιουργία συνάρτησης για υπολογισμό χρώματος
Εργαζόμενοι στο `/src/index.js`, προσθέστε μια συνάρτηση που ονομάζεται `calculateColor()` μετά τη σειρά των μεταβλητών `const` που ορίσατε γιανα αποκτήσετε πρόσβαση στο DOM:
Εργαστείτε στο `/src/index.js` και προσθέστε μια συνάρτηση που ονομάζεται `calculateColor()` μετά τη σειρά των μεταβλητών `const` που ορίσατε γιανα αποκτήσετε πρόσβαση στο DOM:
```JavaScript
function calculateColor(value) {
@ -88,7 +88,7 @@ function calculateColor(value) {
}
```
Τι συμβαίνει εδώ; Δίνετε μια τιμή (την ένταση του άνθρακα) από την κλήση API που ολοκληρώσατε στο τελευταίο μάθημα και στη συνέχεια υπολογίζετε πόσο κοντά είναι η τιμή της στον δείκτη που παρουσιάζεται στον πίνακα χρωμάτων. Στη συνέχεια, στέλνετε αυτήν την πλησιέστερη τιμή χρώματος στο chrome runtime.
Τι συμβαίνει εδώ; Δίνετε μια τιμή (την ένταση του άνθρακα) από την κλήση API που ολοκληρώσατε στο προηγούμενο μάθημα και στη συνέχεια υπολογίζετε πόσο κοντά είναι η τιμή της στον δείκτη που παρουσιάζεται στον πίνακα χρωμάτων. Στη συνέχεια, στέλνετε αυτήν την πλησιέστερη τιμή χρώματος στο chrome runtime.
Το chrome.runtime έχει [ένα API](https://developer.chrome.com/extensions/runtime) που χειρίζεται κάθε είδους εργασίες υποβάθρου, και η επέκτασή σας το αξιοποιεί:
@ -100,7 +100,7 @@ function calculateColor(value) {
### Ορισμός προεπιλεγμένου χρώματος εικονιδίου
Τώρα, στη συνάρτηση `init()`, ορίστε το εικονίδιο να είναι γενικά πράσινο για αρχή, καλώντας ξανά τη δράση `updateIcon` του chrome:
Τώρα, στη συνάρτηση `init()`, ορίστε το εικονίδιο να είναι γενικά πράσινο για αρχή καλώντας ξανά τη δράση `updateIcon` του chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Κλήση της συνάρτησης, εκτέλεση της κλήσης
Στη συνέχεια, καλέστε τη συνάρτηση που μόλις δημιουργήσατε προσθέτοντάς την στην υπόσχεση που επιστρέφεται από το API C02Signal:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -154,7 +153,7 @@ function drawIcon(value) {
## 🚀 Πρόκληση
Ερευνήστε μερικούς ιστότοπους ανοιχτού κώδικα που υπάρχουν εδώ και πολύ καιρό και, βάσει του ιστορικού τους στο GitHub, δείτε αν μπορείτε να προσδιορίσετε πώς βελτιστοποιήθηκαν με τα χρόνια για την απόδοση, αν έγινε κάτι τέτοιο. Ποιο είναι το πιο κοινό σημείο πόνου;
Ερευνήστε μερικούς ιστότοπους ανοιχτού κώδικα που υπάρχουν εδώ και πολύ καιρό και, με βάση την ιστορία τους στο GitHub, δείτε αν μπορείτε να προσδιορίσετε πώς βελτιστοποιήθηκαν με τα χρόνια για απόδοση, αν έγινε κάτι τέτοιο. Ποιο είναι το πιο κοινό σημείο πόνου;
## Ερωτηματολόγιο Μετά το Μάθημα
@ -162,7 +161,7 @@ function drawIcon(value) {
## Ανασκόπηση & Αυτομελέτη
Σκεφτείτε να εγγραφείτε σε ένα [newsletter απόδοσης](https://perf.email/)
Σκεφτείτε να εγγραφείτε σε ένα [newsletter για την απόδοση](https://perf.email/)
Ερευνήστε μερικούς από τους τρόπους με τους οποίους οι περιηγητές αξιολογούν την απόδοση ιστού κοιτάζοντας τις καρτέλες απόδοσης στα εργαλεία ιστού τους. Βρίσκετε κάποιες σημαντικές διαφορές;
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
In the last two lessons of this module, you learned how to create a form and a display area for data fetched from an API. This is a very common way to establish a web presence. You even learned how to handle asynchronous data fetching. Your browser extension is almost complete.
What remains is managing some background tasks, such as refreshing the color of the extension's icon. This is a great opportunity to discuss how the browser handles these kinds of tasks. Let’s consider these browser tasks in the context of optimizing the performance of your web assets as you build them.
The remaining tasks involve managing background processes, such as refreshing the color of the extension's icon. This is a great opportunity to discuss how the browser handles these types of tasks. Let's consider these browser tasks in the context of optimizing the performance of your web assets as you develop them.
## Web Performance Basics
> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
The topic of making websites lightning-fast for all kinds of devices, users, and situations is understandably vast. Here are some key points to keep in mind when building either a standard web project or a browser extension.
The topic of making websites lightning-fast across all devices, for all users, and in all situations is understandably vast. Here are some key points to keep in mind when building either a standard web project or a browser extension.
The first step to ensuring your site runs efficiently is to gather data about its performance. The best place to start is the developer tools in your web browser. In Edge, click the "Settings and more" button (the three dots icon in the top-right corner), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows or `Option` + `Command` + `I` on Mac to open the developer tools.
The first step to ensuring your site runs efficiently is to gather data about its performance. The best place to start is the developer tools in your web browser. In Edge, click the "Settings and more" button (the three dots icon in the top-right corner of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows or `Option` + `Command` + `I` on Mac to open developer tools.
The Performance tab includes a Profiling tool. Open a website (for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you’ll see the routines generated to 'script', 'render', and 'paint' the site:
The Performance tab includes a Profiling tool. Open a website (for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you'll see routines generated for 'script', 'render', and 'paint' processes:
✅ Get familiar with your profiler! Open the developer tools on this site and check for any bottlenecks. What’s the slowest-loading asset? The fastest?
✅ Familiarize yourself with the profiler! Open the developer tools on this site and check for bottlenecks. What is the slowest-loading asset? The fastest?
## Profiling Checks
## Profiling checks
In general, there are some "problem areas" that every web developer should monitor when building a site to avoid unpleasant surprises during deployment.
In general, there are some "problem areas" every web developer should monitor when building a site to avoid unpleasant surprises during production deployment.
**Asset sizes**: Over the years, the web has become 'heavier' and, as a result, slower. A significant portion of this weight comes from images.
**Asset sizes**: The web has become 'heavier' and slower over the years, partly due to the use of images.
✅ Explore the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical view of page weight and more.
A good practice is to ensure your images are optimized and delivered at the appropriate size and resolution for your users.
**DOM traversals**: The browser builds its Document Object Model (DOM) based on the code you write. For better page performance, keep your tags minimal and only use and style what the page requires. For instance, excess CSS associated with a page can be optimized; styles needed for a single page don’t need to be included in the main stylesheet.
**DOM traversals**: The browser builds its Document Object Model based on the code you write, so good page performance depends on keeping your tags minimal and only using and styling what the page requires. For example, excess CSS associated with a page can be optimized; styles needed for only one page don't need to be included in the main stylesheet.
**JavaScript**: Every JavaScript developer should watch out for 'render-blocking' scripts that must load before the rest of the DOM can be traversed and painted in the browser. Consider using `defer` with your inline scripts (as demonstrated in the Terrarium module).
**JavaScript**: Every JavaScript developer should watch for 'render-blocking' scripts that must load before the rest of the DOM can be traversed and painted in the browser. Consider using `defer` with your inline scripts (as demonstrated in the Terrarium module).
✅ Test some websites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about common checks for site performance.
✅ Test some sites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about common checks for site performance.
Now that you have an understanding of how the browser renders the assets you send to it, let’s move on to the final steps for completing your extension:
Now that you understand how the browser renders the assets you send to it, let's look at the final steps to complete your extension:
### Create a Function to Calculate Color
### Create a function to calculate color
In `/src/index.js`, add a function called `calculateColor()` after the series of `const` variables you set to access the DOM:
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
What’s happening here? You pass in a value (the carbon intensity) from the API call you completed in the last lesson, then calculate how close its value is to the index in the colors array. Finally, you send the closest color value to the chrome runtime.
What happens here? You pass a value (the carbon intensity) from the API call you completed in the last lesson, then calculate how close its value is to the index in the colors array. You then send the closest color value to the chrome runtime.
The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime) that handles various background tasks, which your extension is utilizing:
The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime) that handles various background tasks, which your extension utilizes:
> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
✅ If you’re developing this browser extension for Edge, you might be surprised to use a chrome API. The newer versions of Edge run on the Chromium browser engine, allowing you to leverage these tools.
✅ If you're developing this browser extension for Edge, you might be surprised to use a chrome API. The newer Edge browser versions run on the Chromium browser engine, allowing you to leverage these tools.
> Note: If you want to profile a browser extension, launch the dev tools from within the extension itself, as it operates as a separate browser instance.
### Set a Default Icon Color
### Set a default icon color
In the `init()` function, set the icon to a generic green color initially by calling chrome’s `updateIcon` action:
Now, in the `init()` function, set the icon to a generic green color initially by calling chrome's `updateIcon` action:
```JavaScript
chrome.runtime.sendMessage({
@ -110,8 +110,7 @@ chrome.runtime.sendMessage({
},
});
```
### Call the Function and Execute the Call
### Call the function, execute the call
Next, call the function you just created by adding it to the promise returned by the CO2Signal API:
@ -125,12 +124,12 @@ Finally, in `/dist/background.js`, add the listener for these background action
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,20 +140,19 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
In this code, you add a listener for any messages sent to the backend task manager. If the message is called 'updateIcon', the subsequent code runs to draw an icon of the appropriate color using the Canvas API.
In this code, you’re adding a listener for any messages sent to the backend task manager. If the message is called 'updateIcon', the subsequent code runs to draw an icon of the appropriate color using the Canvas API.
✅ You’ll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
✅ You'll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
Now, rebuild your extension (`npm run build`), refresh and launch it, and watch the color change. Is it a good time to run an errand or wash the dishes? Now you know!
Now, rebuild your extension (`npm run build`), refresh and launch your extension, and watch the color change. Is it time to run an errand or wash the dishes? Now you know!
Congratulations! You’ve built a functional browser extension and gained insights into how the browser works and how to profile its performance.
Congratulations, you've built a functional browser extension and gained insights into how the browser works and how to profile its performance.
---
## 🚀 Challenge
Explore some open-source websites that have been around for a long time. Based on their GitHub history, see if you can identify how they’ve been optimized for performance over the years, if at all. What’s the most common pain point?
Explore some open-source websites that have been around for a long time. Based on their GitHub history, try to determine how they were optimized for performance over the years, if at all. What is the most common pain point?
## Post-Lecture Quiz
@ -173,4 +171,4 @@ Investigate how browsers measure web performance by exploring the performance ta
---
**Disclaimer**:
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
# Proyecto de Extensión para Navegador Parte 3: Aprende sobre Tareas en Segundo Plano y Rendimiento
# Proyecto de Extensión de Navegador Parte 3: Aprende sobre Tareas en Segundo Plano y Rendimiento
## Cuestionario Previo a la Clase
@ -15,19 +15,19 @@ CO_OP_TRANSLATOR_METADATA:
### Introducción
En las dos últimas lecciones de este módulo, aprendiste a construir un formulario y un área de visualización para datos obtenidos de una API. Es una forma muy estándar de crear una presencia web. Incluso aprendiste a manejar la obtención de datos de forma asíncrona. Tu extensión para navegador está casi completa.
En las dos últimas lecciones de este módulo, aprendiste a construir un formulario y un área de visualización para los datos obtenidos de una API. Es una forma muy estándar de crear una presencia web. Incluso aprendiste a manejar la obtención de datos de manera asincrónica. Tu extensión de navegador está casi completa.
Queda gestionar algunas tareas en segundo plano, como actualizar el color del ícono de la extensión, por lo que este es un buen momento para hablar sobre cómo el navegador maneja este tipo de tareas. Pensemos en estas tareas del navegador en el contexto del rendimiento de tus recursos web mientras los desarrollas.
Queda por gestionar algunas tareas en segundo plano, como actualizar el color del ícono de la extensión, por lo que este es un buen momento para hablar sobre cómo el navegador maneja este tipo de tareas. Pensemos en estas tareas del navegador en el contexto del rendimiento de tus recursos web mientras los construyes.
## Conceptos Básicos sobre el Rendimiento Web
## Conceptos Básicos de Rendimiento Web
> "El rendimiento de un sitio web se trata de dos cosas: qué tan rápido carga la página y qué tan rápido se ejecuta el código en ella." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "El rendimiento de un sitio web se trata de dos cosas: qué tan rápido se carga la página y qué tan rápido se ejecuta el código en ella." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
El tema de cómo hacer que tus sitios web sean increíblemente rápidos en todo tipo de dispositivos, para todo tipo de usuarios y en todo tipo de situaciones, es, como era de esperarse, muy amplio. Aquí hay algunos puntos a tener en cuenta mientras construyes un proyecto web estándar o una extensión para navegador.
El tema de cómo hacer que tus sitios web sean increíblemente rápidos en todo tipo de dispositivos, para todo tipo de usuarios y en todo tipo de situaciones, es, como era de esperarse, vasto. Aquí hay algunos puntos a tener en cuenta mientras construyes un proyecto web estándar o una extensión de navegador.
Lo primero que necesitas hacer para asegurarte de que tu sitio funciona de manera eficiente es recopilar datos sobre su rendimiento. El primer lugar para hacerlo es en las herramientas de desarrollo de tu navegador web. En Edge, puedes seleccionar el botón "Configuración y más" (el ícono de tres puntos en la parte superior derecha del navegador), luego navegar a Más herramientas > Herramientas para desarrolladores y abrir la pestaña Rendimiento. También puedes usar los atajos de teclado `Ctrl` + `Shift` + `I` en Windows o `Option` + `Command` + `I` en Mac para abrir las herramientas de desarrollo.
Lo primero que necesitas hacer para asegurarte de que tu sitio funcione de manera eficiente es recopilar datos sobre su rendimiento. El primer lugar para hacerlo es en las herramientas de desarrollo de tu navegador web. En Edge, puedes seleccionar el botón "Configuración y más" (el ícono de tres puntos en la parte superior derecha del navegador), luego navegar a Más herramientas > Herramientas de desarrollo y abrir la pestaña Rendimiento. También puedes usar los atajos de teclado `Ctrl` + `Shift` + `I` en Windows o `Option` + `Command` + `I` en Mac para abrir las herramientas de desarrollo.
La pestaña Rendimiento contiene una herramienta de Perfilado. Abre un sitio web (prueba, por ejemplo, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) y haz clic en el botón 'Grabar', luego actualiza el sitio. Detén la grabación en cualquier momento y podrás ver las rutinas generadas para 'script', 'renderizar' y 'pintar' el sitio:
La pestaña Rendimiento contiene una herramienta de perfilado. Abre un sitio web (prueba, por ejemplo, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) y haz clic en el botón 'Grabar', luego actualiza el sitio. Detén la grabación en cualquier momento y podrás ver las rutinas generadas para 'script', 'renderizar' y 'pintar' el sitio:
@ -35,9 +35,9 @@ La pestaña Rendimiento contiene una herramienta de Perfilado. Abre un sitio web
> Consejo: para obtener una lectura precisa del tiempo de inicio de tu sitio web, limpia la caché de tu navegador.
Selecciona elementos de la línea de tiempo del perfil para acercarte a los eventos que ocurren mientras tu página se carga.
Selecciona elementos de la línea de tiempo del perfil para acercarte a los eventos que ocurren mientras se carga tu página.
Obtén una instantánea del rendimiento de tu página seleccionando una parte de la línea de tiempo del perfil y observando el panel de resumen:
Obtén una instantánea del rendimiento de tu página seleccionando una parte de la línea de tiempo del perfil y mirando el panel de resumen:
@ -45,11 +45,11 @@ Revisa el panel de Registro de Eventos para ver si algún evento tomó más de 1
✅ ¡Familiarízate con tu perfilador! Abre las herramientas de desarrollo en este sitio y verifica si hay cuellos de botella. ¿Cuál es el recurso que carga más lento? ¿El más rápido?
✅ Familiarízate con tu perfilador. Abre las herramientas de desarrollo en este sitio y verifica si hay cuellos de botella. ¿Cuál es el recurso que tarda más en cargar? ¿El más rápido?
## Verificaciones de Perfilado
En general, hay algunas "áreas problemáticas" que todo desarrollador web debería vigilar al construir un sitio para evitar sorpresas desagradables al momento de desplegar en producción.
En general, hay algunas "áreas problemáticas" que todo desarrollador web debería vigilar al construir un sitio para evitar sorpresas desagradables cuando llegue el momento de desplegarlo en producción.
**Tamaños de recursos**: La web se ha vuelto más 'pesada' y, por ende, más lenta en los últimos años. Parte de este peso tiene que ver con el uso de imágenes.
@ -57,9 +57,9 @@ En general, hay algunas "áreas problemáticas" que todo desarrollador web deber
Una buena práctica es asegurarte de que tus imágenes estén optimizadas y se entreguen en el tamaño y resolución adecuados para tus usuarios.
**Recorridos del DOM**: El navegador tiene que construir su Modelo de Objeto de Documento (DOM) basado en el código que escribes, por lo que es importante para el buen rendimiento de la página mantener tus etiquetas al mínimo, usando y estilizando solo lo que la página necesita. En este sentido, el exceso de CSS asociado con una página podría optimizarse; los estilos que solo se necesitan en una página no necesitan incluirse en la hoja de estilos principal, por ejemplo.
**Recorridos del DOM**: El navegador tiene que construir su Modelo de Objeto de Documento (DOM) basado en el código que escribes, por lo que es importante para el buen rendimiento de la página mantener tus etiquetas al mínimo, usando y estilizando solo lo que la página necesita. En este sentido, el exceso de CSS asociado con una página podría optimizarse; los estilos que solo necesitan usarse en una página no necesitan incluirse en la hoja de estilos principal, por ejemplo.
**JavaScript**: Todo desarrollador de JavaScript debería vigilar los scripts que bloquean el renderizado y que deben cargarse antes de que el resto del DOM pueda ser recorrido y pintado en el navegador. Considera usar `defer` con tus scripts en línea (como se hace en el módulo Terrarium).
**JavaScript**: Todo desarrollador de JavaScript debería estar atento a los scripts que bloquean el renderizado y que deben cargarse antes de que el resto del DOM pueda recorrerse y pintarse en el navegador. Considera usar `defer` con tus scripts en línea (como se hace en el módulo Terrarium).
✅ Prueba algunos sitios en un [sitio de prueba de velocidad](https://www.webpagetest.org/) para aprender más sobre las verificaciones comunes que se realizan para determinar el rendimiento de un sitio.
@ -90,17 +90,17 @@ function calculateColor(value) {
¿Qué está pasando aquí? Pasas un valor (la intensidad de carbono) desde la llamada a la API que completaste en la última lección, y luego calculas qué tan cerca está su valor del índice presentado en el array de colores. Luego envías ese valor de color más cercano al runtime de Chrome.
El runtime de Chrome tiene [una API](https://developer.chrome.com/extensions/runtime) que maneja todo tipo de tareas en segundo plano, y tu extensión está aprovechando eso:
El chrome.runtime tiene [una API](https://developer.chrome.com/extensions/runtime) que maneja todo tipo de tareas en segundo plano, y tu extensión está aprovechando eso:
> "Usa la API chrome.runtime para recuperar la página de fondo, devolver detalles sobre el manifiesto y escuchar y responder a eventos en el ciclo de vida de la aplicación o extensión. También puedes usar esta API para convertir la ruta relativa de URLs en URLs completamente calificadas."
✅ Si estás desarrollando esta extensión para Edge, podría sorprenderte que estés usando una API de Chrome. Las versiones más recientes del navegador Edge se ejecutan en el motor del navegador Chromium, por lo que puedes aprovechar estas herramientas.
✅ Si estás desarrollando esta extensión de navegador para Edge, podría sorprenderte que estés usando una API de Chrome. Las versiones más recientes del navegador Edge funcionan con el motor de navegador Chromium, por lo que puedes aprovechar estas herramientas.
> Nota: si deseas perfilar una extensión para navegador, lanza las herramientas de desarrollo desde dentro de la propia extensión, ya que es una instancia de navegador separada.
> Nota: si deseas perfilar una extensión de navegador, lanza las herramientas de desarrollo desde dentro de la propia extensión, ya que es una instancia de navegador separada.
### Establecer un color de ícono predeterminado
Ahora, en la función `init()`, configura el ícono para que sea genéricamente verde al inicio llamando nuevamente a la acción `updateIcon` de Chrome:
Ahora, en la función `init()`, establece el ícono en un verde genérico para comenzar llamando nuevamente la acción `updateIcon` de Chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Llamar a la función, ejecutar la llamada
A continuación, llama a esa función que acabas de crear agregándola a la promesa devuelta por la API C02Signal:
@ -125,12 +124,12 @@ Y finalmente, en `/dist/background.js`, agrega el listener para estas llamadas d
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,19 +141,19 @@ function drawIcon(value) {
}
```
En este código, estás agregando un listener para cualquier mensaje que llegue al gestor de tareas en segundo plano. Si se llama 'updateIcon', entonces se ejecuta el siguiente código para dibujar un ícono del color adecuado utilizando la API de Canvas.
En este código, estás agregando un listener para cualquier mensaje que llegue al administrador de tareas en segundo plano. Si se llama 'updateIcon', entonces se ejecuta el siguiente código para dibujar un ícono del color adecuado usando la API Canvas.
✅ Aprenderás más sobre la API de Canvas en las [lecciones del Juego Espacial](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Aprenderás más sobre la API Canvas en las [lecciones del Juego Espacial](../../6-space-game/2-drawing-to-canvas/README.md).
Ahora, reconstruye tu extensión (`npm run build`), actualiza y lanza tu extensión, y observa cómo cambia el color. ¿Es un buen momento para hacer un recado o lavar los platos? ¡Ahora lo sabes!
¡Felicidades! Has construido una extensión útil para navegador y aprendido más sobre cómo funciona el navegador y cómo perfilar su rendimiento.
¡Felicidades! Has construido una extensión de navegador útil y aprendido más sobre cómo funciona el navegador y cómo perfilar su rendimiento.
---
## 🚀 Desafío
Investiga algunos sitios web de código abierto que han existido durante mucho tiempo y, basándote en su historial de GitHub, ve si puedes determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto problemático más común?
Investiga algunos sitios web de código abierto que han existido durante mucho tiempo y, basándote en su historial de GitHub, ve si puedes determinar cómo se optimizaron a lo largo de los años para mejorar el rendimiento, si es que lo hicieron. ¿Cuál es el punto más común de dolor?
## Cuestionario Posterior a la Clase
@ -173,4 +172,4 @@ Investiga algunas de las formas en que los navegadores evalúan el rendimiento w
---
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.
در دو درس قبلی این ماژول، یاد گرفتید که چگونه یک فرم و بخش نمایش برای دادههای دریافتشده از یک API بسازید. این یک روش استاندارد برای ایجاد حضور در وب است. حتی یاد گرفتید که چگونه دادهها را به صورت غیرهمزمان دریافت کنید. افزونه مرورگر شما تقریباً کامل شده است.
تنها کاری که باقی مانده، مدیریت برخی وظایف پسزمینه است، از جمله بهروزرسانی رنگ آیکون افزونه. بنابراین، این زمان مناسبی است تا درباره نحوه مدیریت این نوع وظایف توسط مرورگر صحبت کنیم. بیایید به این وظایف مرورگر در زمینه عملکرد داراییهای وب شما هنگام ساخت آنها فکر کنیم.
تنها مدیریت برخی وظایف پسزمینه باقی مانده است، از جمله بهروزرسانی رنگ آیکون افزونه. بنابراین، این زمان مناسبی است تا درباره نحوه مدیریت این نوع وظایف توسط مرورگر صحبت کنیم. بیایید این وظایف مرورگر را در زمینه عملکرد داراییهای وب شما هنگام ساخت آنها بررسی کنیم.
## اصول عملکرد وب
> "عملکرد وبسایت درباره دو چیز است: سرعت بارگذاری صفحه و سرعت اجرای کد روی آن." -- [زک گروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "عملکرد وبسایت به دو چیز بستگی دارد: سرعت بارگذاری صفحه و سرعت اجرای کد در آن." -- [زک گروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
موضوع اینکه چگونه وبسایتهای خود را برای انواع دستگاهها، کاربران و شرایط به طرز شگفتانگیزی سریع کنید، به طرز قابلانتظاری گسترده است. در اینجا چند نکته وجود دارد که هنگام ساخت یک پروژه وب استاندارد یا یک افزونه مرورگر باید به آنها توجه کنید.
موضوع اینکه چگونه وبسایتهای خود را برای انواع دستگاهها، کاربران و شرایط به سرعت بالا برسانید، به طرز قابل پیشبینی گسترده است. در اینجا چند نکته وجود دارد که هنگام ساخت یک پروژه وب استاندارد یا افزونه مرورگر باید در نظر داشته باشید.
اولین کاری که باید انجام دهید تا مطمئن شوید سایت شما به طور کارآمد اجرا میشود، جمعآوری دادههایی درباره عملکرد آن است. اولین جایی که میتوانید این کار را انجام دهید، ابزارهای توسعهدهنده مرورگر وب شماست. در مرورگر Edge، میتوانید دکمه "تنظیمات و بیشتر" (آیکون سه نقطه در بالا سمت راست مرورگر) را انتخاب کرده و سپس به مسیر More Tools > Developer Tools بروید و تب Performance را باز کنید. همچنین میتوانید با استفاده از میانبرهای صفحهکلید `Ctrl` + `Shift` + `I` در ویندوز یا `Option` + `Command` + `I` در مک، ابزارهای توسعهدهنده را باز کنید.
اولین کاری که باید انجام دهید تا مطمئن شوید سایت شما به طور کارآمد اجرا میشود، جمعآوری دادههایی درباره عملکرد آن است. اولین مکان برای انجام این کار ابزارهای توسعهدهنده مرورگر وب شمااست. در Edge، میتوانید دکمه "تنظیمات و بیشتر" (آیکون سه نقطه در گوشه بالا سمت راست مرورگر) را انتخاب کنید، سپس به مسیر More Tools > Developer Tools بروید و تب Performance را باز کنید. همچنین میتوانید از میانبرهای صفحهکلید `Ctrl` + `Shift` + `I` در ویندوز یا `Option` + `Command` + `I` در مک برای باز کردن ابزارهای توسعهدهنده استفاده کنید.
تب Performance شامل یک ابزار پروفایلگیری است. یک وبسایت باز کنید (برای مثال، [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) و روی دکمه 'Record' کلیک کنید، سپس سایت را رفرش کنید. ضبط را در هر زمانی متوقف کنید و میتوانید روتینهایی که برای 'script'، 'render' و 'paint' سایت تولید شدهاند را مشاهده کنید:
تب Performance شامل یک ابزار پروفایلینگ است. یک وبسایت را باز کنید (برای مثال، [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) و روی دکمه 'Record' کلیک کنید، سپس سایت را تازهسازی کنید. ضبط را در هر زمان متوقف کنید، و میتوانید روتینهایی را که برای 'script'، 'render' و 'paint' سایت تولید شدهاند مشاهده کنید:
✅ به [مستندات مایکروسافت](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) درباره پنل Performance در Edge مراجعه کنید.
> نکته: برای دریافت یک اندازهگیری دقیق از زمان شروع سایت خود، کش مرورگر خود را پاک کنید.
> نکته: برای دریافت یک خوانش دقیق از زمان راهاندازی وبسایت خود، کش مرورگر خود را پاک کنید.
عناصر تایملاین پروفایل را انتخاب کنید تا روی رویدادهایی که هنگام بارگذاری صفحه شما اتفاق میافتند، زوم کنید.
عناصر تایملاین پروفایل را انتخاب کنید تا روی رویدادهایی که هنگام بارگذاری صفحه شما اتفاق میافتند زوم کنید.
یک نمای کلی از عملکرد صفحه خود با انتخاب بخشی از تایملاین پروفایل و مشاهده پنل خلاصه دریافت کنید:
با انتخاب بخشی از تایملاین پروفایل و مشاهده پنل خلاصه، یک نمای کلی از عملکرد صفحه خود دریافت کنید:
✅ پروفایلگیر خود را بشناسید! ابزارهای توسعهدهنده را در این سایت باز کنید و ببینید آیا گلوگاهی وجود دارد. کدام دارایی کندترین بارگذاری را دارد؟ سریعترین کدام است؟
✅ پروفایلر خود را بشناسید! ابزارهای توسعهدهنده را در این سایت باز کنید و ببینید آیا گلوگاههایی وجود دارد. کدام دارایی کندترین بارگذاری را دارد؟ سریعترین؟
## بررسیهای پروفایلگیری
## بررسیهای پروفایلینگ
به طور کلی، برخی "نقاط مشکلزا" وجود دارند که هر توسعهدهنده وب باید هنگام ساخت یک سایت به آنها توجه کند تا از سورپرایزهای ناخوشایند هنگام استقرار در محیط تولید جلوگیری کند.
به طور کلی، برخی "مناطق مشکلدار" وجود دارد که هر توسعهدهنده وب باید هنگام ساخت یک سایت مراقب آنها باشد تا از سورپرایزهای ناخوشایند هنگام استقرار در محیط تولید جلوگیری کند.
**اندازه داراییها**: وب در سالهای اخیر "سنگینتر" و در نتیجه کندتر شده است. بخشی از این وزن به استفاده از تصاویر مربوط میشود.
✅ به [آرشیو اینترنت](https://httparchive.org/reports/page-weight) نگاهی بیندازید تا نمایی تاریخی از وزن صفحات و موارد دیگر داشته باشید.
✅ از طریق [آرشیو اینترنت](https://httparchive.org/reports/page-weight) یک نمای تاریخی از وزن صفحات و موارد دیگر را مشاهده کنید.
یک روش خوب این است که مطمئن شوید تصاویر شما بهینه شدهاند و با اندازه و وضوح مناسب برای کاربران شما ارائه میشوند.
**پیمایش DOM**: مرورگر باید مدل شیء سند (DOM) خود را بر اساس کدی که مینویسید بسازد، بنابراین به نفع عملکرد خوب صفحه است که تگهای خود را به حداقل برسانید و فقط از آنچه صفحه نیاز دارد استفاده و استایلدهی کنید. به این نکته توجه کنید که CSS اضافی مرتبط با یک صفحه میتواند بهینه شود؛ استایلهایی که فقط در یک صفحه استفاده میشوند نیازی به گنجاندن در فایل اصلی استایل ندارند.
**پیمایش DOM**: مرورگر باید مدل شیء سند (DOM) خود را بر اساس کدی که مینویسید بسازد، بنابراین به نفع عملکرد خوب صفحه است که تگهای خود را به حداقل برسانید و فقط آنچه صفحه نیاز دارد را استفاده و استایلدهی کنید. به این نکته، CSS اضافی مرتبط با یک صفحه میتواند بهینه شود؛ استایلهایی که فقط در یک صفحه نیاز هستند، نیازی به گنجاندن در فایل اصلی استایل ندارند.
**جاوااسکریپت**: هر توسعهدهنده جاوااسکریپت باید مراقب اسکریپتهای "مسدودکننده رندر" باشد که باید قبل از پیمایش و نقاشی بقیه DOM به مرورگر بارگذاری شوند. استفاده از `defer` با اسکریپتهای درونخطی خود را در نظر بگیرید (همانطور که در ماژول Terrarium انجام شده است).
**جاوااسکریپت**: هر توسعهدهنده جاوااسکریپت باید مراقب اسکریپتهای "مسدودکننده رندر" باشد که باید قبل از پیمایش و نقاشی بقیه DOM به مرورگر بارگذاری شوند. استفاده از `defer` با اسکریپتهای داخلی خود را در نظر بگیرید (همانطور که در ماژول Terrarium انجام شده است).
✅ برخی سایتها را در یک [وبسایت تست سرعت سایت](https://www.webpagetest.org/) امتحان کنید تا بیشتر با بررسیهای رایجی که برای تعیین عملکرد سایت انجام میشوند، آشنا شوید.
✅ برخی سایتها را در یک [وبسایت تست سرعت سایت](https://www.webpagetest.org/) امتحان کنید تا درباره بررسیهای رایج برای تعیین عملکرد سایت بیشتر بدانید.
حالا که ایدهای از نحوه رندر داراییهای شما توسط مرورگر دارید، بیایید به آخرین کارهایی که باید برای تکمیل افزونه خود انجام دهید، نگاهی بیندازیم:
حالا که ایدهای از نحوه رندر مرورگر داراییهایی که به آن ارسال میکنید دارید، بیایید به آخرین مواردی که باید برای تکمیل افزونه خود انجام دهید نگاه کنیم:
### ایجاد یک تابع برای محاسبه رنگ
در فایل `/src/index.js`، یک تابع به نام `calculateColor()` بعد از سری متغیرهای `const` که برای دسترسی به DOM تنظیم کردهاید، اضافه کنید:
در فایل `/src/index.js`، یک تابع به نام `calculateColor()` بعد از مجموعه متغیرهای `const` که برای دسترسی به DOM تنظیم کردهاید اضافه کنید:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
اینجا چه اتفاقی میافتد؟ شما یک مقدار (شدت کربن) را از فراخوانی API که در درس قبلی تکمیل کردید، ارسال میکنید و سپس محاسبه میکنید که مقدار آن چقدر به شاخص ارائهشده در آرایه رنگها نزدیک است. سپس نزدیکترین مقدار رنگ را به کروم رانتایم ارسال میکنید.
اینجا چه اتفاقی میافتد؟ شما یک مقدار (شدت کربن) را از تماس API که در درس قبلی تکمیل کردید ارسال میکنید، و سپس محاسبه میکنید که مقدار آن چقدر به شاخص ارائهشده در آرایه رنگها نزدیک است. سپس نزدیکترین مقدار رنگ را به chrome runtime ارسال میکنید.
کروم رانتایم دارای [یک API](https://developer.chrome.com/extensions/runtime) است که انواع وظایف پسزمینه را مدیریت میکند و افزونه شما از آن استفاده میکند:
chrome.runtime دارای [یک API](https://developer.chrome.com/extensions/runtime) است که انواع وظایف پسزمینه را مدیریت میکند، و افزونه شما از آن استفاده میکند:
> "از API کروم رانتایم برای بازیابی صفحه پسزمینه، بازگرداندن جزئیات مربوط به مانیفست و گوش دادن و پاسخ دادن به رویدادها در چرخه عمر برنامه یا افزونه استفاده کنید. همچنین میتوانید از این API برای تبدیل مسیرهای نسبی URLها به URLهای کاملاً واجد شرایط استفاده کنید."
> "از API chrome.runtime برای بازیابی صفحه پسزمینه، بازگرداندن جزئیات مربوط به manifest، و گوش دادن و پاسخ دادن به رویدادها در چرخه عمر برنامه یا افزونه استفاده کنید. همچنین میتوانید از این API برای تبدیل مسیر نسبی URLها به URLهای کاملاً واجد شرایط استفاده کنید."
✅ اگر این افزونه مرورگر را برای Edge توسعه میدهید، ممکن است تعجب کنید که از یک API کروم استفاده میکنید. نسخههای جدیدتر مرورگر Edge بر روی موتور مرورگر Chromium اجرا میشوند، بنابراین میتوانید از این ابزارها استفاده کنید.
> توجه: اگر میخواهید یک افزونه مرورگر را پروفایلگیری کنید، ابزارهای توسعهدهنده را از داخل خود افزونه باز کنید، زیرا این یک نمونه مرورگر جداگانه است.
> توجه داشته باشید، اگر میخواهید یک افزونه مرورگر را پروفایل کنید، ابزارهای توسعهدهنده را از داخل خود افزونه راهاندازی کنید، زیرا این یک نمونه مرورگر جداگانه است.
### تنظیم رنگ پیشفرض آیکون
حالا، در تابع `init()`، آیکون را به صورت پیشفرض سبز عمومی تنظیم کنید و دوباره از اکشن `updateIcon` کروم استفاده کنید:
حالا، در تابع `init()`، آیکون را به طور پیشفرض سبز تنظیم کنید تا با دوباره فراخوانی اکشن `updateIcon` کروم:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### فراخوانی تابع، اجرای تماس
### فراخوانی تابع و اجرای فراخوانی
سپس، تابعی که تازه ایجاد کردید را با افزودن آن به پرامیس بازگشتی از API سیگنال CO2 فراخوانی کنید:
سپس، تابعی که تازه ایجاد کردید را با افزودن آن به وعده بازگشتی توسط API C02Signal فراخوانی کنید:
```JavaScript
//let CO2...
calculateColor(CO2);
```
و در نهایت، در فایل `/dist/background.js`، یک شنونده برای این فراخوانیهای اکشن پسزمینه اضافه کنید:
و در نهایت، در فایل `/dist/background.js`، شنوندهای برای این تماسهای اکشن پسزمینه اضافه کنید:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,19 +141,19 @@ function drawIcon(value) {
}
```
در این کد، شما یک شنونده برای هر پیامی که به مدیر وظایف پسزمینه میآید اضافه میکنید. اگر نام آن 'updateIcon' باشد، کد بعدی اجرا میشود تا یک آیکون با رنگ مناسب با استفاده از API Canvas ترسیم شود.
در این کد، شما یک شنونده برای هر پیامی که به مدیر وظایف پسزمینه میآید اضافه میکنید. اگر نام آن 'updateIcon' باشد، کد بعدی اجرا میشود تا یک آیکون با رنگ مناسب با استفاده از API Canvas رسم شود.
✅ در درسهای [بازی فضایی](../../6-space-game/2-drawing-to-canvas/README.md) بیشتر درباره API Canvas یاد خواهید گرفت.
✅ دربارهAPI Canvas در [درسهای بازی فضایی](../../6-space-game/2-drawing-to-canvas/README.md) بیشتر خواهید آموخت.
حالا، افزونه خود را دوباره بسازید (`npm run build`)، آن را رفرش و اجرا کنید و تغییر رنگ را مشاهده کنید. آیا زمان مناسبی برای انجام کارهای دیگر یا شستن ظروف است؟ حالا میدانید!
حالا، افزونه خود را دوباره بسازید (`npm run build`)، آن را تازهسازی و راهاندازی کنید، و تغییر رنگ را مشاهده کنید. آیا زمان مناسبی برای انجام یک کار یا شستن ظروف است؟ حالا میدانید!
تبریک میگویم، شما یک افزونه مرورگر مفید ساختهاید و درباره نحوه کار مرورگر و نحوه پروفایلگیری عملکرد آن بیشتر یاد گرفتهاید.
تبریک میگوییم، شما یک افزونه مرورگر مفید ساختهاید و درباره نحوه عملکرد مرورگر و نحوه پروفایل کردن عملکرد آن بیشتر یاد گرفتهاید.
---
## 🚀 چالش
برخی وبسایتهای متنباز که مدت زیادی است وجود دارند را بررسی کنید و بر اساس تاریخچه گیتهاب آنها ببینید آیا میتوانید تعیین کنید که چگونه در طول سالها برای عملکرد بهینه شدهاند، اگر اصلاً بهینه شده باشند. رایجترین نقطه دردسر چیست؟
برخی وبسایتهای متنباز را که مدتها پیش ایجاد شدهاند بررسی کنید و بر اساس تاریخچه GitHub آنها ببینید آیا میتوانید تعیین کنید که چگونه در طول سالها برای عملکرد بهینه شدهاند، اگر اصلاً بهینه شده باشند. رایجترین نقطه درد کدام است؟
## آزمون پس از درس
@ -168,9 +167,9 @@ function drawIcon(value) {
## تکلیف
[تحلیل یک سایت از نظر عملکرد](assignment.md)
[تحلیل یک سایت برای عملکرد](assignment.md)
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش میکنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیهایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما هیچ مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش میکنیم دقت را رعایت کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادقتیهایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه انسانی حرفهای توصیه میشود. ما هیچ مسئولیتی در قبال سوءتفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
# Selaimen laajennusprojekti Osa 3: Taustatehtävät ja suorituskyky
# Selaimen laajennusprojekti, osa 3: Taustatehtävät ja suorituskyky
## Ennakkokysely
@ -15,17 +15,17 @@ CO_OP_TRANSLATOR_METADATA:
### Johdanto
Edellisissä kahdessa oppitunnissa opit rakentamaan lomakkeen ja näyttöalueen API:sta haetuille tiedoille. Tämä on hyvin yleinen tapa luoda verkkosivuston läsnäolo verkossa. Opit myös käsittelemään tietojen hakemista asynkronisesti. Selaimen laajennuksesi on melkein valmis.
Edellisissä kahdessa oppitunnissa opit rakentamaan lomakkeen ja näyttöalueen API:sta haetuille tiedoille. Tämä on hyvin yleinen tapa luoda verkkosivusto. Opit myös käsittelemään tietojen hakua asynkronisesti. Selaimen laajennuksesi on melkein valmis.
Jäljellä on taustatehtävien hallinta, mukaan lukien laajennuksen kuvakkeen värin päivittäminen. Tämä on hyvä hetki keskustella siitä, miten selain hallitsee tällaisia tehtäviä. Tarkastellaan näitä selaimen tehtäviä verkkosivustosi suorituskyvyn näkökulmasta, kun rakennat niitä.
Jäljellä on taustatehtävien hallinta, kuten laajennuksen kuvakkeen värin päivittäminen. Tämä on hyvä hetki keskustella siitä, miten selain hallitsee tällaisia tehtäviä. Tarkastellaan näitä selaimen tehtäviä verkkosivustosi suorituskyvyn näkökulmasta.
## Verkkosuorituskyvyn perusteet
> "Verkkosivuston suorituskyky liittyy kahteen asiaan: kuinka nopeasti sivu latautuu ja kuinka nopeasti sen koodi toimii." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Se, miten verkkosivustot saadaan salamannopeiksi kaikilla laitteilla, kaikille käyttäjille ja kaikissa tilanteissa, on odotetusti laaja aihe. Tässä muutamia huomioitavia asioita, kun rakennat joko tavallista verkkoprojektia tai selaimen laajennusta.
Se, miten verkkosivustot saadaan toimimaan salamannopeasti kaikilla laitteilla, kaikille käyttäjille ja kaikissa tilanteissa, on laaja aihe. Tässä on muutamia asioita, jotka kannattaa pitää mielessä, kun rakennat joko tavallista verkkoprojektia tai selaimen laajennusta.
Ensimmäinen asia, joka sinun täytyy tehdä varmistaaksesi, että sivustosi toimii tehokkaasti, on kerätä tietoa sen suorituskyvystä. Ensimmäinen paikka tehdä tämä on verkkoselaimesi kehittäjätyökalut. Edgessä voit valita "Asetukset ja lisää" -painikkeen (kolmen pisteen kuvake selaimen oikeassa yläkulmassa), siirtyä kohtaan Lisää työkaluja > Kehittäjätyökalut ja avata Suorituskyky-välilehden. Voit myös käyttää pikanäppäimiä `Ctrl` + `Shift` + `I` Windowsissa tai `Option` + `Command` + `I` Macissa avataksesi kehittäjätyökalut.
Ensimmäinen asia, joka sinun tulee tehdä varmistaaksesi sivustosi tehokkaan toiminnan, on kerätä tietoa sen suorituskyvystä. Ensimmäinen paikka tähän on verkkoselaimesi kehittäjätyökalut. Edgessä voit valita "Asetukset ja lisää" -painikkeen (kolmen pisteen kuvake selaimen oikeassa yläkulmassa), siirtyä kohtaan Lisää työkaluja > Kehittäjätyökalut ja avata Suorituskyky-välilehden. Voit myös käyttää pikanäppäimiä `Ctrl` + `Shift` + `I` Windowsissa tai `Option` + `Command` + `I` Macissa avataksesi kehittäjätyökalut.
Suorituskyky-välilehdellä on Profilointi-työkalu. Avaa verkkosivusto (kokeile esimerkiksi [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ja napsauta 'Tallenna'-painiketta, sitten päivitä sivusto. Voit lopettaa tallennuksen milloin tahansa, ja näet rutiinit, jotka on luotu 'script', 'render' ja 'paint' -toimintoja varten:
@ -33,7 +33,7 @@ Suorituskyky-välilehdellä on Profilointi-työkalu. Avaa verkkosivusto (kokeile
> Vinkki: saadaksesi tarkat tiedot verkkosivustosi käynnistysajasta, tyhjennä selaimesi välimuisti.
Valitse profiilin aikajanan elementtejä zoomataksesi tapahtumiin, jotka tapahtuvat sivusi latautuessa.
@ -49,17 +49,17 @@ Tarkista Tapahtumaloki-paneeli nähdäksesi, kestikö jokin tapahtuma yli 15 ms:
## Profilointitarkistukset
Yleisesti ottaen on olemassa joitakin "ongelma-alueita", joita jokaisen verkkokehittäjän tulisi tarkkailla rakentaessaan sivustoa välttääkseen ikäviä yllätyksiä, kun on aika julkaista tuotantoon.
Yleisesti ottaen on olemassa joitakin "ongelma-alueita", joita jokaisen verkkokehittäjän tulisi tarkkailla rakentaessaan sivustoa välttääkseen ikäviä yllätyksiä, kun sivusto on valmis tuotantoon.
**Resurssien koot**: Verkkosivustot ovat viime vuosina "raskautuneet" ja siten hidastuneet. Osa tästä painosta liittyy kuvien käyttöön.
✅ Tutustu [Internet-arkistoon](https://httparchive.org/reports/page-weight) saadaksesi historiallisen näkymän sivustojen painosta ja muusta.
✅ Tutustu [Internet Archiven](https://httparchive.org/reports/page-weight) historialliseen näkymään sivustojen painosta ja muusta.
Hyvä käytäntö on varmistaa, että kuvasi ovat optimoituja ja toimitetaan oikeassa koossa ja resoluutiossa käyttäjillesi.
**DOM-läpikäynnit**: Selaimen täytyy rakentaa Dokumenttiobjektimalli (DOM) kirjoittamasi koodin perusteella, joten hyvän sivuston suorituskyvyn kannalta on tärkeää pitää tagit minimissä, käyttäen ja tyylittäen vain sitä, mitä sivu tarvitsee. Tässä yhteydessä ylimääräinen CSS, joka liittyy sivuun, voitaisiin optimoida; tyylit, joita tarvitaan vain yhdellä sivulla, eivät tarvitse olla mukana päätyylitiedostossa.
**DOM-läpikäynnit**: Selaimen täytyy rakentaa Document Object Model (DOM) kirjoittamasi koodin perusteella, joten hyvän sivuston suorituskyvyn kannalta on tärkeää pitää tagit minimissä ja käyttää vain sitä, mitä sivu tarvitsee. Esimerkiksi ylimääräinen CSS, joka liittyy sivuun, voidaan optimoida; tyylit, joita tarvitaan vain yhdellä sivulla, eivät tarvitse olla mukana päätyylitiedostossa.
**JavaScript**: Jokaisen JavaScript-kehittäjän tulisi tarkkailla 'render-blocking' -skriptejä, jotka täytyy ladata ennen kuin DOM voidaan käydä läpi ja piirtää selaimeen. Harkitse `defer`-attribuutin käyttöä inline-skripteissäsi (kuten Terrarium-moduulissa tehdään).
**JavaScript**: Jokaisen JavaScript-kehittäjän tulisi tarkkailla 'render-blocking' -skriptejä, jotka täytyy ladata ennen kuin DOM voidaan käydä läpi ja piirtää selaimeen. Harkitse `defer`-attribuutin käyttöä inline-skripteissä (kuten Terrarium-moduulissa).
✅ Kokeile joitakin sivustoja [Site Speed Test -sivustolla](https://www.webpagetest.org/) oppiaksesi lisää yleisistä tarkistuksista, joita tehdään sivuston suorituskyvyn määrittämiseksi.
@ -67,7 +67,7 @@ Nyt kun sinulla on käsitys siitä, miten selain renderöi lähettämäsi resurs
### Luo funktio värin laskemiseen
Työskentele tiedostossa `/src/index.js` ja lisää funktio nimeltä `calculateColor()` niiden `const`-muuttujien jälkeen, jotka asetit saadaksesi pääsyn DOM:iin:
Työskentele tiedostossa `/src/index.js` ja lisää funktio nimeltä `calculateColor()` niiden `const`-muuttujien jälkeen, jotka määritit saadaksesi pääsyn DOM:iin:
```JavaScript
function calculateColor(value) {
@ -88,7 +88,7 @@ function calculateColor(value) {
}
```
Mitä tässä tapahtuu? Syötät arvon (hiili-intensiteetti) API-kutsusta, jonka teit edellisessä oppitunnissa, ja sitten lasket, kuinka lähellä sen arvo on värien taulukossa esitettyä indeksiä. Sitten lähetät lähimmän värin arvon chrome runtimeen.
Mitä tässä tapahtuu? Syötät arvon (hiili-intensiteetti) API-kutsusta, jonka teit edellisessä oppitunnissa, ja sitten lasket, kuinka lähellä sen arvo on värien taulukossa esitettyä indeksiä. Sen jälkeen lähetät lähimmän värin arvon chrome runtimeen.
Chrome.runtime sisältää [API:n](https://developer.chrome.com/extensions/runtime), joka käsittelee kaikenlaisia taustatehtäviä, ja laajennuksesi hyödyntää sitä:
@ -96,7 +96,7 @@ Chrome.runtime sisältää [API:n](https://developer.chrome.com/extensions/runti
✅ Jos kehität tätä selaimen laajennusta Edgelle, voi olla yllättävää, että käytät chrome API:a. Uudemmat Edge-selaimen versiot toimivat Chromium-selainmoottorilla, joten voit hyödyntää näitä työkaluja.
> Huomaa, että jos haluat profiloida selaimen laajennusta, käynnistä kehittäjätyökalut laajennuksen sisältä, koska se on oma erillinen selaininstanssinsa.
> Huomaa, että jos haluat profiloida selaimen laajennusta, avaa kehittäjätyökalut laajennuksen sisältä, koska se on oma erillinen selaininstanssinsa.
### Aseta oletuskuvakkeen väri
@ -110,8 +110,7 @@ chrome.runtime.sendMessage({
},
});
```
### Kutsu funktio, suorita kutsu
### Kutsu funktio ja suorita kutsu
Seuraavaksi kutsu juuri luomasi funktio lisäämällä se C02Signal API:n palauttamaan lupaukseen:
@ -125,12 +124,12 @@ Ja lopuksi, tiedostossa `/dist/background.js`, lisää kuuntelija näille tausta
Tutki joitakin tapoja, joilla selaimet arvioivat verkkosuorituskykyä tarkastelemalla niiden verkkotyökalujen suorituskyky-välilehtiä. Löydätkö merkittäviä eroja?
Tutki joitakin tapoja, joilla selaimet arvioivat verkkosuorituskykyä tarkastelemalla niiden kehittäjätyökalujen suorituskyky-välilehtiä. Löydätkö merkittäviä eroja?
## Tehtävä
@ -173,4 +172,4 @@ Tutki joitakin tapoja, joilla selaimet arvioivat verkkosuorituskykyä tarkastele
---
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
# Projet d'extension de navigateur Partie 3 : Découvrez les tâches en arrière-plan et la performance
# Projet d'extension de navigateur Partie 3 : Découvrez les tâches en arrière-plan et les performances
## Quiz avant le cours
@ -15,23 +15,23 @@ CO_OP_TRANSLATOR_METADATA:
### Introduction
Dans les deux dernières leçons de ce module, vous avez appris à créer un formulaire et une zone d'affichage pour les données récupérées depuis une API. C'est une méthode très classique pour établir une présence sur le web. Vous avez même appris à gérer la récupération de données de manière asynchrone. Votre extension de navigateur est presque terminée.
Dans les deux dernières leçons de ce module, vous avez appris à créer un formulaire et une zone d'affichage pour les données récupérées depuis une API. C'est une méthode très courante pour établir une présence sur le web. Vous avez même appris à gérer la récupération de données de manière asynchrone. Votre extension de navigateur est presque terminée.
Il reste à gérer certaines tâches en arrière-plan, comme le rafraîchissement de la couleur de l'icône de l'extension. C'est donc le moment idéal pour parler de la manière dont le navigateur gère ce type de tâche. Réfléchissons à ces tâches dans le contexte de la performance de vos ressources web pendant leur développement.
Il reste à gérer certaines tâches en arrière-plan, comme le rafraîchissement de la couleur de l'icône de l'extension. C'est donc le moment idéal pour parler de la manière dont le navigateur gère ce type de tâche. Réfléchissons à ces tâches dans le contexte des performances de vos ressources web pendant leur développement.
## Les bases de la performance web
## Bases des performances web
> "La performance d'un site web repose sur deux aspects : la vitesse de chargement de la page et la rapidité d'exécution du code." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Les performances d'un site web concernent deux choses : la vitesse de chargement de la page et la rapidité d'exécution du code." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Le sujet de l'optimisation des sites web pour qu'ils soient extrêmement rapides sur tous types d'appareils, pour tous types d'utilisateurs, dans toutes sortes de situations, est, sans surprise, vaste. Voici quelques points à garder à l'esprit lorsque vous développez un projet web classique ou une extension de navigateur.
Le sujet de l'optimisation des performances des sites web pour qu'ils soient extrêmement rapides sur tous types d'appareils, pour tous types d'utilisateurs, dans toutes sortes de situations, est, sans surprise, vaste. Voici quelques points à garder à l'esprit lorsque vous développez un projet web classique ou une extension de navigateur.
La première chose à faire pour garantir l'efficacité de votre site est de collecter des données sur ses performances. Le premier endroit pour cela est dans les outils de développement de votre navigateur web. Dans Edge, vous pouvez sélectionner le bouton "Paramètres et plus" (l'icône des trois points en haut à droite du navigateur), puis naviguer vers Plus d'outils > Outils de développement et ouvrir l'onglet Performance. Vous pouvez également utiliser les raccourcis clavier `Ctrl` + `Shift` + `I` sur Windows ou `Option` + `Command` + `I` sur Mac pour ouvrir les outils de développement.
La première chose à faire pour garantir l'efficacité de votre site est de collecter des données sur ses performances. Le premier endroit pour cela est dans les outils de développement de votre navigateur web. Dans Edge, vous pouvez sélectionner le bouton "Paramètres et plus" (l'icône des trois points en haut à droite du navigateur), puis naviguer vers Plus d'outils > Outils de développement et ouvrir l'onglet Performances. Vous pouvez également utiliser les raccourcis clavier `Ctrl` + `Shift` + `I` sur Windows ou `Option` + `Command` + `I` sur Mac pour ouvrir les outils de développement.
L'onglet Performance contient un outil de profilage. Ouvrez un site web (essayez, par exemple, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) et cliquez sur le bouton 'Enregistrer', puis actualisez le site. Arrêtez l'enregistrement à tout moment, et vous pourrez voir les routines générées pour 'script', 'render' et 'paint' le site :
L'onglet Performances contient un outil de profilage. Ouvrez un site web (essayez, par exemple, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) et cliquez sur le bouton 'Enregistrer', puis actualisez le site. Arrêtez l'enregistrement à tout moment, et vous pourrez voir les routines générées pour 'script', 'render' et 'paint' le site :
✅ Consultez la [documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sur le panneau Performance dans Edge.
✅ Consultez la [documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sur le panneau Performances dans Edge.
> Astuce : pour obtenir une lecture précise du temps de démarrage de votre site, videz le cache de votre navigateur.
@ -39,29 +39,29 @@ Sélectionnez des éléments de la chronologie du profil pour zoomer sur les év
Obtenez un aperçu des performances de votre page en sélectionnant une partie de la chronologie du profil et en regardant le panneau de résumé :
Vérifiez le panneau du journal des événements pour voir si un événement a pris plus de 15 ms :
✅ Familiarisez-vous avec votre outil de profilage ! Ouvrez les outils de développement sur ce site et voyez s'il y a des goulots d'étranglement. Quel est l'actif qui se charge le plus lentement ? Le plus rapidement ?
✅ Familiarisez-vous avec votre profiler ! Ouvrez les outils de développement sur ce site et voyez s'il y a des goulots d'étranglement. Quel est l'actif qui se charge le plus lentement ? Le plus rapidement ?
## Vérifications de profilage
En général, il existe des "zones problématiques" que tout développeur web devrait surveiller lors de la création d'un site pour éviter les mauvaises surprises au moment de la mise en production.
**Taille des ressources** : Le web est devenu plus "lourd", et donc plus lent, ces dernières années. Une partie de ce poids est liée à l'utilisation des images.
**Tailles des ressources** : Le web est devenu plus "lourd", et donc plus lent, ces dernières années. Une partie de ce poids est liée à l'utilisation des images.
✅ Parcourez l'[Internet Archive](https://httparchive.org/reports/page-weight) pour une vue historique du poids des pages et plus encore.
Une bonne pratique consiste à s'assurer que vos images sont optimisées et livrées à la bonne taille et résolution pour vos utilisateurs.
**Traversées du DOM** : Le navigateur doit construire son modèle d'objet de document (DOM) en fonction du code que vous écrivez. Il est donc dans l'intérêt d'une bonne performance de page de garder vos balises minimales, en utilisant et en stylisant uniquement ce dont la page a besoin. À ce propos, le CSS excessif associé à une page pourrait être optimisé ; les styles nécessaires uniquement sur une page ne doivent pas être inclus dans la feuille de style principale, par exemple.
**Traversées du DOM** : Le navigateur doit construire son modèle d'objet de document (DOM) en fonction du code que vous écrivez. Il est donc dans l'intérêt de bonnes performances de page de garder vos balises minimales, en utilisant et en stylisant uniquement ce dont la page a besoin. À ce propos, le CSS excessif associé à une page pourrait être optimisé ; les styles qui doivent être utilisés uniquement sur une page n'ont pas besoin d'être inclus dans la feuille de style principale, par exemple.
**JavaScript** : Tout développeur JavaScript devrait surveiller les scripts qui bloquent le rendu et doivent être chargés avant que le reste du DOM puisse être traversé et peint dans le navigateur. Pensez à utiliser `defer` avec vos scripts en ligne (comme cela est fait dans le module Terrarium).
**JavaScript** : Tout développeur JavaScript devrait surveiller les scripts "bloquant le rendu" qui doivent être chargés avant que le reste du DOM puisse être traversé et peint dans le navigateur. Pensez à utiliser `defer` avec vos scripts inline (comme cela est fait dans le module Terrarium).
✅ Essayez quelques sites sur un [site de test de vitesse](https://www.webpagetest.org/) pour en savoir plus sur les vérifications courantes effectuées pour déterminer la performance d'un site.
✅ Essayez quelques sites sur un [site de test de vitesse](https://www.webpagetest.org/) pour en savoir plus sur les vérifications courantes effectuées pour déterminer les performances d'un site.
Maintenant que vous avez une idée de la manière dont le navigateur rend les ressources que vous lui envoyez, examinons les dernières étapes nécessaires pour terminer votre extension :
@ -94,13 +94,13 @@ Le chrome.runtime dispose [d'une API](https://developer.chrome.com/extensions/ru
> "Utilisez l'API chrome.runtime pour récupérer la page d'arrière-plan, retourner les détails du manifeste et écouter et répondre aux événements du cycle de vie de l'application ou de l'extension. Vous pouvez également utiliser cette API pour convertir le chemin relatif des URL en URL entièrement qualifiées."
✅ Si vous développez cette extension de navigateur pour Edge, cela pourrait vous surprendre d'utiliser une API Chrome. Les versions plus récentes du navigateur Edge fonctionnent sur le moteur de navigateur Chromium, ce qui vous permet de tirer parti de ces outils.
✅ Si vous développez cette extension de navigateur pour Edge, il pourrait vous surprendre d'utiliser une API Chrome. Les versions plus récentes du navigateur Edge fonctionnent sur le moteur de navigateur Chromium, ce qui vous permet de tirer parti de ces outils.
> Notez que si vous souhaitez profiler une extension de navigateur, lancez les outils de développement depuis l'extension elle-même, car elle constitue une instance de navigateur distincte.
### Définir une couleur d'icône par défaut
Maintenant, dans la fonction `init()`, définissez l'icône sur une couleur verte générique pour commencer en appelant à nouveau l'action `updateIcon` de Chrome :
Maintenant, dans la fonction `init()`, définissez l'icône sur une couleur verte générique au départ en appelant à nouveau l'action `updateIcon` de Chrome :
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Appeler la fonction, exécuter l'appel
Ensuite, appelez la fonction que vous venez de créer en l'ajoutant à la promesse retournée par l'API C02Signal :
Ensuite, appelez cette fonction que vous venez de créer en l'ajoutant à la promesse retournée par l'API C02Signal :
```JavaScript
//let CO2...
calculateColor(CO2);
```
Enfin, dans `/dist/background.js`, ajoutez l'écouteur pour ces appels d'action en arrière-plan :
Et enfin, dans `/dist/background.js`, ajoutez l'écouteur pour ces appels d'action en arrière-plan :
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,10 +140,9 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
Dans ce code, vous ajoutez un écouteur pour tout message envoyé au gestionnaire de tâches en arrière-plan. Si le message s'appelle 'updateIcon', alors le code suivant est exécuté pour dessiner une icône de la couleur appropriée en utilisant l'API Canvas.
Dans ce code, vous ajoutez un écouteur pour tout message envoyé au gestionnaire de tâches en arrière-plan. Si le message est appelé 'updateIcon', le code suivant est exécuté pour dessiner une icône de la couleur appropriée en utilisant l'API Canvas.
✅ Vous en apprendrez davantage sur l'API Canvas dans les [leçons du jeu spatial](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Vous en apprendrez davantage sur l'API Canvas dans les [leçons sur le jeu spatial](../../6-space-game/2-drawing-to-canvas/README.md).
Maintenant, reconstruisez votre extension (`npm run build`), actualisez et lancez votre extension, et observez le changement de couleur. Est-ce le bon moment pour faire une course ou laver la vaisselle ? Maintenant, vous le savez !
@ -154,7 +152,7 @@ Félicitations, vous avez créé une extension de navigateur utile et appris dav
## 🚀 Défi
Explorez des sites web open source qui existent depuis longtemps et, en vous basant sur leur historique GitHub, essayez de déterminer comment ils ont été optimisés au fil des années pour la performance, si cela a été fait. Quel est le problème le plus courant ?
Examinez certains sites web open source qui existent depuis longtemps et, en vous basant sur leur historique GitHub, voyez si vous pouvez déterminer comment ils ont été optimisés au fil des années pour les performances, si cela a été fait. Quel est le point de douleur le plus courant ?
## Quiz après le cours
@ -162,15 +160,15 @@ Explorez des sites web open source qui existent depuis longtemps et, en vous bas
## Révision et étude personnelle
Envisagez de vous inscrire à une [newsletter sur la performance](https://perf.email/).
Envisagez de vous inscrire à une [newsletter sur les performances](https://perf.email/).
Explorez certaines des façons dont les navigateurs évaluent la performance web en examinant les onglets de performance dans leurs outils web. Trouvez-vous des différences majeures ?
Explorez certaines des façons dont les navigateurs évaluent les performances web en examinant les onglets de performances dans leurs outils web. Trouvez-vous des différences majeures ?
## Devoir
[Analyser un site pour la performance](assignment.md)
[Analyser un site pour ses performances](assignment.md)
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de faire appel à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
# פרויקט הרחבת דפדפן חלק 3: למדו על משימות רקע וביצועים
## חידון לפני השיעור
## שאלון לפני השיעור
[חידון לפני השיעור](https://ff-quizzes.netlify.app/web/quiz/27)
[שאלון לפני השיעור](https://ff-quizzes.netlify.app/web/quiz/27)
### מבוא
### הקדמה
בשני השיעורים האחרונים של מודול זה, למדתם כיצד לבנות טופס ואזור תצוגה עבור נתונים שנמשכים מ-API. זהו אופן סטנדרטי מאוד ליצירת נוכחות ברשת. אפילו למדתם כיצד להתמודד עם משיכת נתונים בצורה אסינכרונית. ההרחבה שלכם לדפדפן כמעט מוכנה.
בשני השיעורים האחרונים של מודול זה, למדתם כיצד לבנות טופס ואזור תצוגה עבור נתונים שנמשכו מ-API. זהו דרך סטנדרטית מאוד ליצירת נוכחות ברשת. אפילו למדתם כיצד להתמודד עם משיכת נתונים באופן אסינכרוני. הרחבת הדפדפן שלכם כמעט מוכנה.
נותר לנהל כמה משימות רקע, כולל רענון הצבע של האייקון של ההרחבה, ולכן זה זמן מצוין לדבר על איך הדפדפן מנהל משימות מסוג זה. בואו נחשוב על המשימות הללו בהקשר של ביצועי הנכסים שלכם ברשת בזמן שאתם בונים אותם.
נותר לנהל כמה משימות רקע, כולל רענון צבע האייקון של ההרחבה, ולכן זהו זמן מצוין לדבר על איך הדפדפן מנהל סוג כזה של משימות. בואו נחשוב על משימות הדפדפן בהקשר של ביצועי הנכסים שלכם ברשת בזמן שאתם בונים אותם.
## יסודות ביצועי רשת
> "ביצועי אתר עוסקים בשני דברים: כמה מהר הדף נטען, וכמה מהר הקוד עליו רץ." -- [זאק גרוסברט](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "ביצועי אתר עוסקים בשני דברים: כמה מהר הדף נטען, וכמה מהר הקוד עליו פועל." -- [זאק גרוסברט](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
הנושא של איך להפוך את האתרים שלכם למהירים במיוחד על כל סוגי המכשירים, עבור כל סוגי המשתמשים ובכל סוגי המצבים, הוא כמובן רחב מאוד. הנה כמה נקודות שכדאי לזכור בזמן שאתם בונים פרויקט רשת סטנדרטי או הרחבת דפדפן.
הנושא של איך להפוך את האתרים שלכם למהירים במיוחד על כל סוגי המכשירים, עבור כל סוגי המשתמשים, בכל סוגי המצבים, הוא באופן לא מפתיע רחב מאוד. הנה כמה נקודות שכדאי לזכור בזמן שאתם בונים פרויקט רשת סטנדרטי או הרחבת דפדפן.
הדבר הראשון שעליכם לעשות כדי לוודא שהאתר שלכם פועל ביעילות הוא לאסוף נתונים על הביצועים שלו. המקום הראשון לעשות זאת הוא בכלי המפתחים של הדפדפן שלכם. ב-Edge, תוכלו לבחור את כפתור "הגדרות ועוד" (האייקון של שלוש הנקודות בפינה הימנית העליונה של הדפדפן), ואז לנווט אל כלים נוספים > כלי מפתחים ולפתוח את לשונית הביצועים. תוכלו גם להשתמש בקיצורי המקלדת `Ctrl` + `Shift` + `I` ב-Windows או `Option` + `Command` + `I` ב-Mac כדי לפתוח את כלי המפתחים.
הדבר הראשון שאתם צריכים לעשות כדי להבטיח שהאתר שלכם פועל בצורה יעילה הוא לאסוף נתונים על ביצועיו. המקום הראשון לעשות זאת הוא בכלי המפתחים של הדפדפן שלכם. ב-Edge, תוכלו לבחור את כפתור "הגדרות ועוד" (אייקון של שלוש נקודות בפינה הימנית העליונה של הדפדפן), ואז לנווט ל-כלים נוספים > כלי מפתחים ולפתוח את לשונית הביצועים. תוכלו גם להשתמש בקיצורי המקלדת `Ctrl` + `Shift` + `I` ב-Windows או `Option` + `Command` + `I` ב-Mac כדי לפתוח את כלי המפתחים.
לשונית הביצועים מכילה כלי פרופילינג. פתחו אתר (נסו, לדוגמה, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ולחצו על כפתור 'Record', ואז רעננו את האתר. עצרו את ההקלטה בכל זמן, ותוכלו לראות את התהליכים שנוצרו ל'סקריפט', 'רינדור' ו'ציור' של האתר:
לשונית הביצועים מכילה כלי פרופילינג. פתחו אתר (נסו, למשל, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ולחצו על כפתור 'Record', ואז רעננו את האתר. עצרו את ההקלטה בכל זמן, ותוכלו לראות את השגרות שנוצרות ל'סקריפט', 'רינדור' ו'ציור' של האתר:
✅ בקרו ב-[תיעוד של Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) על לשונית הביצועים ב-Edge
> טיפ: כדי לקבל קריאה מדויקת של זמן ההפעלה של האתר שלכם, נקו את מטמון הדפדפן שלכם
> טיפ: כדי לקבל קריאה מדויקת של זמן ההתחלה של האתר שלכם, נקו את מטמון הדפדפן שלכם
בחרו אלמנטים בציר הזמן של הפרופיל כדי להתמקד באירועים שמתרחשים בזמן שהדף נטען.
בחרו אלמנטים מציר הזמן של הפרופיל כדי להתמקד באירועים שמתרחשים בזמן טעינת הדף שלכם.
קבלו תמונת מצב של ביצועי הדף שלכם על ידי בחירת חלק מציר הזמן של הפרופיל והסתכלות על חלונית הסיכום:
@ -49,25 +49,25 @@ CO_OP_TRANSLATOR_METADATA:
## בדיקות פרופילינג
באופן כללי, ישנם כמה "אזורים בעייתיים" שכל מפתח רשת צריך לשים לב אליהם בזמן בניית אתר כדי להימנע מהפתעות לא נעימות כאשר מגיע הזמן לפרוס אותו לייצור.
באופן כללי, ישנם כמה "אזורים בעייתיים" שכל מפתח רשת צריך לשים לב אליהם בזמן בניית אתר כדי להימנע מהפתעות לא נעימות בזמן ההשקה לייצור.
**גדלי נכסים**: הרשת הפכה ל'כבדה' יותר, ולכן איטית יותר, בשנים האחרונות. חלק מהמשקל הזה קשור לשימוש בתמונות.
✅ עיינו ב-[ארכיון האינטרנט](https://httparchive.org/reports/page-weight) כדי לקבל מבט היסטורי על משקל דפים ועוד.
✅ הסתכלו דרך [ארכיון האינטרנט](https://httparchive.org/reports/page-weight) לתצוגה היסטורית של משקל דפים ועוד.
פרקטיקה טובה היא לוודא שהתמונות שלכם מותאמות ונשלחות בגודל וברזולוציה הנכונים עבור המשתמשים שלכם.
פרקטיקה טובה היא לוודא שהתמונות שלכם מותאמות ומסופקות בגודל וברזולוציה הנכונים עבור המשתמשים שלכם.
**מעברים ב-DOM**: הדפדפן צריך לבנות את מודל האובייקטים של המסמך (DOM) על בסיס הקוד שאתם כותבים, ולכן זה אינטרס של ביצועי דף טובים לשמור על התגים שלכם מינימליים, תוך שימוש ועיצוב רק מה שהדף צריך. בהקשר זה, CSS מיותר שקשור לדף יכול להיות מותאם; סגנונות שצריכים לשמש רק בדף אחד לא צריכים להיכלל בגיליון הסגנונות הראשי, לדוגמה.
**מעברים ב-DOM**: הדפדפן צריך לבנות את מודל האובייקטים של המסמך (DOM) על בסיס הקוד שאתם כותבים, ולכן זהו אינטרס של ביצועי דף טובים לשמור על התגים שלכם מינימליים, תוך שימוש ועיצוב רק מה שהדף צריך. בהקשר זה, CSS מיותר הקשור לדף יכול להיות מותאם; סגנונות שצריכים להיות בשימוש רק בדף אחד לא צריכים להיכלל בגיליון הסגנונות הראשי, למשל.
**JavaScript**: כל מפתח JavaScript צריך לשים לב לסקריפטים שחוסמים רינדור ושחייבים להיטען לפני שניתן לעבור ולצייר את שאר ה-DOM בדפדפן. שקלו להשתמש ב-`defer` עם הסקריפטים המוטמעים שלכם (כפי שנעשה במודול ה-Terrarium).
**JavaScript**: כל מפתח JavaScript צריך לשים לב לסקריפטים 'חוסמי רינדור' שחייבים להיטען לפני שהשאר של ה-DOM יכול להיבנות ולהיות מצויר בדפדפן. שקלו להשתמש ב-`defer` עם הסקריפטים המוטמעים שלכם (כפי שנעשה במודול הטרריום).
✅ נסו כמה אתרים באתר [בדיקת מהירות אתרים](https://www.webpagetest.org/) כדי ללמוד עוד על הבדיקות הנפוצות שנעשות כדי לקבוע ביצועי אתר.
✅ נסו כמה אתרים באתר [בדיקת מהירות אתר](https://www.webpagetest.org/) כדי ללמוד עוד על הבדיקות הנפוצות שנעשות כדי לקבוע ביצועי אתר.
עכשיו, כשיש לכם מושג איך הדפדפן מרנדר את הנכסים שאתם שולחים אליו, בואו נסתכל על הדברים האחרונים שאתם צריכים לעשות כדי להשלים את ההרחבה שלכם:
עכשיו כשיש לכם מושג איך הדפדפן מרנדר את הנכסים שאתם שולחים אליו, בואו נסתכל על הדברים האחרונים שאתם צריכים לעשות כדי להשלים את ההרחבה שלכם:
### יצירת פונקציה לחישוב צבע
### צרו פונקציה לחישוב צבע
עבדו ב-`/src/index.js`, הוסיפו פונקציה בשם `calculateColor()` אחרי סדרת משתני ה-`const` שהגדרתם כדי לקבל גישה ל-DOM:
עבדו ב-`/src/index.js`, הוסיפו פונקציה בשם `calculateColor()` אחרי סדרת משתני `const` שהגדרתם כדי לקבל גישה ל-DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
מה קורה כאן? אתם מעבירים ערך (עוצמת הפחמן) מהקריאה ל-API שביצעתם בשיעור הקודם, ואז מחשבים כמה הערך קרוב לאינדקס שמוצג במערך הצבעים. לאחר מכן אתם שולחים את ערך הצבע הקרוב ביותר ל-runtime של Chrome.
מה קורה כאן? אתם מעבירים ערך (עוצמת הפחמן) מהקריאה ל-API שהשלמתם בשיעור האחרון, ואז מחשבים כמה קרוב הערך שלו למדד המוצג במערך הצבעים. לאחר מכן אתם שולחים את ערך הצבע הקרוב ביותר ל-runtime של Chrome.
ל-runtime של Chrome יש [API](https://developer.chrome.com/extensions/runtime) שמטפל בכל מיני משימות רקע, וההרחבה שלכם משתמשת בו:
ל-runtime של Chrome יש [API](https://developer.chrome.com/extensions/runtime) שמטפל בכל מיני משימות רקע, וההרחבה שלכם מנצלת זאת:
> "השתמשו ב-API של chrome.runtime כדי לאחזר את דף הרקע, להחזיר פרטים על המניפסט ולהאזין ולהגיב לאירועים במחזור החיים של האפליקציה או ההרחבה. תוכלו גם להשתמש ב-API זה כדי להמיר את הנתיב היחסי של כתובות URL לכתובות URL מלאות."
> "השתמשו ב-API של chrome.runtime כדי לאחזר את דף הרקע, להחזיר פרטים על המניפסט, ולהאזין ולהגיב לאירועים במחזור החיים של האפליקציה או ההרחבה. תוכלו גם להשתמש ב-API זה כדי להמיר את הנתיב היחסי של כתובות URL לכתובות URL מוסמכות לחלוטין."
✅ אם אתם מפתחים את ההרחבה הזו עבור Edge, ייתכן שתופתעו שאתם משתמשים ב-API של Chrome. גרסאות הדפדפן החדשות יותר של Edge פועלות על מנוע הדפדפן Chromium, כך שתוכלו לנצל את הכלים הללו.
✅ אם אתם מפתחים את הרחבת הדפדפן הזו עבור Edge, זה עשוי להפתיע אתכם שאתם משתמשים ב-API של Chrome. גרסאות הדפדפן החדשות של Edge פועלות על מנוע הדפדפן Chromium, כך שתוכלו לנצל את הכלים הללו.
> שימו לב, אם אתם רוצים לבצע פרופילינג להרחבת דפדפן, הפעילו את כלי המפתחים מתוך ההרחבה עצמה, שכן היא מופעלת כדפדפן נפרד.
> שימו לב, אם אתם רוצים לבצע פרופילינג להרחבת דפדפן, פתחו את כלי המפתחים מתוך ההרחבה עצמה, שכן היא מופעלת כדפדפן נפרד.
### הגדרת צבע ברירת מחדל לאייקון
### הגדרת צבע אייקון ברירת מחדל
כעת, בפונקציה `init()`, הגדירו את האייקון כך שיהיה ירוק כללי כברירת מחדל על ידי קריאה לפעולת `updateIcon` של Chrome:
עכשיו, בפונקציה `init()`, הגדירו את האייקון להיות ירוק כללי בהתחלה על ידי קריאה לפעולת `updateIcon` של Chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### קריאה לפונקציה, ביצוע הקריאה
לאחר מכן, קראו לפונקציה שיצרתם על ידי הוספתה להבטחה שמוחזרת על ידי ה-API של C02Signal:
לאחר מכן, קראו לפונקציה שיצרתם על ידי הוספתה להבטחה המוחזרת על ידי ה-API של C02Signal:
```JavaScript
//let CO2...
calculateColor(CO2);
```
ולבסוף, ב-`/dist/background.js`, הוסיפו מאזין לקריאות פעולה אלו ברקע:
ולבסוף, ב-`/dist/background.js`, הוסיפו מאזין לקריאות פעולות הרקע הללו:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,36 +140,35 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
בקוד זה, אתם מוסיפים מאזין לכל הודעה שמגיעה למנהל משימות הרקע. אם היא נקראת 'updateIcon', אז הקוד הבא רץ כדי לצייר אייקון בצבע המתאים באמצעות Canvas API.
בקוד זה, אתם מוסיפים מאזין לכל הודעה שמגיעה למנהל משימות הרקע. אם היא נקראת 'updateIcon', אז הקוד הבא מופעל כדי לצייר אייקון בצבע המתאים באמצעות Canvas API.
✅ תלמדו עוד על Canvas API בשיעורי [משחק החלל](../../6-space-game/2-drawing-to-canvas/README.md).
כעת, בנו מחדש את ההרחבה שלכם (`npm run build`), רעננו והפעילו את ההרחבה שלכם, וצפו בצבע משתנה. האם זה זמן טוב לצאת לסידורים או לשטוף כלים? עכשיו אתם יודעים!
עכשיו, בנו מחדש את ההרחבה שלכם (`npm run build`), רעננו והפעילו את ההרחבה שלכם, וצפו בצבע משתנה. האם זה זמן טוב לצאת לסידורים או לשטוף כלים? עכשיו אתם יודעים!
ברכות, בניתם הרחבת דפדפן שימושית ולמדתם עוד על איך הדפדפן עובד ואיך לבצע פרופילינג לביצועיו.
מזל טוב, בניתם הרחבת דפדפן שימושית ולמדתם יותר על איך הדפדפן עובד ואיך לבצע פרופילינג לביצועיו.
---
## 🚀 אתגר
חקור כמה אתרים בקוד פתוח שקיימים כבר זמן רב, ועל סמך ההיסטוריה שלהם ב-GitHub, נסה לקבוע כיצד הם שופרו לאורך השנים מבחינת ביצועים, אם בכלל. מהו נקודת הכאב הנפוצה ביותר?
חקור כמה אתרים בקוד פתוח שהיו קיימים זמן רב, ועל סמך ההיסטוריה שלהם ב-GitHub, נסה לקבוע כיצד הם אופטימיזו לאורך השנים לביצועים, אם בכלל. מהו נקודת הכאב הנפוצה ביותר?
## חידון אחרי השיעור
## שאלון אחרי השיעור
[חידון אחרי השיעור](https://ff-quizzes.netlify.app/web/quiz/28)
[שאלון אחרי השיעור](https://ff-quizzes.netlify.app/web/quiz/28)
חקור כמה מהדרכים שבהן דפדפנים מודדים ביצועי רשת על ידי עיון בלשוניות הביצועים בכלי הרשת שלהם. האם מצאתם הבדלים משמעותיים?
חקור כמה מהדרכים שבהן דפדפנים מודדים ביצועי רשת על ידי הסתכלות דרך לשוניות הביצועים בכלי הרשת שלהם. האם מצאתם הבדלים משמעותיים?
## משימה
[נתחו אתר מבחינת ביצועים](assignment.md)
[נתחו אתר לביצועים](assignment.md)
---
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. אנו לא נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
इस मॉड्यूल के पिछले दो पाठों में, आपने सीखा कि API से डेटा प्राप्त करने के लिए एक फॉर्म और डिस्प्ले एरिया कैसे बनाया जाए। यह वेब पर एक वेब उपस्थिति बनाने का एक बहुत ही सामान्य तरीका है। आपने डेटा को असिंक्रोनस रूप से प्राप्त करने का तरीका भी सीखा। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
इस मॉड्यूल के पिछले दो पाठों में, आपने एक फॉर्म और डेटा प्रदर्शित करने के लिए एक क्षेत्र बनाने का तरीका सीखा, जिसे API से प्राप्त किया गया था। यह वेब पर एक वेब उपस्थिति बनाने का एक बहुत ही सामान्य तरीका है। आपने डेटा को असिंक्रोनस रूप से प्राप्त करने का तरीका भी सीखा। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
अब कुछ बैकग्राउंड टास्क को प्रबंधित करना बाकी है, जिसमें एक्सटेंशन के आइकन का रंग रिफ्रेश करना शामिल है। यह जानने का सही समय है कि ब्राउज़र इस प्रकार के कार्यों को कैसे प्रबंधित करता है। आइए इन ब्राउज़र टास्क को आपके वेब एसेट्स के प्रदर्शन के संदर्भ में सोचें जब आप इन्हें बना रहे हों।
@ -23,17 +23,17 @@ CO_OP_TRANSLATOR_METADATA:
> "वेबसाइट प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [ज़ैक ग्रॉसबार्ट](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
वेबसाइट्स को सभी प्रकार के उपकरणों, उपयोगकर्ताओं और परिस्थितियों में तेज़ बनाने के तरीके के बारे में चर्चा करना स्वाभाविक रूप से व्यापक है। यहां कुछ महत्वपूर्ण बिंदु दिए गए हैं जिन्हें आपको एक सामान्य वेब प्रोजेक्ट या ब्राउज़र एक्सटेंशन बनाते समय ध्यान में रखना चाहिए।
वेबसाइट्स को हर प्रकार के डिवाइस, हर प्रकार के उपयोगकर्ता, और हर प्रकार की स्थिति में तेज़ बनाने के तरीके का विषय काफी व्यापक है। यहां कुछ महत्वपूर्ण बिंदु दिए गए हैं जिन्हें आपको एक सामान्य वेब प्रोजेक्ट या ब्राउज़र एक्सटेंशन बनाते समय ध्यान में रखना चाहिए।
सबसे पहली चीज़ जो आपको सुनिश्चित करनी चाहिए कि आपकी साइट कुशलता से चल रही है, वह है इसके प्रदर्शन के बारे में डेटा इकट्ठा करना। इसका पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल्स में है। Edge में, आप "सेटिंग्स और अधिक" बटन (ब्राउज़र के शीर्ष दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools > Developer Tools पर नेविगेट करें और Performance टैब खोलें। आप Windows पर `Ctrl` + `Shift` + `I` या Mac पर `Option` + `Command` + `I` कीबोर्ड शॉर्टकट का उपयोग करके डेवलपर टूल्स खोल सकते हैं।
सबसे पहली चीज जो आपको सुनिश्चित करनी चाहिए कि आपकी साइट कुशलता से चल रही है, वह है इसके प्रदर्शन के बारे में डेटा इकट्ठा करना। इसका पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल्स में है। Edge में, आप "सेटिंग्स और अधिक" बटन (ब्राउज़र के ऊपर दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools > Developer Tools पर नेविगेट करें और Performance टैब खोलें। आप Windows पर `Ctrl` + `Shift` + `I` या Mac पर `Option` + `Command` + `I` कीबोर्ड शॉर्टकट का उपयोग करके डेवलपर टूल्स खोल सकते हैं।
Performance टैब में एक प्रोफाइलिंग टूल होता है। एक वेबसाइट खोलें (उदाहरण के लिए, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) और 'Record' बटन पर क्लिक करें, फिर साइट को रिफ्रेश करें। रिकॉर्डिंग को किसी भी समय रोकें, और आप उन रूटीन को देख पाएंगे जो साइट को 'स्क्रिप्ट', 'रेंडर', और 'पेंट' करने के लिए उत्पन्न होते हैं:
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) पर Edge के Performance पैनल के बारे में जानें
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) पर Edge के Performance पैनल के बारे में जानें।
> टिप: अपनी वेबसाइट के स्टार्टअप समय का सटीक रीडिंग प्राप्त करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
> टिप: अपनी वेबसाइट के स्टार्टअप समय का सटीक रीडिंग प्राप्त करने के लिए, अपने ब्राउज़र का कैश साफ़ करें।
प्रोफाइल टाइमलाइन के तत्वों का चयन करें ताकि आप उन घटनाओं को ज़ूम कर सकें जो आपके पेज लोड होने के दौरान होती हैं।
@ -49,19 +49,19 @@ Performance टैब में एक प्रोफाइलिंग टू
## प्रोफाइलिंग जांच
सामान्य तौर पर, कुछ "समस्या क्षेत्र" होते हैं जिन्हें हर वेब डेवलपर को साइट बनाते समय देखना चाहिए ताकि प्रोडक्शन में तैनात करते समय अप्रिय आश्चर्य से बचा जा सके।
सामान्य तौर पर, कुछ "समस्या क्षेत्र" होते हैं जिन्हें हर वेब डेवलपर को साइट बनाते समय ध्यान में रखना चाहिए ताकि प्रोडक्शन में तैनाती के समय अप्रिय आश्चर्य से बचा जा सके।
**एसेट साइज**: पिछले कुछ वर्षों में वेब 'भारी' और इसलिए धीमा हो गया है। इस वजन का कुछ हिस्सा इमेजेज के उपयोग से संबंधित है।
✅ [Internet Archive](https://httparchive.org/reports/page-weight) पर पेज वेट का ऐतिहासिक दृश्य और अधिक देखें।
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी इमेजेज ऑप्टिमाइज़्ड हैं और आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन में डिलीवर की गई हैं।
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी इमेजेज ऑप्टिमाइज़ की गई हैं और आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन में दी गई हैं।
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपना Document Object Model बनाना होता है, इसलिए अच्छे पेज प्रदर्शन के हित में आपके टैग्स को न्यूनतम रखना चाहिए, केवल वही उपयोग और स्टाइल करना चाहिए जो पेज को चाहिए। इस बिंदु पर, पेज से जुड़े अतिरिक्त CSS को ऑप्टिमाइज़ किया जा सकता है; उदाहरण के लिए, जो स्टाइल केवल एक पेज पर उपयोग किए जाने चाहिए, उन्हें मुख्य स्टाइल शीट में शामिल करने की आवश्यकता नहीं है।
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपना Document Object Model बनाना होता है, इसलिए अच्छे पेज प्रदर्शन के हित में अपने टैग्स को न्यूनतम रखना चाहिए, केवल वही उपयोग और स्टाइल करना चाहिए जो पेज को चाहिए। इस बिंदु पर, पेज से संबंधित अतिरिक्त CSS को ऑप्टिमाइज़ किया जा सकता है; उदाहरण के लिए, जो स्टाइल केवल एक पेज पर उपयोग किए जाने चाहिए, उन्हें मुख्य स्टाइल शीट में शामिल करने की आवश्यकता नहीं है।
**JavaScript**: हर JavaScript डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स के लिए देखना चाहिए जिन्हें DOM को ट्रैवर्स और ब्राउज़र में पेंट करने से पहले लोड करना आवश्यक है। अपने इनलाइन स्क्रिप्ट्स के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि Terrarium मॉड्यूल में किया गया है)।
**जावास्क्रिप्ट**: हर जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स पर ध्यान देना चाहिए जिन्हें DOM को ट्रैवर्स और ब्राउज़र में पेंट करने से पहले लोड करना आवश्यक है। अपने इनलाइन स्क्रिप्ट्स के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि Terrarium मॉड्यूल में किया गया है)।
✅ साइट प्रदर्शन निर्धारित करने के लिए किए गए सामान्य जांचों के बारे में अधिक जानने के लिए [Site Speed Test वेबसाइट](https://www.webpagetest.org/) पर कुछ साइट्स आज़माएं।
✅ साइट प्रदर्शन निर्धारित करने के लिए किए जाने वाले सामान्य जांचों के बारे में अधिक जानने के लिए [Site Speed Test वेबसाइट](https://www.webpagetest.org/) पर कुछ साइट्स आज़माएं।
अब जब आपको यह समझ आ गया है कि ब्राउज़र आपके द्वारा भेजे गए एसेट्स को कैसे रेंडर करता है, तो आइए उन अंतिम कुछ चीजों को देखें जो आपको अपने एक्सटेंशन को पूरा करने के लिए करनी हैं:
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
यहां क्या हो रहा है? आप एक मान (कार्बन इंटेंसिटी) पास करते हैं जो आपने पिछले पाठ में पूरा किए गए API कॉल से प्राप्त किया था, और फिर आप यह गणना करते हैं कि इसका मान रंगों की सूची में प्रस्तुत इंडेक्स के कितना करीब है। फिर आप उस सबसे करीब रंग मान को क्रोम रनटाइम पर भेजते हैं।
यहां क्या हो रहा है? आप एक मान (कार्बन इंटेंसिटी) पास करते हैं जिसे आपने पिछले पाठ में पूरा किए गए API कॉल से प्राप्त किया था, और फिर आप यह गणना करते हैं कि इसका मान colors array में प्रस्तुत इंडेक्स के कितना करीब है। फिर आप उस सबसे करीब रंग मान को chrome runtime पर भेजते हैं।
chrome.runtime में [एक API](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के बैकग्राउंड टास्क को संभालता है, और आपका एक्सटेंशन इसका उपयोग कर रहा है:
> "chrome.runtime API का उपयोग बैकग्राउंड पेज को प्राप्त करने, मैनिफेस्ट के बारे में विवरण लौटाने, और ऐप या एक्सटेंशन लाइफसाइकिल में घटनाओं को सुनने और प्रतिक्रिया देने के लिए करें। आप इस API का उपयोग URLs के सापेक्ष पथ को पूरी तरह से योग्य URLs में बदलने के लिए भी कर सकते हैं।"
> "chrome.runtime API का उपयोग बैकग्राउंड पेज को प्राप्त करने, मैनिफेस्ट के बारे में विवरण लौटाने, और ऐप या एक्सटेंशन लाइफसाइक्ल में घटनाओं के लिए सुनने और प्रतिक्रिया देने के लिए करें। आप इस API का उपयोग URLs के सापेक्ष पथ को पूरी तरह से योग्य URLs में बदलने के लिए भी कर सकते हैं।"
✅ यदि आप इस ब्राउज़र एक्सटेंशन को Edge के लिए विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम API का उपयोग कर रहे हैं। Edge ब्राउज़र के नए संस्करण Chromium ब्राउज़र इंजन पर चलते हैं, इसलिए आप इन टूल्स का लाभ उठा सकते हैं।
✅ यदि आप इस ब्राउज़र एक्सटेंशन को Edge के लिए विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप chrome API का उपयोग कर रहे हैं। Edge ब्राउज़र के नए संस्करण Chromium ब्राउज़र इंजन पर चलते हैं, इसलिए आप इन टूल्स का लाभ उठा सकते हैं।
> ध्यान दें, यदि आप ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो इसे एक्सटेंशन के भीतर से लॉन्च करें, क्योंकि यह अपना अलग ब्राउज़र इंस्टेंस है।
### डिफ़ॉल्ट आइकन रंग सेट करें
अब, `init()` फ़ंक्शन में, आइकन को शुरू में सामान्य हरे रंग में सेट करें, फिर से क्रोम के `updateIcon` एक्शन को कॉल करके:
अब, `init()` फ़ंक्शन में, आइकन को शुरू में सामान्य हरे रंग में सेट करें, फिर से chrome के `updateIcon` एक्शन को कॉल करके:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### फ़ंक्शन को कॉल करें, कॉल को निष्पादित करें
अगले चरण में, उस फ़ंक्शन को कॉल करें जिसे आपने अभी बनाया है, इसे C02Signal API द्वारा लौटाए गए प्रॉमिस में जोड़कर:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,11 +141,11 @@ function drawIcon(value) {
}
```
इस कोड में, आप बैकएंड टास्क मैनेजर पर आने वाले किसी भी संदेश के लिए एक लिसनर जोड़ रहे हैं। यदि इसे 'updateIcon' कहा जाता है, तो अगला कोड सही रंग का आइकन कैनवास API का उपयोग करके ड्रॉ करने के लिए चलाया जाता है।
इस कोड में, आप बैकएंड टास्क मैनेजर पर आने वाले किसी भी संदेश के लिए एक लिसनर जोड़ रहे हैं। यदि इसे 'updateIcon' कहा जाता है, तो अगला कोड सही रंग का आइकन बनाने के लिए Canvas API का उपयोग करके चलाया जाता है।
✅ आप कैनवास API के बारे में [Space Game पाठों](../../6-space-game/2-drawing-to-canvas/README.md) में अधिक जानेंगे।
✅ आप Canvas API के बारे में [Space Game पाठों](../../6-space-game/2-drawing-to-canvas/README.md) में अधिक जानेंगे।
अब, अपने एक्सटेंशन को फिर से बनाएं (`npm run build`), रिफ्रेश करें और अपने एक्सटेंशन को लॉन्च करें, और रंग बदलते हुए देखें। क्या यह काम करने का सही समय है या बर्तन धोने का? अब आप जानते हैं!
अब, अपने एक्सटेंशन को फिर से बनाएं (`npm run build`), इसे रिफ्रेश करें और लॉन्च करें, और रंग बदलते हुए देखें। क्या यह काम करने का सही समय है या बर्तन धोने का? अब आप जानते हैं!
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और यह भी सीखा है कि ब्राउज़र कैसे काम करता है और उसके प्रदर्शन को कैसे प्रोफाइल किया जाता है।
@ -154,7 +153,7 @@ function drawIcon(value) {
## 🚀 चुनौती
कुछ ओपन सोर्स वेबसाइटों की जांच करें जो लंबे समय से मौजूद हैं, और उनके GitHub इतिहास के आधार पर देखें कि क्या आप यह निर्धारित कर सकते हैं कि उन्हें वर्षों में प्रदर्शन के लिए कैसे ऑप्टिमाइज़ किया गया, यदि किया गया हो। सबसे सामान्य समस्या क्षेत्र क्या है?
कुछ ओपन सोर्स वेबसाइटों की जांच करें जो लंबे समय से मौजूद हैं, और उनके GitHub इतिहास के आधार पर देखें कि क्या आप यह निर्धारित कर सकते हैं कि उन्हें वर्षों में प्रदर्शन के लिए कैसे ऑप्टिमाइज़ किया गया था, यदि किया गया हो। सबसे सामान्य समस्या क्षेत्र क्या है?
## पोस्ट-लेक्चर क्विज़
@ -162,9 +161,9 @@ function drawIcon(value) {
## समीक्षा और स्व-अध्ययन
[प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें।
एक [प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें।
ब्राउज़र वेब प्रदर्शन को मापने के कुछ तरीकों की जांच करें, उनके वेब टूल्स में प्रदर्शन टैब को देखकर। क्या आपको कोई बड़ा अंतर दिखाई देता है?
ब्राउज़र द्वारा वेब प्रदर्शन को मापने के तरीकों की जांच करें, उनके वेब टूल्स में प्रदर्शन टैब को देखकर। क्या आपको कोई बड़ा अंतर दिखाई देता है?
U posljednje dvije lekcije ovog modula naučili ste kako izraditi obrazac i područje za prikaz podataka dohvaćenih s API-ja. To je vrlo standardan način stvaranja prisutnosti na webu. Čak ste naučili kako asinkrono dohvaćati podatke. Vaše proširenje za preglednik gotovo je dovršeno.
U posljednje dvije lekcije ovog modula naučili ste kako izraditi obrazac i područje za prikaz podataka dohvaćenih s API-ja. To je vrlo standardan način stvaranja web prisutnosti na internetu. Čak ste naučili kako asinkrono dohvaćati podatke. Vaše proširenje preglednika gotovo je dovršeno.
Preostaje upravljati nekim pozadinskim zadacima, uključujući osvježavanje boje ikone proširenja, pa je ovo sjajan trenutak za razgovor o tome kako preglednik upravlja ovom vrstom zadataka. Razmotrimo ove zadatke preglednika u kontekstu performansi vaših web resursa dok ih izrađujete.
Preostaje upravljati nekim pozadinskim zadacima, uključujući osvježavanje boje ikone proširenja, pa je ovo odličan trenutak za razgovor o tome kako preglednik upravlja takvim zadacima. Razmislimo o ovim zadacima preglednika u kontekstu performansi vaših web resursa dok ih izrađujete.
## Osnove web performansi
> "Performanse web stranice odnose se na dvije stvari: koliko brzo se stranica učitava i koliko brzo se kod na njoj izvršava." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Tema kako učiniti vaše web stranice nevjerojatno brzim na svim vrstama uređaja, za sve vrste korisnika i u svim vrstama situacija, očekivano je opsežna. Evo nekoliko točaka koje treba imati na umu dok izrađujete standardni web projekt ili proširenje za preglednik.
Tema kako učiniti vaše web stranice iznimno brzim na svim vrstama uređaja, za sve vrste korisnika, u svim vrstama situacija, očekivano je opsežna. Evo nekoliko točaka koje treba imati na umu dok gradite standardni web projekt ili proširenje preglednika.
Prva stvar koju trebate učiniti kako biste osigurali da vaša stranica radi učinkovito jest prikupiti podatke o njezinim performansama. Prvo mjesto za to su alati za razvojne programere vašeg web preglednika. U Edgeu možete odabrati gumb "Postavke i više" (ikona s tri točke u gornjem desnom kutu preglednika), zatim otići na Više alata > Alati za razvojne programere i otvoriti karticu Performanse. Također možete koristiti tipkovne prečace `Ctrl` + `Shift` + `I` na Windowsu ili `Option` + `Command` + `I` na Macu za otvaranje alata za razvojne programere.
Prva stvar koju trebate učiniti kako biste osigurali da vaša stranica radi učinkovito jest prikupiti podatke o njezinim performansama. Prvo mjesto za to su alati za razvojne programere vašeg web preglednika. U Edgeu možete odabrati gumb "Postavke i više" (ikona tri točke u gornjem desnom kutu preglednika), zatim navigirati do Više alata > Alati za razvojne programere i otvoriti karticu Performanse. Također možete koristiti tipkovne prečace `Ctrl` + `Shift` + `I` na Windowsu ili `Option` + `Command` + `I` na Macu za otvaranje alata za razvojne programere.
Kartica Performanse sadrži alat za profiliranje. Otvorite web stranicu (isprobajte, na primjer, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) i kliknite gumb 'Snimi', zatim osvježite stranicu. Zaustavite snimanje u bilo kojem trenutku i moći ćete vidjeti rutine koje se generiraju za 'skriptu', 'renderiranje' i 'crtanje' stranice:
Kartica Performanse sadrži alat za profiliranje. Otvorite web stranicu (isprobajte, na primjer, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) i kliknite gumb 'Record', zatim osvježite stranicu. Zaustavite snimanje u bilo kojem trenutku i moći ćete vidjeti rutine koje se generiraju za 'script', 'render' i 'paint' stranice:
✅ Posjetite [Microsoftovu dokumentaciju](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o kartici Performanse u Edgeu.
✅ Posjetite [Microsoft dokumentaciju](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o kartici Performanse u Edgeu.
> Savjet: kako biste dobili točno očitanje vremena pokretanja vaše stranice, očistite predmemoriju preglednika.
> Savjet: kako biste dobili točno očitanje vremena pokretanja vaše web stranice, očistite predmemoriju preglednika.
Odaberite elemente vremenske trake profila kako biste se približili događajima koji se događaju dok se vaša stranica učitava.
✅ Upoznajte svoj alat za profiliranje! Otvorite alate za razvojne programere na ovoj stranici i provjerite postoje li uska grla. Koji je resurs najsporiji za učitavanje? Najbrži?
✅ Upoznajte svoj alat za profiliranje! Otvorite alate za razvojne programere na ovoj stranici i provjerite postoje li uska grla. Koji je resurs najsporije učitavanje? Najbrže?
## Provjere profiliranja
Općenito, postoje neka "problematična područja" na koja bi svaki web programer trebao paziti prilikom izrade stranice kako bi izbjegao neugodna iznenađenja prilikom objave u produkciji.
Općenito, postoje neka "problematična područja" na koja bi svaki web programer trebao paziti prilikom izrade stranice kako bi izbjegao neugodne iznenađenja kada dođe vrijeme za implementaciju u produkciju.
**Veličine resursa**: Web je postao 'teži', a time i sporiji, tijekom posljednjih nekoliko godina. Dio te težine odnosi se na korištenje slika.
✅ Pregledajte [Internet arhivu](https://httparchive.org/reports/page-weight) za povijesni pregled težine stranica i više.
✅ Pregledajte [Internet Archive](https://httparchive.org/reports/page-weight) za povijesni pregled težine stranica i više.
Dobra praksa je osigurati da su vaše slike optimizirane i isporučene u odgovarajućoj veličini i rezoluciji za vaše korisnike.
**DOM traversali**: Preglednik mora izgraditi svoj Document Object Model na temelju koda koji napišete, pa je u interesu dobrih performansi stranice držati oznake minimalnima, koristeći i stilizirajući samo ono što stranica treba. Na primjer, višak CSS-a povezan s nekom stranicom mogao bi se optimizirati; stilovi koji se trebaju koristiti samo na jednoj stranici ne trebaju biti uključeni u glavnu datoteku sa stilovima.
**DOM pretraživanja**: Preglednik mora izgraditi svoj Document Object Model na temelju koda koji napišete, pa je u interesu dobrih performansi stranice držati oznake minimalnim, koristeći i stilizirajući samo ono što stranici treba. Na primjer, višak CSS-a povezanog sa stranicom mogao bi se optimizirati; stilovi koji se trebaju koristiti samo na jednoj stranici ne moraju biti uključeni u glavnu datoteku stilova.
**JavaScript**: Svaki JavaScript programer trebao bi paziti na 'skripte koje blokiraju renderiranje' i koje se moraju učitati prije nego što se ostatak DOM-a može obraditi i prikazati u pregledniku. Razmislite o korištenju `defer` s vašim inline skriptama (kao što je učinjeno u modulu Terrarium).
**JavaScript**: Svaki JavaScript programer trebao bi paziti na 'render-blocking' skripte koje se moraju učitati prije nego što se ostatak DOM-a može pretražiti i prikazati u pregledniku. Razmislite o korištenju `defer` s vašim inline skriptama (kao što je učinjeno u modulu Terrarium).
✅ Isprobajte neke stranice na [web stranici za testiranje brzine stranica](https://www.webpagetest.org/) kako biste saznali više o uobičajenim provjerama koje se provode za određivanje performansi stranice.
@ -67,7 +67,7 @@ Sada kada imate ideju o tome kako preglednik prikazuje resurse koje mu šaljete,
### Izradite funkciju za izračun boje
Radite u `/src/index.js` i dodajte funkciju pod nazivom `calculateColor()` nakon niza `const` varijabli koje ste postavili za pristup DOM-u:
Radite u `/src/index.js`, dodajte funkciju pod nazivom `calculateColor()` nakon niza `const` varijabli koje ste postavili za pristup DOM-u:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Što se ovdje događa? Prosljeđujete vrijednost (intenzitet ugljika) iz API poziva koji ste dovršili u posljednjoj lekciji, a zatim izračunavate koliko je njezina vrijednost blizu indeksa prikazanog u nizu boja. Zatim tu najbližu vrijednost boje šaljete chrome runtimeu.
Što se ovdje događa? Prosljeđujete vrijednost (intenzitet ugljika) iz API poziva koji ste dovršili u posljednjoj lekciji, a zatim izračunavate koliko je njegova vrijednost blizu indeksa prikazanog u polju boja. Zatim šaljete tu najbližu vrijednost boje preko chrome runtime-a.
Chrome.runtime ima [API](https://developer.chrome.com/extensions/runtime) koji upravlja svim vrstama pozadinskih zadataka, a vaše proširenje to koristi:
Chrome.runtime ima [API](https://developer.chrome.com/extensions/runtime) koji upravlja svim vrstama pozadinskih zadataka, a vaše proširenje ga koristi:
> "Koristite chrome.runtime API za dohvaćanje pozadinske stranice, vraćanje detalja o manifestu i osluškivanje i odgovaranje na događaje u životnom ciklusu aplikacije ili proširenja. Također možete koristiti ovaj API za pretvaranje relativne putanje URL-ova u potpuno kvalificirane URL-ove."
✅ Ako razvijate ovo proširenje za Edge, moglo bi vas iznenaditi da koristite chrome API. Novije verzije preglednika Edge rade na Chromium pregledničkom mehanizmu, tako da možete koristiti ove alate.
✅ Ako razvijate ovo proširenje preglednika za Edge, moglo bi vas iznenaditi da koristite chrome API. Novije verzije Edge preglednika rade na Chromium pregledničkom motoru, pa možete koristiti ove alate.
> Napomena: ako želite profilirati proširenje preglednika, pokrenite alate za razvojne programere unutar samog proširenja, jer je ono zasebna instanca preglednika.
> Napomena: ako želite profilirati proširenje preglednika, pokrenite alate za razvojne programere unutar samog proširenja, jer je ono vlastita zasebna instanca preglednika.
### Postavite zadanu boju ikone
Sada, u funkciji `init()`, postavite ikonu na generičku zelenu boju za početak tako što ćete ponovno pozvati chromeovu akciju `updateIcon`:
Sada, u funkciji `init()`, postavite ikonu na generičku zelenu boju za početak tako da ponovno pozovete chromeovu akciju `updateIcon`:
```JavaScript
chrome.runtime.sendMessage({
@ -110,10 +110,9 @@ chrome.runtime.sendMessage({
},
});
```
### Pozovite funkciju, izvršite poziv
Zatim pozovite tu funkciju koju ste upravo stvorili dodajući je obećanju koje vraća C02Signal API:
Zatim, pozovite tu funkciju koju ste upravo stvorili dodavanjem u obećanje koje vraća C02Signal API:
```JavaScript
//let CO2...
@ -125,12 +124,12 @@ I na kraju, u `/dist/background.js`, dodajte osluškivač za ove pozadinske pozi
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,19 +141,19 @@ function drawIcon(value) {
}
```
U ovom kodu dodajete osluškivač za sve poruke koje dolaze upravitelju pozadinskih zadataka. Ako se zove 'updateIcon', tada se pokreće sljedeći kod za crtanje ikone odgovarajuće boje koristeći Canvas API.
U ovom kodu dodajete osluškivač za sve poruke koje dolaze upravitelju pozadinskih zadataka. Ako se zove 'updateIcon', tada se sljedeći kod izvršava kako bi nacrtao ikonu odgovarajuće boje koristeći Canvas API.
✅ Više o Canvas API-ju naučit ćete u [lekcijama o svemirskoj igri](../../6-space-game/2-drawing-to-canvas/README.md).
Sada ponovno izgradite svoje proširenje (`npm run build`), osvježite i pokrenite svoje proširenje i gledajte kako se boja mijenja. Je li pravo vrijeme za obaviti neki posao ili oprati suđe? Sada znate!
Sada ponovno izgradite svoje proširenje (`npm run build`), osvježite i pokrenite svoje proširenje te promatrajte promjenu boje. Je li pravo vrijeme za obaviti neki posao ili oprati suđe? Sada znate!
Čestitamo, izradili ste korisno proširenje za preglednik i naučili više o tome kako preglednik radi i kako profilirati njegove performanse.
Čestitamo, izradili ste korisno proširenje preglednika i naučili više o tome kako preglednik radi i kako profilirati njegove performanse.
---
## 🚀 Izazov
Istražite neke open source web stranice koje postoje već dugo vremena i, na temelju njihove povijesti na GitHubu, pokušajte utvrditi kako su optimizirane tijekom godina za performanse, ako uopće jesu. Koja je najčešća problematična točka?
Istražite neke open source web stranice koje postoje već dugo vremena i, na temelju njihove povijesti na GitHubu, pokušajte utvrditi kako su optimizirane tijekom godina za performanse, ako uopće jesu. Koja je najčešća bolna točka?
## Kviz nakon predavanja
@ -164,7 +163,7 @@ Istražite neke open source web stranice koje postoje već dugo vremena i, na te
Razmislite o prijavi na [newsletter o performansama](https://perf.email/).
Istražite neke od načina na koje preglednici procjenjuju web performanse pregledavajući kartice performansi u njihovim alatima za razvojne programere. Primjećujete li neke veće razlike?
Istražite neke načine na koje preglednici procjenjuju web performanse pregledavanjem kartica performansi u njihovim web alatima. Primjećujete li neke velike razlike?
## Zadatak
@ -173,4 +172,4 @@ Istražite neke od načina na koje preglednici procjenjuju web performanse pregl
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
A modul előző két leckéjében megtanultad, hogyan készíts egy űrlapot és egy megjelenítési területet az API-ból lekért adatok számára. Ez egy nagyon szokványos módja annak, hogy webes jelenlétet hozz létre. Még azt is megtanultad, hogyan kezeld az adatok aszinkron lekérését. A böngészőbővítményed már majdnem kész.
A modul előző két leckéjében megtanultad, hogyan készíts egy űrlapot és egy megjelenítési területet az API-ból lekért adatok számára. Ez egy nagyon szokványos módja annak, hogy webes jelenlétet hozz létre az interneten. Még azt is megtanultad, hogyan kezeld az adatok aszinkron lekérését. A böngészőbővítményed már majdnem kész.
Már csak néhány háttérfeladatot kell kezelni, például a bővítmény ikon színének frissítését. Ezért ez egy remek alkalom arra, hogy beszéljünk arról, hogyan kezeli a böngésző az ilyen típusú feladatokat. Gondolkodjunk el ezekről a böngészőfeladatokról a webes eszközeid teljesítményének kontextusában, miközben építed őket.
Már csak néhány háttérfeladatot kell kezelni, például a bővítmény ikon színének frissítését, így ez egy remek alkalom arra, hogy beszéljünk arról, hogyan kezeli a böngésző az ilyen típusú feladatokat. Gondolkodjunk el ezekről a böngészőfeladatokról a webes eszközeid teljesítményének kontextusában, miközben építed őket.
## Webes teljesítmény alapjai
> "A weboldal teljesítménye két dologról szól: milyen gyorsan töltődik be az oldal, és milyen gyorsan fut rajta a kód." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Az a téma, hogy hogyan teheted a weboldalaidat villámgyorssá mindenféle eszközön, mindenféle felhasználó számára, mindenféle helyzetben, nem meglepő módon rendkívül széleskörű. Íme néhány szempont, amit érdemes szem előtt tartani, akár egy szokványos webes projektet, akár egy böngészőbővítményt építesz.
Az a téma, hogy hogyan lehet a weboldalakat villámgyorssá tenni mindenféle eszközön, mindenféle felhasználó számára, mindenféle helyzetben, nem meglepő módon hatalmas. Íme néhány szempont, amit érdemes szem előtt tartani, amikor egy szokványos webes projektet vagy böngészőbővítményt építesz.
Az első dolog, amit meg kell tenned annak érdekében, hogy biztosítsd weboldalad hatékony működését, az az, hogy adatokat gyűjtesz annak teljesítményéről. Az első hely, ahol ezt megteheted, a böngésződ fejlesztői eszközei. Edge böngészőben válaszd a "Beállítások és továbbiak" gombot (a három pont ikon a böngésző jobb felső sarkában), majd navigálj a További eszközök > Fejlesztői eszközök menüpontra, és nyisd meg a Teljesítmény lapot. Windows rendszeren a `Ctrl` + `Shift` + `I`, Mac-en pedig az `Option` + `Command` + `I` billentyűkombinációval is megnyithatod a fejlesztői eszközöket.
Az első dolog, amit meg kell tenned annak érdekében, hogy biztosítsd a weboldalad hatékony működését, az, hogy adatokat gyűjtesz a teljesítményéről. Az első hely, ahol ezt megteheted, a böngésződ fejlesztői eszközei. Edge-ben válaszd ki a "Beállítások és továbbiak" gombot (a három pont ikon a böngésző jobb felső sarkában), majd navigálj a További eszközök > Fejlesztői eszközök menüpontra, és nyisd meg a Teljesítmény lapot. Windows rendszeren a `Ctrl` + `Shift` + `I`, Mac-en pedig az `Option` + `Command` + `I` billentyűkombinációval is megnyithatod a fejlesztői eszközöket.
A Teljesítmény lap tartalmaz egy Profilozó eszközt. Nyiss meg egy weboldalt (például próbáld ki: [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)), és kattints a 'Felvétel' gombra, majd frissítsd az oldalt. Bármikor leállíthatod a felvételt, és megtekintheted azokat a rutinokat, amelyek a 'script', 'render' és 'paint' folyamatokat generálják az oldalon:
✅ Látogasd meg a [Microsoft Dokumentációt](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) az Edge Teljesítmény paneljéről
> Tipp: hogy pontos képet kapj weboldalad indítási idejéről, töröld a böngésződ gyorsítótárát
> Tipp: hogy pontos képet kapj a weboldalad indítási idejéről, töröld a böngésződ gyorsítótárát
Válassz ki elemeket a profil idővonalából, hogy nagyítsd azokat az eseményeket, amelyek az oldal betöltése közben történnek.
Válassz ki elemeket a profil idővonalából, hogy ráközelíts azokra az eseményekre, amelyek az oldal betöltése közben történnek.
Készíts pillanatképet az oldal teljesítményéről úgy, hogy kiválasztasz egy részt a profil idővonalából, és megnézed az összefoglaló panelt:
✅ Ismerd meg a profilozódat! Nyisd meg a fejlesztői eszközöket ezen az oldalon, és nézd meg, vannak-e szűk keresztmetszetek. Mi a leglassabban betöltődő eszköz? A leggyorsabb?
## Profilozási ellenőrzések
Általánosságban elmondható, hogy vannak bizonyos "problématerületek", amelyeket minden webfejlesztőnek figyelnie kell, amikor weboldalt épít, hogy elkerülje a kellemetlen meglepetéseket a termelési környezetbe való telepítéskor.
Általánosságban elmondható, hogy vannak bizonyos "problémás területek", amelyeket minden webfejlesztőnek figyelembe kell vennie, amikor weboldalt épít, hogy elkerülje a kellemetlen meglepetéseket, amikor eljön az idő a produkciós környezetbe való telepítésre.
**Eszközméretek**: Az internet az elmúlt években "nehezebbé" és így lassabbá vált. Ennek a súlynak egy része a képek használatával kapcsolatos.
**Eszközméretek**: Az internet az elmúlt években "nehezebbé" és így lassabbá vált. Ennek a súlynak egy része a képek használatával függ össze.
✅ Nézz körül az [Internet Archívumban](https://httparchive.org/reports/page-weight) egy történeti áttekintésért az oldalak súlyáról és egyebekről.
Jó gyakorlat, ha biztosítod, hogy a képeid optimalizáltak legyenek, és a megfelelő méretben és felbontásban kerüljenek a felhasználókhoz.
**DOM bejárások**: A böngészőnek fel kell építenie a Dokumentum Objektum Modelljét az általad írt kód alapján, ezért a jó oldal teljesítmény érdekében érdemes minimalizálni a tageket, csak azt használni és formázni, amire az oldalnak szüksége van. Például az oldalhoz kapcsolódó felesleges CSS optimalizálható; azokat a stílusokat, amelyeket csak egy oldalon kell használni, nem szükséges a fő stíluslapba belefoglalni.
**DOM bejárások**: A böngészőnek fel kell építenie a Dokumentum Objektum Modelljét az általad írt kód alapján, így a jó oldal teljesítmény érdekében érdemes minimalizálni a tageket, csak azt használni és formázni, amire az oldalnak szüksége van. Ehhez kapcsolódóan az oldalhoz tartozó felesleges CSS optimalizálható; például azok a stílusok, amelyek csak egy oldalon szükségesek, nem kell, hogy a fő stíluslapban szerepeljenek.
**JavaScript**: Minden JavaScript fejlesztőnek figyelnie kell azokra a 'render-blokkoló' szkriptekre, amelyeket be kell tölteni, mielőtt a DOM többi része bejárható és megjeleníthető lenne a böngészőben. Fontold meg a `defer` használatát az inline szkriptekkel (ahogy a Terrárium modulban is történik).
✅ Próbálj ki néhány weboldalt egy [Weboldal sebességteszt weboldalon](https://www.webpagetest.org/), hogy többet megtudj azokról a gyakori ellenőrzésekről, amelyeket az oldal teljesítményének meghatározására végeznek.
✅ Próbálj ki néhány weboldalt egy [Weboldal Sebességteszt weboldalon](https://www.webpagetest.org/), hogy többet megtudj azokról a gyakori ellenőrzésekről, amelyeket az oldal teljesítményének meghatározására végeznek.
Most, hogy van elképzelésed arról, hogyan rendereli a böngésző az általad küldött eszközöket, nézzük meg az utolsó néhány dolgot, amit meg kell tenned a bővítményed befejezéséhez:
Most, hogy van elképzelésed arról, hogyan rendereli a böngésző azokat az eszközöket, amelyeket küldesz neki, nézzük meg az utolsó néhány dolgot, amit meg kell tenned a bővítményed befejezéséhez:
### Szín kiszámítására szolgáló függvény létrehozása
@ -88,11 +88,11 @@ function calculateColor(value) {
}
```
Mi történik itt? Átadsz egy értéket (a szén-dioxid intenzitást) az előző leckében befejezett API-hívásból, majd kiszámítod, hogy az értéke mennyire közel áll a színek tömbjében bemutatott indexhez. Ezután elküldöd ezt a legközelebbi színértéket a chrome runtime-nak.
Mi történik itt? Átadsz egy értéket (a szén-dioxid intenzitást) az előző leckében befejezett API-hívásból, majd kiszámítod, hogy az értéke mennyire van közel a színek tömbjében bemutatott indexhez. Ezután elküldöd a legközelebbi színértéket a chrome runtime-nak.
A chrome.runtime rendelkezik [egy API-val](https://developer.chrome.com/extensions/runtime), amely mindenféle háttérfeladatot kezel, és a bővítményed ezt használja:
> "Használd a chrome.runtime API-t a háttéroldal lekérésére, a manifest részleteinek visszaadására, valamint az alkalmazás vagy bővítmény életciklusában bekövetkező események figyelésére és válaszadására. Ezzel az API-val a relatív URL-eket teljesen kvalifikált URL-ekké is konvertálhatod."
> "Használd a chrome.runtime API-t a háttéroldal lekérésére, a manifest részleteinek visszaadására, valamint az alkalmazás vagy bővítmény életciklusában bekövetkező események figyelésére és kezelésére. Ezzel az API-val relatív URL-eket teljesen kvalifikált URL-ekké is konvertálhatsz."
✅ Ha ezt a böngészőbővítményt Edge-re fejleszted, meglephet, hogy chrome API-t használsz. Az újabb Edge böngészőverziók a Chromium böngészőmotoron futnak, így kihasználhatod ezeket az eszközöket.
@ -100,7 +100,7 @@ A chrome.runtime rendelkezik [egy API-val](https://developer.chrome.com/extensio
### Alapértelmezett ikon szín beállítása
Most az `init()` függvényben állítsd be az ikont egy általános zöld színre azáltal, hogy ismét meghívod a chrome `updateIcon` műveletét:
Most az `init()` függvényben állítsd az ikont általános zöldre, kezdésként ismét a chrome `updateIcon` műveletének hívásával:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### A függvény meghívása, a hívás végrehajtása
Ezután hívd meg az előbb létrehozott függvényt azzal, hogy hozzáadod a C02Signal API által visszaadott ígérethez:
Ezután hívd meg az imént létrehozott függvényt azzal, hogy hozzáadod a C02Signal API által visszaadott ígérethez:
```JavaScript
//let CO2...
calculateColor(CO2);
```
Végül pedig a `/dist/background.js` fájlban add hozzá a háttérműveleti hívásokhoz tartozó figyelőt:
Végül a `/dist/background.js` fájlban add hozzá a háttérműveleti hívásokhoz tartozó figyelőt:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,20 +140,19 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
Ebben a kódban hozzáadsz egy figyelőt minden olyan üzenethez, amely a háttérfeladat-kezelőhöz érkezik. Ha az üzenet neve 'updateIcon', akkor a következő kód fut le, amely a megfelelő színű ikont rajzolja meg a Canvas API segítségével.
Ebben a kódban hozzáadsz egy figyelőt minden olyan üzenethez, amely a háttérfeladat-kezelőhöz érkezik. Ha az 'updateIcon' nevet kapja, akkor a következő kód fut le, amely a megfelelő színű ikont rajzolja meg a Canvas API segítségével.
✅ A Canvas API-ról többet fogsz tanulni a [Űrjáték leckékben](../../6-space-game/2-drawing-to-canvas/README.md).
Most építsd újra a bővítményedet (`npm run build`), frissítsd és indítsd el a bővítményt, és figyeld meg, ahogy a szín változik. Jó alkalom egy kis szünetre vagy házimunkára? Most már tudod!
Most építsd újra a bővítményedet (`npm run build`), frissítsd és indítsd el a bővítményt, és figyeld meg, hogyan változik a színe. Jó alkalom mosogatni vagy elintézni valamit? Most már tudod!
Gratulálok, hasznos böngészőbővítményt készítettél, és többet tanultál arról, hogyan működik a böngésző, valamint hogyan profilozd annak teljesítményét.
Gratulálok, hasznos böngészőbővítményt készítettél, és többet tanultál arról, hogyan működik a böngésző, és hogyan lehet profilozni a teljesítményét.
---
## 🚀 Kihívás
Vizsgálj meg néhány nyílt forráskódú weboldalt, amelyek már régóta léteznek, és a GitHub történetük alapján próbáld meg meghatározni, hogyan optimalizálták őket az évek során a teljesítmény érdekében, ha egyáltalán optimalizálták. Mi a leggyakoribb probléma?
Vizsgálj meg néhány nyílt forráskódú weboldalt, amelyek már régóta léteznek, és a GitHub történetük alapján próbáld meg meghatározni, hogyan optimalizálták őket az évek során a teljesítmény érdekében, ha egyáltalán. Mi a leggyakoribb problémás pont?
## Előadás utáni kvíz
@ -164,13 +162,13 @@ Vizsgálj meg néhány nyílt forráskódú weboldalt, amelyek már régóta lé
Fontold meg, hogy feliratkozol egy [teljesítmény hírlevélre](https://perf.email/)
Vizsgáld meg, hogy a böngészők milyen módokon mérik a webes teljesítményt, ha átnézed a fejlesztői eszközök teljesítmény lapjait. Találsz jelentős különbségeket?
Vizsgáld meg, hogy a böngészők milyen módon mérik a webes teljesítményt, ha átnézed a fejlesztői eszközök teljesítmény lapjait. Találsz jelentős különbségeket?
## Feladat
[Elemezz egy weboldalt teljesítmény szempontjából](assignment.md)
[Elemezz egy weboldalt a teljesítmény szempontjából](assignment.md)
---
**Felelősség kizárása**:
Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.
Dalam dua pelajaran terakhir dari modul ini, Anda telah belajar cara membuat formulir dan area tampilan untuk data yang diambil dari API. Ini adalah cara yang sangat standar untuk menciptakan kehadiran web di internet. Anda bahkan telah belajar cara menangani pengambilan data secara asinkron. Ekstensi browser Anda hampir selesai.
@ -29,7 +29,7 @@ Hal pertama yang perlu Anda lakukan untuk memastikan situs Anda berjalan dengan
Tab Performa berisi alat Profiling. Buka sebuah situs web (coba, misalnya, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) dan klik tombol 'Record', lalu segarkan situs tersebut. Hentikan rekaman kapan saja, dan Anda akan dapat melihat rutinitas yang dihasilkan untuk 'script', 'render', dan 'paint' situs tersebut:
✅ Kunjungi [Dokumentasi Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tentang panel Performa di Edge
@ -39,27 +39,27 @@ Pilih elemen dari garis waktu profil untuk memperbesar peristiwa yang terjadi sa
Dapatkan snapshot performa halaman Anda dengan memilih bagian dari garis waktu profil dan melihat panel ringkasan:
✅ Kenali profiler Anda! Buka alat pengembang di situs ini dan lihat apakah ada hambatan. Apa aset yang paling lambat dimuat? Yang tercepat?
## Pemeriksaan Profiling
Secara umum, ada beberapa "area masalah" yang harus diperhatikan setiap pengembang web saat membangun situs untuk menghindari kejutan buruk saat tiba waktunya untuk diterapkan ke produksi.
Secara umum, ada beberapa "area masalah" yang harus diperhatikan setiap pengembang web saat membangun situs untuk menghindari kejutan buruk saat tiba waktunya untuk menerapkan ke produksi.
**Ukuran aset**: Web menjadi lebih 'berat', dan dengan demikian lebih lambat, selama beberapa tahun terakhir. Sebagian dari berat ini berkaitan dengan penggunaan gambar.
**Ukuran aset**: Web menjadi 'lebih berat', dan dengan demikian lebih lambat, selama beberapa tahun terakhir. Sebagian dari berat ini berkaitan dengan penggunaan gambar.
✅ Lihat melalui [Internet Archive](https://httparchive.org/reports/page-weight) untuk pandangan historis tentang berat halaman dan lainnya.
Praktik yang baik adalah memastikan bahwa gambar Anda dioptimalkan dan disampaikan pada ukuran dan resolusi yang tepat untuk pengguna Anda.
**Traversals DOM**: Browser harus membangun Model Objek Dokumen berdasarkan kode yang Anda tulis, jadi demi performa halaman yang baik, penting untuk menjaga tag seminimal mungkin, hanya menggunakan dan menata apa yang dibutuhkan halaman. Dalam hal ini, CSS berlebih yang terkait dengan halaman dapat dioptimalkan; gaya yang hanya perlu digunakan pada satu halaman tidak perlu dimasukkan dalam lembar gaya utama, misalnya.
**Traversals DOM**: Browser harus membangun Model Objek Dokumen berdasarkan kode yang Anda tulis, jadi demi performa halaman yang baik, penting untuk menjaga tag seminimal mungkin, hanya menggunakan dan menata apa yang dibutuhkan halaman. Dalam hal ini, CSS berlebih yang terkait dengan halaman dapat dioptimalkan; gaya yang hanya perlu digunakan di satu halaman tidak perlu dimasukkan dalam lembar gaya utama, misalnya.
**JavaScript**: Setiap pengembang JavaScript harus memperhatikan skrip 'render-blocking' yang harus dimuat sebelum sisa DOM dapat ditelusuri dan di-paint ke browser. Pertimbangkan untuk menggunakan `defer` dengan skrip inline Anda (seperti yang dilakukan dalam modul Terrarium).
**JavaScript**: Setiap pengembang JavaScript harus memperhatikan skrip 'render-blocking' yang harus dimuat sebelum sisa DOM dapat ditelusuri dan dilukis ke browser. Pertimbangkan untuk menggunakan `defer` dengan skrip inline Anda (seperti yang dilakukan dalam modul Terrarium).
✅ Coba beberapa situs di [Situs Uji Kecepatan](https://www.webpagetest.org/) untuk mempelajari lebih lanjut tentang pemeriksaan umum yang dilakukan untuk menentukan performa situs.
@ -88,7 +88,7 @@ function calculateColor(value) {
}
```
Apa yang terjadi di sini? Anda memasukkan nilai (intensitas karbon) dari panggilan API yang Anda selesaikan di pelajaran terakhir, lalu Anda menghitung seberapa dekat nilainya dengan indeks yang disajikan dalam array warna. Kemudian Anda mengirimkan nilai warna terdekat tersebut ke runtime chrome.
Apa yang terjadi di sini? Anda memasukkan nilai (intensitas karbon) dari panggilan API yang Anda selesaikan di pelajaran terakhir, lalu Anda menghitung seberapa dekat nilainya dengan indeks yang disajikan dalam array warna. Kemudian Anda mengirimkan nilai warna terdekat itu ke runtime chrome.
Chrome.runtime memiliki [API](https://developer.chrome.com/extensions/runtime) yang menangani berbagai jenis tugas latar belakang, dan ekstensi Anda memanfaatkan itu:
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Panggil fungsi, eksekusi panggilan
Selanjutnya, panggil fungsi yang baru saja Anda buat dengan menambahkannya ke promise yang dikembalikan oleh API C02Signal:
@ -125,12 +124,12 @@ Dan akhirnya, di `/dist/background.js`, tambahkan pendengar untuk panggilan aksi
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -154,11 +153,11 @@ Selamat, Anda telah membangun ekstensi browser yang berguna dan belajar lebih ba
## 🚀 Tantangan
Selidiki beberapa situs web open source yang telah ada sejak lama, dan, berdasarkan riwayat GitHub mereka, lihat apakah Anda dapat menentukan bagaimana mereka dioptimalkan selama bertahun-tahun untuk performa, jika ada. Apa titik masalah yang paling umum?
Selidiki beberapa situs web open source yang telah ada sejak lama, dan, berdasarkan sejarah GitHub mereka, lihat apakah Anda dapat menentukan bagaimana mereka dioptimalkan selama bertahun-tahun untuk performa, jika ada. Apa titik masalah yang paling umum?
## Kuis Setelah Pelajaran
## Kuis Pasca-Pelajaran
[Kuis setelah pelajaran](https://ff-quizzes.netlify.app/web/quiz/28)
@ -173,4 +172,4 @@ Selidiki beberapa cara browser mengukur performa web dengan melihat melalui tab
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa terjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
Nelle ultime due lezioni di questo modulo, hai imparato a costruire un modulo e un'area di visualizzazione per i dati recuperati da un'API. È un modo molto standard di creare una presenza sul web. Hai anche imparato a gestire il recupero dei dati in modo asincrono. La tua estensione per il browser è quasi completa.
Nelle ultime due lezioni di questo modulo, hai imparato a costruire un modulo e un'area di visualizzazione per i dati recuperati da un'API. È un modo molto comune per creare una presenza sul web. Hai anche imparato a gestire il recupero dei dati in modo asincrono. La tua estensione per il browser è quasi completa.
Rimane da gestire alcune attività in background, inclusa l'aggiornamento del colore dell'icona dell'estensione, quindi questo è un ottimo momento per parlare di come il browser gestisce questo tipo di attività. Pensiamo a queste attività del browser nel contesto delle prestazioni delle tue risorse web mentre le costruisci.
Resta da gestire alcuni task in background, incluso l'aggiornamento del colore dell'icona dell'estensione, quindi questo è un ottimo momento per parlare di come il browser gestisce questo tipo di attività. Pensiamo a questi task del browser nel contesto delle prestazioni delle tue risorse web mentre le sviluppi.
## Fondamenti delle Prestazioni Web
## Nozioni di Base sulle Prestazioni Web
> "Le prestazioni di un sito web riguardano due cose: quanto velocemente si carica la pagina e quanto velocemente viene eseguito il codice." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
L'argomento su come rendere i tuoi siti web incredibilmente veloci su tutti i tipi di dispositivi, per tutti i tipi di utenti, in tutte le situazioni, è comprensibilmente vasto. Ecco alcuni punti da tenere a mente mentre costruisci un progetto web standard o un'estensione per il browser.
Il tema di come rendere i tuoi siti web incredibilmente veloci su tutti i tipi di dispositivi, per tutti i tipi di utenti, in tutte le situazioni, è, come prevedibile, vasto. Ecco alcuni punti da tenere a mente mentre sviluppi un progetto web standard o un'estensione per il browser.
La prima cosa che devi fare per garantire che il tuo sito funzioni in modo efficiente è raccogliere dati sulle sue prestazioni. Il primo posto per farlo è negli strumenti per sviluppatori del tuo browser web. In Edge, puoi selezionare il pulsante "Impostazioni e altro" (l'icona con tre punti in alto a destra del browser), quindi navigare su Altri strumenti > Strumenti per sviluppatori e aprire la scheda Prestazioni. Puoi anche utilizzare le scorciatoie da tastiera `Ctrl` + `Shift` + `I` su Windows o `Option` + `Command` + `I` su Mac per aprire gli strumenti per sviluppatori.
La prima cosa da fare per assicurarti che il tuo sito funzioni in modo efficiente è raccogliere dati sulle sue prestazioni. Il primo posto dove farlo è negli strumenti per sviluppatori del tuo browser. In Edge, puoi selezionare il pulsante "Impostazioni e altro" (l'icona con i tre puntini in alto a destra del browser), quindi navigare su Altri strumenti > Strumenti per sviluppatori e aprire la scheda Prestazioni. Puoi anche usare le scorciatoie da tastiera `Ctrl` + `Shift` + `I` su Windows o `Option` + `Command` + `I` su Mac per aprire gli strumenti per sviluppatori.
La scheda Prestazioni contiene uno strumento di Profiling. Apri un sito web (prova, ad esempio, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) e fai clic sul pulsante 'Registra', quindi aggiorna il sito. Interrompi la registrazione in qualsiasi momento e potrai vedere le routine generate per 'script', 'render' e 'paint' del sito:
La scheda Prestazioni contiene uno strumento di Profiling. Apri un sito web (prova, ad esempio, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) e clicca sul pulsante 'Registra', quindi aggiorna il sito. Interrompi la registrazione in qualsiasi momento e potrai vedere le routine generate per 'script', 'render' e 'paint' del sito:
✅ Visita la [Documentazione Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sulla scheda Prestazioni in Edge
✅ Visita la [Documentazione Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sulla scheda Prestazioni in Edge.
> Suggerimento: per ottenere una lettura accurata del tempo di avvio del tuo sito web, svuota la cache del browser
> Suggerimento: per ottenere una lettura accurata del tempo di avvio del tuo sito web, svuota la cache del browser.
Seleziona elementi della timeline del profilo per ingrandire gli eventi che si verificano durante il caricamento della tua pagina.
Seleziona elementi della timeline del profilo per ingrandire gli eventi che accadono durante il caricamento della tua pagina.
Ottieni un'istantanea delle prestazioni della tua pagina selezionando una parte della timeline del profilo e guardando il pannello di riepilogo:
Ottieni uno snapshot delle prestazioni della tua pagina selezionando una parte della timeline del profilo e guardando il pannello di riepilogo:
✅ Familiarizza con il tuo profiler! Apri gli strumenti per sviluppatori su questo sito e verifica se ci sono colli di bottiglia. Qual è la risorsa che si carica più lentamente? E quella più velocemente?
✅ Familiarizza con il tuo profiler! Apri gli strumenti per sviluppatori su questo sito e verifica se ci sono colli di bottiglia. Qual è la risorsa che si carica più lentamente? E quella più veloce?
## Controlli di Profiling
In generale, ci sono alcune "aree problematiche" che ogni sviluppatore web dovrebbe monitorare quando costruisce un sito per evitare brutte sorprese al momento del deployment in produzione.
**Dimensioni delle risorse**: Il web è diventato più 'pesante' e quindi più lento negli ultimi anni. Parte di questo peso è dovuto all'uso delle immagini.
**Dimensioni delle risorse**: Negli ultimi anni, il web è diventato più "pesante" e, di conseguenza, più lento. Parte di questo peso è dovuto all'uso delle immagini.
✅ Dai un'occhiata all'[Internet Archive](https://httparchive.org/reports/page-weight) per una visione storica del peso delle pagine e altro.
Una buona pratica è assicurarsi che le immagini siano ottimizzate e consegnate nella dimensione e risoluzione corrette per i tuoi utenti.
Una buona pratica è assicurarsi che le immagini siano ottimizzate e fornite nella dimensione e risoluzione corrette per i tuoi utenti.
**Traversamenti del DOM**: Il browser deve costruire il suo Document Object Model basandosi sul codice che scrivi, quindi è nell'interesse di buone prestazioni della pagina mantenere i tag al minimo, utilizzando e stilizzando solo ciò che è necessario per la pagina. A questo proposito, il CSS in eccesso associato a una pagina potrebbe essere ottimizzato; gli stili che devono essere utilizzati solo su una pagina non devono essere inclusi nel foglio di stile principale, ad esempio.
**Traversamenti del DOM**: Il browser deve costruire il suo Document Object Model in base al codice che scrivi, quindi è nell'interesse di buone prestazioni della pagina mantenere i tag al minimo, utilizzando e stilizzando solo ciò che è necessario. A tal proposito, il CSS in eccesso associato a una pagina potrebbe essere ottimizzato; gli stili che devono essere utilizzati solo su una pagina non devono essere inclusi nel foglio di stile principale, ad esempio.
**JavaScript**: Ogni sviluppatore JavaScript dovrebbe monitorare gli script che bloccano il rendering e che devono essere caricati prima che il resto del DOM possa essere attraversato e dipinto nel browser. Considera l'uso di `defer` con i tuoi script inline (come fatto nel modulo Terrarium).
✅ Prova alcuni siti su un [sito di test della velocità](https://www.webpagetest.org/) per saperne di più sui controlli comuni effettuati per determinare le prestazioni del sito.
✅ Prova alcuni siti su un [sito di test della velocità](https://www.webpagetest.org/) per saperne di più sui controlli comuni effettuati per determinare le prestazioni di un sito.
Ora che hai un'idea di come il browser rende le risorse che gli invii, vediamo le ultime cose che devi fare per completare la tua estensione:
Ora che hai un'idea di come il browser renderizza le risorse che gli invii, vediamo le ultime cose che devi fare per completare la tua estensione:
### Crea una funzione per calcolare il colore
@ -88,15 +88,15 @@ function calculateColor(value) {
}
```
Cosa sta succedendo qui? Passi un valore (l'intensità del carbonio) dalla chiamata API che hai completato nella lezione precedente, e poi calcoli quanto il suo valore si avvicina all'indice presentato nell'array dei colori. Quindi invii quel valore di colore più vicino al runtime di Chrome.
Cosa sta succedendo qui? Passi un valore (l'intensità di carbonio) dalla chiamata API che hai completato nella lezione precedente, e poi calcoli quanto il suo valore si avvicina all'indice presentato nell'array dei colori. Quindi invii quel valore di colore più vicino al runtime di Chrome.
Il chrome.runtime ha [un'API](https://developer.chrome.com/extensions/runtime) che gestisce tutti i tipi di attività in background, e la tua estensione la sta sfruttando:
Il chrome.runtime ha [un'API](https://developer.chrome.com/extensions/runtime) che gestisce tutti i tipi di task in background, e la tua estensione la sta utilizzando:
> "Usa l'API chrome.runtime per recuperare la pagina di background, restituire dettagli sul manifest e ascoltare e rispondere agli eventi nel ciclo di vita dell'app o dell'estensione. Puoi anche usare questa API per convertire il percorso relativo degli URL in URL completamente qualificati."
> "Usa l'API chrome.runtime per recuperare la pagina in background, restituire dettagli sul manifest e ascoltare e rispondere agli eventi nel ciclo di vita dell'app o dell'estensione. Puoi anche usare questa API per convertire il percorso relativo degli URL in URL completamente qualificati."
✅ Se stai sviluppando questa estensione per Edge, potrebbe sorprenderti che stai usando un'API di Chrome. Le versioni più recenti del browser Edge funzionano sul motore del browser Chromium, quindi puoi sfruttare questi strumenti.
> Nota, se vuoi profilare un'estensione per il browser, avvia gli strumenti per sviluppatori dall'interno dell'estensione stessa, poiché è una propria istanza separata del browser.
> Nota, se vuoi profilare un'estensione del browser, avvia gli strumenti per sviluppatori dall'interno dell'estensione stessa, poiché è una sua istanza separata del browser.
### Imposta un colore predefinito per l'icona
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Chiama la funzione, esegui la chiamata
Successivamente, chiama quella funzione che hai appena creato aggiungendola alla promessa restituita dall'API C02Signal:
Successivamente, chiama la funzione che hai appena creato aggiungendola alla promessa restituita dall'API C02Signal:
```JavaScript
//let CO2...
calculateColor(CO2);
```
E infine, in `/dist/background.js`, aggiungi il listener per queste chiamate di azioni in background:
E infine, in `/dist/background.js`, aggiungi il listener per queste chiamate di azione in background:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,9 +141,9 @@ function drawIcon(value) {
}
```
In questo codice, stai aggiungendo un listener per qualsiasi messaggio che arriva al gestore delle attività in background. Se viene chiamato 'updateIcon', allora il codice successivo viene eseguito per disegnare un'icona del colore corretto utilizzando l'API Canvas.
In questo codice, stai aggiungendo un listener per qualsiasi messaggio inviato al task manager in background. Se viene chiamato 'updateIcon', il codice successivo viene eseguito per disegnare un'icona del colore corretto utilizzando l'API Canvas.
✅ Imparerai di più sull'API Canvas nelle [lezioni sul gioco spaziale](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Imparerai di più sull'API Canvas nelle [lezioni sul Gioco Spaziale](../../6-space-game/2-drawing-to-canvas/README.md).
Ora, ricostruisci la tua estensione (`npm run build`), aggiorna e avvia la tua estensione, e osserva il cambiamento di colore. È un buon momento per fare una commissione o lavare i piatti? Ora lo sai!
@ -154,15 +153,15 @@ Congratulazioni, hai costruito un'estensione per il browser utile e hai imparato
## 🚀 Sfida
Indaga su alcuni siti web open source che esistono da molto tempo e, basandoti sulla loro cronologia su GitHub, cerca di determinare come sono stati ottimizzati nel corso degli anni per le prestazioni, se lo sono stati. Qual è il problema più comune?
Indaga su alcuni siti web open source che esistono da molto tempo e, basandoti sulla loro cronologia su GitHub, verifica se riesci a determinare come sono stati ottimizzati nel corso degli anni per le prestazioni, se lo sono stati. Qual è il problema più comune?
Considera di iscriverti a una [newsletter sulle prestazioni](https://perf.email/)
Considera di iscriverti a una [newsletter sulle prestazioni](https://perf.email/).
Indaga su alcuni dei modi in cui i browser valutano le prestazioni web esaminando le schede delle prestazioni nei loro strumenti web. Trovi differenze significative?
@ -173,4 +172,4 @@ Indaga su alcuni dei modi in cui i browser valutano le prestazioni web esaminand
---
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatizzate possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
이 모듈의 지난 두 강의에서는 API에서 가져온 데이터를 표시하기 위한 폼과 디스플레이 영역을 만드는 방법을 배웠습니다. 이는 웹에서 웹 존재감을 만드는 매우 표준적인 방법입니다. 또한 데이터를 비동기로 가져오는 방법도 배웠습니다. 이제 브라우저 확장 프로그램은 거의 완성되었습니다.
이 모듈의 지난 두 강의에서는 API에서 데이터를 가져와 표시하는 폼과 디스플레이 영역을 만드는 방법을 배웠습니다. 이는 웹에서 웹 존재감을 만드는 매우 표준적인 방법입니다. 또한 데이터를 비동기로 가져오는 방법도 배웠습니다. 이제 브라우저 확장 프로그램은 거의 완성되었습니다.
남은 작업은 확장 프로그램 아이콘의 색상을 새로 고치는 것을 포함한 몇 가지 백그라운드 작업을 관리하는 것입니다. 브라우저가 이러한 작업을 관리하는 방법에 대해 이야기하기에 좋은 시점입니다. 웹 자산을 구축하면서 브라우저 작업을 성능의 관점에서 생각해 봅시다.
남은 작업은 확장 프로그램 아이콘의 색상을 새로 고치는 등 몇 가지 백그라운드 작업을 관리하는 것입니다. 이 시점에서 브라우저가 이러한 작업을 어떻게 관리하는지에 대해 이야기하기 좋은 시기입니다. 웹 자산을 구축하면서 브라우저 작업을 성능의 관점에서 생각해 봅시다.
## 웹 성능 기본 사항
> "웹사이트 성능은 두 가지에 관한 것입니다: 페이지가 얼마나 빨리 로드되는지, 그리고 그 위의 코드가 얼마나 빨리 실행되는지." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
모든 종류의 기기, 모든 종류의 사용자, 모든 상황에서 웹사이트를 빠르게 만드는 방법에 대한 주제는 예상대로 방대합니다. 표준 웹 프로젝트나 브라우저 확장 프로그램을 구축할 때 염두에 두어야 할 몇 가지 사항은 다음과 같습니다.
모든 종류의 기기, 모든 종류의 사용자, 모든 상황에서 웹사이트를 빠르게 만드는 방법에 대한 주제는 당연히 방대합니다. 표준 웹 프로젝트나 브라우저 확장 프로그램을 구축할 때 염두에 두어야 할 몇 가지 사항을 소개합니다.
사이트가 효율적으로 실행되도록 하려면 먼저 성능에 대한 데이터를 수집해야 합니다. 이를 위한 첫 번째 장소는 웹 브라우저의 개발자 도구입니다. Edge에서는 브라우저 오른쪽 상단의 "설정 및 기타" 버튼(세 개의 점 아이콘)을 선택한 다음, "추가 도구 > 개발자 도구"로 이동하여 성능 탭을 엽니다. Windows에서는 `Ctrl` + `Shift` + `I`, Mac에서는 `Option` + `Command` + `I` 키보드 단축키를 사용하여 개발자 도구를 열 수 있습니다.
사이트가 효율적으로 실행되도록 하려면 먼저 성능 데이터를 수집해야 합니다. 이를 위한 첫 번째 장소는 웹 브라우저의 개발자 도구입니다. Edge에서는 브라우저 오른쪽 상단의 "설정 및 기타" 버튼(세 개의 점 아이콘)을 선택한 다음, "추가 도구 > 개발자 도구"로 이동하여 성능 탭을 열 수 있습니다. Windows에서는 `Ctrl` + `Shift` + `I`, Mac에서는 `Option` + `Command` + `I` 키보드 단축키를 사용하여 개발자 도구를 열 수 있습니다.
성능 탭에는 프로파일링 도구가 포함되어 있습니다. 웹사이트를 열고(예: [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) '기록' 버튼을 클릭한 다음 사이트를 새로 고칩니다. 언제든지 기록을 중지하면 '스크립트', '렌더링', '페인팅' 작업이 생성된 루틴을 확인할 수 있습니다:
성능 탭에는 프로파일링 도구가 포함되어 있습니다. 웹사이트를 열고(예: [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) '기록' 버튼을 클릭한 다음 사이트를 새로 고칩니다. 언제든지 기록을 중지하면 '스크립트', '렌더링', '페인트'를 통해 사이트를 생성하는 루틴을 확인할 수 있습니다:
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)에서 Edge의 성능 패널에 대해 알아보세요.
✅ [Microsoft 문서](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)에서 Edge의 성능 패널에 대해 알아보세요.
> 팁: 웹사이트의 시작 시간을 정확히 측정하려면 브라우저 캐시를 지우세요.
프로파일 타임라인의 요소를 선택하여 페이지가 로드되는 동안 발생하는 이벤트를 확대하세요.
프로파일 타임라인의 요소를 선택하여 페이지가 로드되는 동안 발생하는 이벤트를 확대해 보세요.
✅ 프로파일러를 익히세요! 이 사이트에서 개발자 도구를 열어 병목 현상이 있는지 확인하세요. 가장 느리게 로드되는 자산은 무엇인가요? 가장 빠른 것은 무엇인가요?
✅ 프로파일러를 익혀보세요! 이 사이트에서 개발자 도구를 열어 병목 현상이 있는지 확인하세요. 가장 느리게 로드되는 자산은 무엇인가요? 가장 빠른 것은 무엇인가요?
## 프로파일링 체크
일반적으로, 웹 개발자가 사이트를 구축할 때 배포 시 예상치 못한 문제를 피하기 위해 주의해야 할 몇 가지 "문제 영역"이 있습니다.
일반적으로, 웹 개발자가 사이트를 구축할 때 프로덕션에 배포할 시점에 예상치 못한 문제를 피하기 위해 주의해야 할 몇 가지 "문제 영역"이 있습니다.
**자산 크기**: 최근 몇 년 동안 웹은 '무거워지고' 따라서 느려졌습니다. 이러한 무게의 일부는 이미지 사용과 관련이 있습니다.
**자산 크기**: 최근 몇 년 동안 웹은 '무거워지고', 따라서 느려졌습니다. 이러한 무게의 일부는 이미지 사용과 관련이 있습니다.
✅ [Internet Archive](https://httparchive.org/reports/page-weight)에서 페이지 무게에 대한 역사적 관점과 더 많은 정보를 확인하세요.
✅ [인터넷 아카이브](https://httparchive.org/reports/page-weight)를 살펴보고 페이지 무게와 관련된 역사적 관점을 확인하세요.
이미지가 최적화되고 사용자에게 적절한 크기와 해상도로 제공되었는지 확인하는 것이 좋은 관행입니다.
이미지가 최적화되고 사용자에게 적합한 크기와 해상도로 제공되도록 하는 것이 좋은 관행입니다.
**DOM 탐색**: 브라우저는 작성한 코드를 기반으로 문서 객체 모델을 구축해야 하므로 태그를 최소화하고 페이지에 필요한 것만 사용하고 스타일링하는 것이 좋은 페이지 성능을 위해 중요합니다. 예를 들어, 특정 페이지에서만 필요한 스타일은 메인 스타일 시트에 포함될 필요가 없습니다.
**DOM 탐색**: 브라우저는 작성한 코드를 기반으로 문서 객체 모델을 구축해야 하므로 태그를 최소화하고 페이지에 필요한 것만 사용하고 스타일링하는 것이 좋은 페이지 성능을 위해 중요합니다. 이와 관련하여 페이지와 관련된 과도한 CSS는 최적화될 수 있습니다. 예를 들어, 특정 페이지에서만 필요한 스타일은 메인 스타일 시트에 포함될 필요가 없습니다.
**JavaScript**: 모든 JavaScript 개발자는 DOM이 탐색되고 브라우저에 페인팅되기 전에 로드되어야 하는 '렌더링 차단' 스크립트를 주의해야 합니다. 인라인 스크립트에 `defer`를 사용하는 것을 고려하세요(예: Terrarium 모듈에서 사용됨).
**JavaScript**: 모든 JavaScript 개발자는 DOM을 탐색하고 브라우저에 페인트하기 전에 로드해야 하는 '렌더링 차단' 스크립트를 주의해야 합니다. Terrarium 모듈에서와 같이 인라인 스크립트에 `defer`를 사용하는 것을 고려하세요.
✅ [Site Speed Test 웹사이트](https://www.webpagetest.org/)에서 사이트 성능을 결정하기 위해 수행되는 일반적인 체크를 확인하세요.
✅ [사이트 속도 테스트 웹사이트](https://www.webpagetest.org/)에서 몇 가지 사이트를 테스트하여 사이트 성능을 결정하는 데 일반적으로 수행되는 체크 사항을 알아보세요.
이제 브라우저가 전송된 자산을 렌더링하는 방법에 대한 아이디어를 얻었으니, 확장을 완료하기 위해 해야 할 마지막 몇 가지 작업을 살펴봅시다:
이제 브라우저가 전송한 자산을 렌더링하는 방법에 대한 아이디어를 얻었으니, 확장을 완료하기 위해 해야 할 마지막 몇 가지 작업을 살펴보겠습니다:
### 색상을 계산하는 함수 생성
`/src/index.js`에서 DOM에 접근하기 위해 설정한 일련의 `const` 변수 뒤에 `calculateColor()`라는 함수를 추가하세요:
`/src/index.js`에서 DOM에 액세스하기 위해 설정한 일련의 `const` 변수 뒤에 `calculateColor()`라는 함수를 추가하세요:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
여기서 무슨 일이 일어나고 있나요? 이전 강의에서 완료한 API 호출에서 탄소 강도를 나타내는 값을 전달하고, 색상 배열에 표시된 인덱스와 값이 얼마나 가까운지 계산합니다. 그런 다음 가장 가까운 색상 값을 chrome runtime으로 보냅니다.
여기서 무슨 일이 일어나고 있나요? 이전 강의에서 완료한 API 호출에서 탄소 강도 값을 전달한 다음, 해당 값이 색상 배열에 표시된 인덱스에 얼마나 가까운지 계산합니다. 그런 다음 가장 가까운 색상 값을 chrome 런타임으로 보냅니다.
chrome.runtime에는 [API](https://developer.chrome.com/extensions/runtime)가 있어 다양한 백그라운드 작업을 처리하며, 확장 프로그램이 이를 활용하고 있습니다:
chrome.runtime에는 모든 종류의 백그라운드 작업을 처리하는 [API](https://developer.chrome.com/extensions/runtime)가 있습니다. 확장 프로그램은 이를 활용합니다:
> "chrome.runtime API를 사용하여 백그라운드 페이지를 검색하고, 매니페스트에 대한 세부 정보를 반환하며, 앱 또는 확장 프로그램 라이프사이클의 이벤트를 수신하고 응답합니다. 또한 이 API를 사용하여 URL의 상대 경로를 완전히 자격이 부여된 URL로 변환할 수 있습니다."
> "chrome.runtime API를 사용하여 백그라운드 페이지를 검색하고, 매니페스트에 대한 세부 정보를 반환하며, 앱 또는 확장 프로그램 라이프사이클의 이벤트를 수신하고 응답합니다. 또한 이 API를 사용하여 URL의 상대 경로를 완전한 URL로 변환할 수 있습니다."
✅ Edge용 브라우저 확장 프로그램을 개발 중이라면 chrome API를 사용하는 것이 놀라울 수 있습니다. 최신 Edge 브라우저 버전은 Chromium 브라우저 엔진에서 실행되므로 이러한 도구를 활용할 수 있습니다.
> 참고: 브라우저 확장 프로그램을 프로파일링하려면 확장 프로그램 자체에서 개발자 도구를 실행하세요. 확장 프로그램은 별도의 브라우저 인스턴스입니다.
> 참고로, 브라우저 확장 프로그램을 프로파일링하려면 확장 프로그램 자체에서 개발자 도구를 실행하세요. 확장 프로그램은 별도의 브라우저 인스턴스입니다.
### 기본 아이콘 색상 설정
이제 `init()` 함수에서 chrome의 `updateIcon`액션을 호출하여 아이콘을 기본 녹색으로 설정하세요:
이제 `init()` 함수에서 chrome의 `updateIcon`작업을 호출하여 아이콘을 기본 녹색으로 설정하세요:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### 함수 호출 및 실행
다음으로, 이전 강의에서 완료한 C02Signal API에서 반환된 promise에 방금 생성한 함수를 추가하여 호출하세요:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,12 +140,11 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
이 코드에서는 백그라운드 작업 관리자에 전달되는 메시지에 대한 리스너를 추가합니다. 메시지가 'updateIcon'으로 호출되면, 적절한 색상의 아이콘을 Canvas API를 사용하여 그리는 다음 코드가 실행됩니다.
이 코드에서는 백그라운드 작업 관리자에 들어오는 메시지에 대한 리스너를 추가합니다. 메시지가 'updateIcon'으로 호출되면, 적절한 색상의 아이콘을 Canvas API를 사용하여 그리는 다음 코드가 실행됩니다.
✅ [Space Game 강의](../../6-space-game/2-drawing-to-canvas/README.md)에서 Canvas API에 대해 더 배울 수 있습니다.
✅ [우주 게임 강의](../../6-space-game/2-drawing-to-canvas/README.md)에서 Canvas API에 대해 더 배울 수 있습니다.
이제 확장 프로그램을 다시 빌드하세요(`npm run build`). 확장을 새로 고치고 실행하여 색상이 변경되는 것을 확인하세요. 지금이 심부름을 하거나 설거지를 할 좋은 시간인지 알 수 있습니다!
이제 확장 프로그램을 다시 빌드하세요(`npm run build`). 확장 프로그램을 새로 고치고 실행하여 색상이 변경되는 것을 확인하세요. 심부름을 하거나 설거지를 할 시간이 되었나요? 이제 알게 되었네요!
축하합니다! 유용한 브라우저 확장 프로그램을 구축하고 브라우저가 작동하는 방식과 성능을 프로파일링하는 방법에 대해 더 많이 배웠습니다.
@ -154,7 +152,7 @@ function drawIcon(value) {
## 🚀 도전 과제
오랫동안 존재했던 오픈 소스 웹사이트를 조사하고, GitHub 기록을 기반으로 성능을 위해 어떻게 최적화되었는지 확인하세요. 가장 일반적인 문제점은 무엇인가요?
오랫동안 존재했던 오픈 소스 웹사이트를 조사하고, GitHub 기록을 기반으로 성능을 위해 어떻게 최적화되었는지 확인해 보세요. 가장 일반적인 문제점은 무엇인가요?
## 강의 후 퀴즈
@ -162,7 +160,7 @@ function drawIcon(value) {
## 복습 및 자기 학습
[성능 뉴스레터](https://perf.email)에 가입하는 것을 고려하세요.
[성능 뉴스레터](https://perf.email)에 가입하는 것을 고려해 보세요.
브라우저가 웹 성능을 측정하는 방법을 조사하고 웹 도구의 성능 탭을 살펴보세요. 주요 차이점을 발견했나요?
@ -173,4 +171,4 @@ function drawIcon(value) {
---
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문 번역가에 의한 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 신뢰할 수 있는 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
Paskutinėse dviejose šio modulio pamokose išmokote sukurti formą ir duomenų rodymo sritį, kuri naudoja API užklausas. Tai labai standartinis būdas kurti internetinį projektą. Jūs netgi išmokote, kaip tvarkyti asinchronines duomenų užklausas. Jūsų naršyklės plėtinys beveik baigtas.
Paskutinėse dviejose šio modulio pamokose išmokote sukurti formą ir duomenų rodymo sritį, skirtą informacijai, gautai iš API. Tai labai standartinis būdas kurti internetinį projektą. Jūs netgi išmokote tvarkyti asinchroninį duomenų gavimą. Jūsų naršyklės plėtinys beveik baigtas.
Liko valdyti kelias fonines užduotis, įskaitant plėtinio piktogramos spalvos atnaujinimą, todėl tai puikus metas aptarti, kaip naršyklė tvarko tokio tipo užduotis. Pažvelkime į šias naršyklės užduotis jūsų interneto turinio našumo kontekste, kai jį kuriate.
Liko valdyti kai kurias fonines užduotis, įskaitant plėtinio piktogramos spalvos atnaujinimą, todėl dabar puikus metas aptarti, kaip naršyklė tvarko tokio tipo užduotis. Pažvelkime į šias naršyklės užduotis jūsų interneto turinio našumo kontekste, kai jį kuriate.
## Interneto našumo pagrindai
> „Interneto svetainės našumas susijęs su dviem dalykais: kaip greitai puslapis įkeliamas ir kaip greitai jame veikia kodas.“ -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> „Interneto svetainės našumas susijęs su dviem dalykais: kaip greitai puslapis įkeliamas ir kaip greitai jame veikia kodas.“ – [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Kaip padaryti, kad jūsų svetainės būtų itin greitos visų tipų įrenginiuose, visų tipų vartotojams ir visose situacijose, yra labai plati tema. Štai keli punktai, kuriuos verta prisiminti kuriant standartinį interneto projektą ar naršyklės plėtinį.
Kaip padaryti, kad jūsų svetainės būtų itin greitos visų tipų įrenginiuose, visiems vartotojams ir visose situacijose, yra labai plati tema. Štai keletas dalykų, kuriuos verta prisiminti, kuriant standartinį interneto projektą ar naršyklės plėtinį.
Pirmas dalykas, kurį reikia padaryti, kad užtikrintumėte efektyvų svetainės veikimą, yra surinkti duomenis apie jos našumą. Pirmoji vieta tai padaryti yra jūsų naršyklės kūrėjų įrankiai. Edge naršyklėje galite pasirinkti mygtuką „Nustatymai ir daugiau“ (trijų taškų piktograma viršutiniame dešiniajame naršyklės kampe), tada eiti į Daugiau įrankių > Kūrėjų įrankiai ir atidaryti našumo skirtuką. Taip pat galite naudoti klaviatūros sparčiuosius klavišus `Ctrl` + `Shift` + `I`Windows sistemoje arba `Option` + `Command` + `I` Mac sistemoje, kad atidarytumėte kūrėjų įrankius.
Pirmas dalykas, kurį reikia padaryti, kad užtikrintumėte efektyvų svetainės veikimą, yra surinkti duomenis apie jos našumą. Pirmoji vieta, kur tai galima padaryti, yra jūsų naršyklės kūrėjų įrankiai. „Edge“ naršyklėje galite pasirinkti mygtuką „Nustatymai ir daugiau“ (trijų taškų piktograma viršutiniame dešiniajame naršyklės kampe), tada eiti į „Daugiau įrankių“ > „Kūrėjų įrankiai“ ir atidaryti našumo skirtuką. Taip pat galite naudoti klaviatūros sparčiuosius klavišus `Ctrl` + `Shift` + `I`„Windows“ arba `Option` + `Command` + `I` „Mac“, kad atidarytumėte kūrėjų įrankius.
Našumo skirtuke yra profiliavimo įrankis. Atidarykite svetainę (pavyzdžiui, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ir spustelėkite mygtuką „Įrašyti“, tada atnaujinkite svetainę. Bet kuriuo metu sustabdę įrašymą galėsite pamatyti rutinas, kurios generuojamos „script“, „render“ ir „paint“ svetainės:
Našumo skirtuke yra profiliavimo įrankis. Atidarykite svetainę (pavyzdžiui, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ir spustelėkite mygtuką „Įrašyti“, tada atnaujinkite svetainę. Bet kuriuo metu sustabdę įrašymą galėsite pamatyti rutinas, kurios generuojamos „script“, „render“ ir „paint“ procesams:
Patikrinkite įvykių žurnalo skydelį, kad pamatytumėte, ar kuris nors įvykis užtruko ilgiau nei 15 ms:
✅ Susipažinkite su savo profiliavimo įrankiu! Atidarykite kūrėjų įrankius šioje svetainėje ir pažiūrėkite, ar yra kokių nors kliūčių. Kas yra lėčiausiai įkeliama turinio dalis? Greičiausiai?
✅ Susipažinkite su savo profiliavimo įrankiu! Atidarykite kūrėjų įrankius šioje svetainėje ir pažiūrėkite, ar yra kokių nors kliūčių. Koks lėčiausiai įkeliamas turinys? Greičiausias?
## Profiliavimo patikrinimai
Apskritai, yra keletas „probleminių sričių“, kurias kiekvienas interneto kūrėjas turėtų stebėti kurdamas svetainę, kad išvengtų nemalonių staigmenų, kai ateis laikas ją paleisti į gamybą.
Apskritai, yra keletas „probleminių sričių“, kurias kiekvienas interneto kūrėjas turėtų stebėti, kurdamas svetainę, kad išvengtų nemalonių staigmenų, kai ateis laikas ją paleisti į gamybą.
**Turinio dydžiai**: Internetas per pastaruosius metus tapo „sunkesnis“, todėl lėtesnis. Dalis šio svorio susijusi su vaizdų naudojimu.
✅ Peržiūrėkite [Interneto archyvą](https://httparchive.org/reports/page-weight), kad pamatytumėte istorinius puslapio svorio duomenis ir daugiau.
✅ Peržiūrėkite [Internet Archive](https://httparchive.org/reports/page-weight) istorinį puslapių svorio vaizdą ir daugiau.
Gera praktika yra užtikrinti, kad jūsų vaizdai būtų optimizuoti ir pateikti tinkamo dydžio bei raiškos jūsų vartotojams.
**DOM perėjimai**: Naršyklė turi sukurti savo dokumento objektų modelį (DOM) pagal jūsų parašytą kodą, todėl geram puslapio našumui svarbu, kad jūsų žymos būtų minimalios, naudojant ir stiliuojant tik tai, ko puslapiui reikia. Pavyzdžiui, perteklinis CSS, susijęs su puslapiu, galėtų būti optimizuotas; stiliai, kurie reikalingi tik viename puslapyje, neturėtų būti įtraukti į pagrindinį stilių lapą.
**DOM perėjimai**: Naršyklė turi sukurti savo dokumento objektų modelį (DOM) pagal jūsų parašytą kodą, todėl geram puslapio našumui svarbu, kad jūsų žymės būtų minimalios, naudojant ir stilizuojant tik tai, ko reikia puslapiui. Pavyzdžiui, CSS stiliai, kurie naudojami tik viename puslapyje, neturėtų būti įtraukti į pagrindinį stilių lapą.
**JavaScript**: Kiekvienas JavaScript kūrėjas turėtų stebėti „render-blocking“ scenarijus, kurie turi būti įkelti prieš naršyklės DOM perėjimą ir piešimą. Apsvarstykite galimybę naudoti `defer` su savo inline scenarijais (kaip tai daroma Terrarium modulyje).
**JavaScript**: Kiekvienas JavaScript kūrėjas turėtų stebėti „render-blocking“ scenarijus, kurie turi būti įkelti prieš naršyklės DOM perėjimą ir piešimą. Apsvarstykite galimybę naudoti `defer` su savo įterptaisiais scenarijais (kaip tai daroma „Terrarium“ modulyje).
✅ Išbandykite kelias svetaines [Svetainės greičio testavimo svetainėje](https://www.webpagetest.org/), kad sužinotumėte daugiau apie įprastus patikrinimus, kurie atliekami siekiant nustatyti svetainės našumą.
✅ Išbandykite keletą svetainių [Svetainės greičio testavimo svetainėje](https://www.webpagetest.org/), kad sužinotumėte daugiau apie bendrus patikrinimus, kurie atliekami siekiant nustatyti svetainės našumą.
Dabar, kai turite idėją, kaip naršyklė pateikia jūsų siunčiamą turinį, pažvelkime į paskutinius kelis dalykus, kuriuos reikia padaryti, kad užbaigtumėte savo plėtinį:
Dabar, kai turite idėją, kaip naršyklė pateikia jūsų siunčiamą turinį, pažvelkime į paskutinius dalykus, kuriuos reikia padaryti, kad užbaigtumėte savo plėtinį:
### Sukurkite funkciją spalvai apskaičiuoti
Dirbdami su `/src/index.js`, pridėkite funkciją `calculateColor()` po serijos `const` kintamųjų, kuriuos nustatėte, kad gautumėte prieigą prie DOM:
Dirbdami su `/src/index.js`, pridėkite funkciją, pavadintą`calculateColor()`, po serijos `const` kintamųjų, kuriuos nustatėte, kad gautumėte prieigą prie DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Kas čia vyksta? Jūs perduodate vertę (anglies intensyvumą) iš API užklausos, kurią atlikote paskutinėje pamokoje, ir tada apskaičiuojate, kaip arti jos vertė yra spalvų masyvo indekso. Tada siunčiate artimiausią spalvos vertę į chrome runtime.
Kas čia vyksta? Jūs perduodate vertę (anglies intensyvumą) iš API užklausos, kurią atlikote paskutinėje pamokoje, ir tada apskaičiuojate, kaip arti jos vertė yra spalvų masyve pateikto indekso. Tada siunčiate artimiausią spalvos vertę į „chrome runtime“.
Chrome.runtime turi [API](https://developer.chrome.com/extensions/runtime), kuris tvarko įvairias fonines užduotis, ir jūsų plėtinys tuo naudojasi:
„chrome.runtime“ turi [API](https://developer.chrome.com/extensions/runtime), kuris tvarko įvairias fonines užduotis, ir jūsų plėtinys tuo naudojasi:
> „Naudokite chrome.runtime API, kad gautumėte foninį puslapį, grąžintumėte informaciją apie manifestą ir klausytumėte bei reaguotumėte į įvykius programos ar plėtinio gyvavimo cikle. Taip pat galite naudoti šį API, kad konvertuotumėte santykinius URL kelių į pilnai kvalifikuotus URL.“
> „Naudokite „chrome.runtime“ API, kad gautumėte foninį puslapį, grąžintumėte informaciją apie manifestą ir klausytumėte bei reaguotumėte į įvykius programos ar plėtinio gyvavimo cikle. Taip pat galite naudoti šį API, kad konvertuotumėte santykinius URL kelių į pilnai kvalifikuotus URL.“
✅ Jei kuriate šį naršyklės plėtinį Edge naršyklei, gali nustebinti, kad naudojate chrome API. Naujesnės Edge naršyklės versijos veikia Chromium naršyklės variklyje, todėl galite naudotis šiais įrankiais.
✅ Jei kuriate šį naršyklės plėtinį „Edge“, gali nustebinti, kad naudojate „chrome“ API. Naujesnės „Edge“ naršyklės versijos veikia „Chromium“ naršyklės variklyje, todėl galite naudotis šiais įrankiais.
> Pastaba: jei norite profiliuoti naršyklės plėtinį, paleiskite kūrėjų įrankius pačiame plėtinyje, nes tai yra atskira naršyklės instancija.
### Nustatykite numatytąją piktogramos spalvą
Dabar, funkcijoje `init()`, nustatykite piktogramą kaip bendrą žalią spalvą, pradėdami vėl naudoti chrome`updateIcon` veiksmą:
Dabar, funkcijoje `init()`, nustatykite piktogramą kaip bendrą žalią spalvą, iš naujo iškviesdami „chrome“`updateIcon` veiksmą:
```JavaScript
chrome.runtime.sendMessage({
@ -110,10 +110,9 @@ chrome.runtime.sendMessage({
},
});
```
### Iškvieskite funkciją, vykdykite užklausą
Tada iškvieskite ką tik sukurtą funkciją, pridėdami ją prie pažado, kurį grąžina C02Signal API:
Tada iškvieskite ką tik sukurtą funkciją, pridėdami ją prie pažado, grąžinto C02Signal API:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,12 +140,11 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
Šiame kode jūs pridedate klausytoją bet kokioms žinutėms, siunčiamoms į foninių užduočių tvarkyklę. Jei ji vadinama „updateIcon“, tada vykdomas kitas kodas, kuris piešia tinkamos spalvos piktogramą naudojant „Canvas API“.
Šiame kode jūs pridedate klausytoją bet kokioms žinutėms, kurios siunčiamos į foninių užduočių tvarkyklę. Jei ji vadinama „updateIcon“, tada vykdomas kitas kodas, kuris piešia tinkamos spalvos piktogramą naudojant Canvas API.
✅ Daugiau apie Canvas API sužinosite [Kosminio žaidimo pamokose](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Daugiau apie „Canvas API“ sužinosite [Kosminio žaidimo pamokose](../../6-space-game/2-drawing-to-canvas/README.md).
Dabar, perkurkite savo plėtinį (`npm run build`), atnaujinkite ir paleiskite plėtinį, ir stebėkite spalvos pokyčius. Ar tai geras metas atlikti kokį nors darbą ar išplauti indus? Dabar žinote!
Dabar, perkurkite savo plėtinį (`npm run build`), atnaujinkite ir paleiskite plėtinį, ir stebėkite, kaip keičiasi spalva. Ar tai geras metas atlikti kokį nors darbą ar išplauti indus? Dabar žinote!
Sveikiname, jūs sukūrėte naudingą naršyklės plėtinį ir sužinojote daugiau apie tai, kaip veikia naršyklė ir kaip profiliuoti jos našumą.
Ištirkite keletą atvirojo kodo svetainių, kurios egzistuoja jau ilgą laiką, ir, remdamiesi jų GitHub istorija, pabandykite nustatyti, kaip jos buvo optimizuotos našumui per metus, jei išvis. Koks yra dažniausias skausmo taškas?
Ištirkite kai kurias atvirojo kodo svetaines, kurios egzistuoja jau seniai, ir, remdamiesi jų „GitHub“ istorija, pabandykite nustatyti, kaip jos buvo optimizuotos našumui per metus, jei išviso buvo. Koks yra dažniausias skausmo taškas?
## Klausimynas po paskaitos
## Po paskaitos – testas
[Klausimynas po paskaitos](https://ff-quizzes.netlify.app/web/quiz/28)
Apsvarstykite galimybę užsiprenumeruoti [našumo naujienlaiškį](https://perf.email/).
Apsvarstykite galimybę užsiprenumeruoti [našumo naujienlaiškį](https://perf.email/)
Ištirkite kai kuriuos būdus, kuriais naršyklės vertina interneto našumą, peržiūrėdami našumo skirtukus jų interneto įrankiuose. Ar pastebėjote kokių nors esminių skirtumų?
Ištirkite kai kuriuos būdus, kuriais naršyklės vertina interneto našumą, peržiūrėdami našumo skirtukus jų interneto įrankiuose. Ar pastebėjote kokių nors didelių skirtumų?
## Užduotis
@ -173,4 +171,4 @@ Ištirkite kai kuriuos būdus, kuriais naršyklės vertina interneto našumą, p
---
**Atsakomybės apribojimas**:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius dėl šio vertimo naudojimo.
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar neteisingus aiškinimus, atsiradusius dėl šio vertimo naudojimo.
या मॉड्यूलच्या मागील दोन धड्यांमध्ये, तुम्ही API मधून डेटा मिळवण्यासाठी फॉर्म आणि डिस्प्ले एरिया कसा तयार करायचा हे शिकले. वेबवर वेब उपस्थिती तयार करण्याचा हा एक अतिशय सामान्य मार्ग आहे. तुम्ही डेटा असिंक्रोनस पद्धतीने मिळवण्याचे व्यवस्थापन कसे करायचे हे देखील शिकले. तुमचे ब्राउझर एक्स्टेंशन जवळजवळ पूर्ण झाले आहे.
या मॉड्यूलच्या मागील दोन धड्यांमध्ये, तुम्ही API मधून डेटा मिळवण्यासाठी फॉर्म आणि डिस्प्ले एरिया कसा तयार करायचा हे शिकले. वेबवर वेब उपस्थिती तयार करण्याचा हा एक अतिशय सामान्य मार्ग आहे. तुम्ही डेटा असिंक्रोनस पद्धतीने कसा मिळवायचा हे देखील शिकले. तुमचे ब्राउझर एक्स्टेंशन जवळजवळ पूर्ण झाले आहे.
आता काही बॅकग्राउंड टास्क व्यवस्थापित करणे बाकी आहे, ज्यामध्ये एक्स्टेंशनच्या आयकॉनचा रंग रीफ्रेश करणे समाविष्ट आहे, त्यामुळे ब्राउझर अशा प्रकारच्या कार्याचे व्यवस्थापन कसे करते याबद्दल बोलण्याची ही एक उत्तम वेळ आहे. तुमचे वेब प्रोजेक्ट तयार करताना तुमच्या वेब अॅसेट्सच्या कार्यक्षमतेच्या संदर्भात या ब्राउझर टास्कचा विचार करूया.
आता काही बॅकग्राउंड टास्क व्यवस्थापित करणे बाकी आहे, ज्यामध्ये एक्स्टेंशनच्या आयकॉनचा रंग रीफ्रेश करणे समाविष्ट आहे. त्यामुळे ब्राउझर अशा प्रकारच्या कार्याचे व्यवस्थापन कसे करते याबद्दल बोलण्याची ही योग्य वेळ आहे. तुमच्या वेब अॅसेट्स तयार करताना त्याच्या कार्यक्षमतेच्या संदर्भात या ब्राउझर टास्कचा विचार करूया.
## वेब कार्यक्षमता मूलभूत गोष्टी
> "वेबसाइट कार्यक्षमता दोन गोष्टींवर आधारित आहे: पृष्ठ किती वेगाने लोड होते आणि त्यावरील कोड किती वेगाने चालतो." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
तुमच्या वेबसाइट्स सर्व प्रकारच्या डिव्हाइसवर, सर्व प्रकारच्या वापरकर्त्यांसाठी, सर्व प्रकारच्या परिस्थितीत वेगवान कशा बनवायच्या याचे विषय अपेक्षेप्रमाणे विस्तृत आहेत. तुम्ही एक सामान्य वेब प्रोजेक्ट किंवा ब्राउझर एक्स्टेंशन तयार करत असाल तर लक्षात ठेवण्यासारखे काही मुद्दे येथे आहेत.
तुमच्या वेबसाइट्स सर्व प्रकारच्या डिव्हाइसवर, सर्व प्रकारच्या वापरकर्त्यांसाठी, सर्व प्रकारच्या परिस्थितीत वेगाने चालवण्यासाठी कसे तयार करायचे याचा विषय अपेक्षेप्रमाणे विस्तृत आहे. तुम्ही मानक वेब प्रोजेक्ट किंवा ब्राउझर एक्स्टेंशन तयार करत असताना लक्षात ठेवण्यासारखे काही मुद्दे येथे आहेत.
तुमची साइट कार्यक्षमतेने चालत आहे याची खात्री करण्यासाठी तुम्हाला सर्वप्रथम तिच्या कार्यक्षमतेबद्दल डेटा गोळा करणे आवश्यक आहे. हे करण्याचे पहिले ठिकाण म्हणजे तुमच्या वेब ब्राउझरचे डेव्हलपर टूल्स. Edge मध्ये, तुम्ही "सेटिंग्ज आणि अधिक" बटण (ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील तीन डॉट्स आयकॉन) निवडू शकता, नंतर More Tools > Developer Tools वर जा आणि Performance टॅब उघडा. तुम्ही Windows वर `Ctrl` + `Shift` + `I` किंवा Mac वर `Option` + `Command` + `I` कीबोर्ड शॉर्टकट वापरून डेव्हलपर टूल्स उघडू शकता.
तुमची साइट कार्यक्षमतेने चालत आहे याची खात्री करण्यासाठी तुम्हाला सर्वप्रथम तिच्या कार्यक्षमतेबद्दल डेटा गोळा करणे आवश्यक आहे. तुमच्या वेब ब्राउझरच्या डेव्हलपर टूल्समध्ये हे करण्याचे पहिले ठिकाण आहे. Edge मध्ये, तुम्ही "सेटिंग्ज आणि अधिक" बटण (ब्राउझरच्या वरच्या उजव्या कोपर्यात तीन डॉट्स आयकॉन) निवडू शकता, नंतर More Tools > Developer Tools वर जा आणि Performance टॅब उघडा. Windows वर `Ctrl` + `Shift` + `I` किंवा Mac वर `Option` + `Command` + `I` कीबोर्ड शॉर्टकट वापरून तुम्ही डेव्हलपर टूल्स उघडू शकता.
Performance टॅबमध्ये एक प्रोफाइलिंग टूल आहे. वेबसाइट उघडा (उदाहरणार्थ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) आणि 'Record' बटणावर क्लिक करा, नंतर साइट रीफ्रेश करा. रेकॉर्डिंग कधीही थांबवा, आणि तुम्हाला 'स्क्रिप्ट', 'रेंडर', आणि 'पेंट' साइट तयार करण्यासाठी तयार केलेल्या रूटीन दिसतील:
Performance टॅबमध्ये प्रोफाइलिंग टूल आहे. वेबसाइट उघडा (उदाहरणार्थ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) आणि 'Record' बटणावर क्लिक करा, नंतर साइट रीफ्रेश करा. रेकॉर्डिंग कधीही थांबवा आणि तुम्हाला 'script', 'render', आणि 'paint' साइट तयार करण्यासाठी तयार केलेल्या रूटीन दिसतील:
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) वर Edge मधील Performance पॅनेलबद्दल अधिक जाणून घ्या
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) वर Edge मधील Performance पॅनेलबद्दल अधिक जाणून घ्या.
✅ तुमचा प्रोफाइलर ओळखा! या साइटवर डेव्हलपर टूल्स उघडा आणि पाहा की काही अडथळे आहेत का. सर्वात हळू-लोड होणारा अॅसेट कोणता आहे? सर्वात वेगवान कोणता आहे?
✅ तुमचा प्रोफाइलर ओळखा! या साइटवर डेव्हलपर टूल्स उघडा आणि पाहा की काही अडथळे आहेत का. सर्वात हळू-लोड होणारा अॅसेट कोणता आहे? सर्वात वेगवान कोणता आहे?
## प्रोफाइलिंग तपासणी
सामान्यतः, काही "समस्या क्षेत्रे" आहेत ज्यावर प्रत्येक वेब डेव्हलपरने साइट तयार करताना लक्ष ठेवले पाहिजे जेणेकरून उत्पादनात साइट तैनात करताना अप्रिय आश्चर्य टाळता येईल.
सामान्यतः, काही "समस्या क्षेत्रे" आहेत ज्यावर प्रत्येक वेब डेव्हलपरने साइट तयार करताना लक्ष ठेवले पाहिजे जेणेकरून उत्पादनात तैनात करताना अप्रिय आश्चर्य टाळता येईल.
**अॅसेट साइजेस**: वेब गेल्या काही वर्षांत 'जड' आणि त्यामुळे हळू झाला आहे. या वजनाचा काही भाग प्रतिमांच्या वापराशी संबंधित आहे.
**अॅसेट आकार**: वेब गेल्या काही वर्षांत 'जड' आणि त्यामुळे हळू झाला आहे. या वजनाचा काही भाग प्रतिमांच्या वापराशी संबंधित आहे.
✅ [Internet Archive](https://httparchive.org/reports/page-weight) मधून पृष्ठ वजनाचा ऐतिहासिक दृष्टिकोन आणि अधिक तपासा.
चांगली पद्धत म्हणजे तुमच्या प्रतिमा ऑप्टिमाइझ करणे आणि तुमच्या वापरकर्त्यांसाठी योग्य आकार आणि रिझोल्यूशनवर वितरित करणे सुनिश्चित करणे.
चांगली पद्धत म्हणजे तुमच्या प्रतिमा ऑप्टिमाइझ करणे आणि तुमच्या वापरकर्त्यांसाठी योग्य आकार आणि रिझोल्यूशनमध्ये वितरित करणे.
**DOM ट्रॅव्हर्सल्स**: ब्राउझरला तुमच्या कोडवर आधारित त्याचा Document Object Model तयार करावा लागतो, त्यामुळे चांगल्या पृष्ठ कार्यक्षमतेसाठी तुमचे टॅग्स कमीतकमी ठेवणे, पृष्ठाला आवश्यक असलेलेच वापरणे आणि स्टाइल करणे हे हिताचे आहे. यासाठी, पृष्ठाशी संबंधित अतिरिक्त CSS ऑप्टिमाइझ केले जाऊ शकते; ज्या शैली एका पृष्ठावरच वापरल्या जाणे आवश्यक आहे त्या मुख्य शैली पत्रकात समाविष्ट करण्याची आवश्यकता नाही, उदाहरणार्थ.
**DOM ट्रॅव्हर्सल्स**: ब्राउझरला तुमच्या कोडवर आधारित त्याचा Document Object Model तयार करावा लागतो, त्यामुळे चांगल्या पृष्ठ कार्यक्षमतेसाठी तुमचे टॅग कमीतकमी ठेवणे, पृष्ठाला आवश्यक असलेलेच वापरणे आणि स्टाइल करणे हे हिताचे आहे. या मुद्द्याला, पृष्ठाशी संबंधित अतिरिक्त CSS ऑप्टिमाइझ केले जाऊ शकते; ज्या शैली एका पृष्ठावरच वापरल्या जाणे आवश्यक आहे त्या मुख्य शैली पत्रकात समाविष्ट करण्याची आवश्यकता नाही, उदाहरणार्थ.
**JavaScript**: प्रत्येक JavaScript डेव्हलपरने 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्ससाठी लक्ष ठेवले पाहिजे ज्यांना DOM ट्रॅव्हर्स आणि ब्राउझरवर पेंट करण्यापूर्वी लोड करणे आवश्यक आहे. तुमच्या इनलाइन स्क्रिप्ट्ससह `defer` वापरण्याचा विचार करा (जसे की Terrarium मॉड्यूलमध्ये केले जाते).
**JavaScript**: प्रत्येक JavaScript डेव्हलपरने 'render-blocking' स्क्रिप्टसाठी लक्ष ठेवले पाहिजे ज्यांना DOM ट्रॅव्हर्स आणि ब्राउझरवर पेंट करण्यापूर्वी लोड करणे आवश्यक आहे. तुमच्या इनलाइन स्क्रिप्टसह `defer` वापरण्याचा विचार करा (जसे की Terrarium मॉड्यूलमध्ये केले जाते).
✅ साइट कार्यक्षमतेचा निर्धारण करण्यासाठी सामान्य तपासणीबद्दल अधिक जाणून घेण्यासाठी [Site Speed Test website](https://www.webpagetest.org/) वर काही साइट्स वापरून पहा.
आता तुम्हाला ब्राउझर तुमच्याकडून पाठवलेल्या अॅसेट्स कसे रेंडर करते याची कल्पना आली आहे, चला तुमचे एक्स्टेंशन पूर्ण करण्यासाठी तुम्हाला करायच्या शेवटच्या काही गोष्टी पाहूया:
आता तुम्हाला ब्राउझर तुमच्याकडून पाठवलेल्या अॅसेट्स कसे रेंडर करते याची कल्पना आहे, चला तुमचे एक्स्टेंशन पूर्ण करण्यासाठी तुम्हाला करायच्या शेवटच्या काही गोष्टी पाहूया:
### रंग गणना करण्यासाठी फंक्शन तयार करा
`/src/index.js` मध्ये काम करताना, DOM ऍक्सेस करण्यासाठी सेट केलेल्या `const` व्हेरिएबल्सच्या मालिकेनंतर `calculateColor()` नावाचे फंक्शन जोडा:
`/src/index.js` मध्ये काम करताना, DOM मध्ये प्रवेश मिळवण्यासाठी सेट केलेल्या `const` व्हेरिएबल्सच्या मालिकेनंतर `calculateColor()` नावाचे फंक्शन जोडा:
```JavaScript
function calculateColor(value) {
@ -88,11 +88,11 @@ function calculateColor(value) {
}
```
इथे काय चालले आहे? तुम्ही API कॉलमधून मिळालेली कार्बन इंटेन्सिटीची एक मूल्य पास करता, आणि नंतर तुम्ही त्याचे मूल्य रंगांच्या array मध्ये सादर केलेल्या निर्देशांकाच्या किती जवळ आहे हे गणना करता. नंतर तुम्ही तो सर्वात जवळचा रंग chrome runtime कडे पाठवता.
इथे काय चालले आहे? तुम्ही API कॉलमधून (मागील धडात पूर्ण केलेला) कार्बन इंटेन्सिटीचा एक मूल्य पास करता आणि नंतर तुम्ही त्याचे मूल्य रंगांच्या अॅरेमध्ये सादर केलेल्या निर्देशांकाच्या किती जवळ आहे हे गणना करता. नंतर तुम्ही तो सर्वात जवळचा रंग chrome runtime कडे पाठवता.
chrome.runtime मध्ये [API](https://developer.chrome.com/extensions/runtime) आहे जे सर्व प्रकारच्या बॅकग्राउंड टास्क हाताळते, आणि तुमचे एक्स्टेंशन त्याचा उपयोग करत आहे:
chrome.runtime मध्ये [API](https://developer.chrome.com/extensions/runtime) आहे जे सर्व प्रकारच्या बॅकग्राउंड टास्क हाताळते आणि तुमचे एक्स्टेंशन त्याचा उपयोग करत आहे:
> "chrome.runtime API चा वापर बॅकग्राउंड पृष्ठ मिळवण्यासाठी, मॅनिफेस्टबद्दल तपशील परत करण्यासाठी, आणि अॅप किंवा एक्स्टेंशन लाइफसायकलमधील इव्हेंट्ससाठी ऐकण्यासाठी आणि प्रतिसाद देण्यासाठी करा. तुम्ही URL च्या रिलेटिव्ह पथांना पूर्णपणे पात्र URL मध्ये रूपांतरित करण्यासाठी देखील या API चा वापर करू शकता."
> "chrome.runtime API वापरून बॅकग्राउंड पृष्ठ मिळवा, मॅनिफेस्टबद्दल तपशील परत करा आणि अॅप किंवा एक्स्टेंशन लाइफसायकलमधील इव्हेंटसाठी ऐका आणि प्रतिसाद द्या. तुम्ही URL च्या रिलेटिव्ह पथांना पूर्णपणे पात्र URL मध्ये रूपांतरित करण्यासाठी देखील या API चा उपयोग करू शकता."
✅ जर तुम्ही Edge साठी हे ब्राउझर एक्स्टेंशन विकसित करत असाल, तर तुम्हाला आश्चर्य वाटेल की तुम्ही chrome API वापरत आहात. Edge ब्राउझरच्या नवीन आवृत्त्या Chromium ब्राउझर इंजिनवर चालतात, त्यामुळे तुम्ही या टूल्सचा उपयोग करू शकता.
@ -100,7 +100,7 @@ chrome.runtime मध्ये [API](https://developer.chrome.com/extensions/run
### डिफॉल्ट आयकॉन रंग सेट करा
आता, `init()` फंक्शनमध्ये, आयकॉनला सुरुवातीला सामान्य हिरवा रंग सेट करा, पुन्हा chrome च्या `updateIcon` action कॉल करून:
आता, `init()` फंक्शनमध्ये, chrome च्या `updateIcon` action पुन्हा कॉल करून आयकॉनला सुरुवातीला सामान्य हिरवा रंग सेट करा:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### फंक्शन कॉल करा, कॉल अंमलात आणा
### फंक्शन कॉल करा, कॉल execute करा
त्यानंतर, तुम्ही तयार केलेल्या फंक्शनला C02Signal API द्वारे परत दिलेल्या promise मध्ये जोडा:
नंतर, तुम्ही नुकतेच तयार केलेले फंक्शन C02Signal API द्वारे परत केलेल्या प्रॉमिसमध्ये जोडून कॉल करा:
```JavaScript
//let CO2...
calculateColor(CO2);
```
आणि शेवटी, `/dist/background.js` मध्ये, या बॅकग्राउंड action कॉलसाठी listener जोडा:
आणि शेवटी, `/dist/background.js` मध्ये, या बॅकग्राउंड अॅक्शन कॉलसाठी listener जोडा:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -146,15 +145,15 @@ function drawIcon(value) {
✅ तुम्ही Canvas API बद्दल अधिक [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md) मध्ये शिकाल.
आता, तुमचे एक्स्टेंशन पुन्हा तयार करा (`npm run build`), रीफ्रेश करा आणि तुमचे एक्स्टेंशन लॉन्च करा, आणि रंग बदलताना पहा. एखाद्या कामासाठी बाहेर जाण्याची किंवा भांडी धुण्याची ही चांगली वेळ आहे का? आता तुम्हाला कळले!
आता, तुमचे एक्स्टेंशन पुन्हा तयार करा (`npm run build`), रीफ्रेश करा आणि तुमचे एक्स्टेंशन लॉन्च करा आणि रंग बदलताना पहा. एखादे काम करण्यासाठी किंवा भांडी धुण्यासाठी ही चांगली वेळ आहे का? आता तुम्हाला कळले!
अभिनंदन, तुम्ही एक उपयुक्त ब्राउझर एक्स्टेंशन तयार केले आहे आणि ब्राउझर कसे कार्य करते आणि त्याच्या कार्यक्षमतेचे प्रोफाइल कसे करायचे याबद्दल अधिक शिकले.
अभिनंदन, तुम्ही एक उपयुक्त ब्राउझर एक्स्टेंशन तयार केले आहे आणि ब्राउझर कसे कार्य करते आणि त्याच्या कार्यक्षमतेचे प्रोफाइल कसे तयार करायचे याबद्दल अधिक शिकले.
---
## 🚀 आव्हान
काही ओपन सोर्स वेबसाइट्स तपासा ज्या खूप पूर्वीपासून अस्तित्वात आहेत, आणि त्यांच्या GitHub इतिहासाच्या आधारे, त्या कार्यक्षमतेसाठी कशा ऑप्टिमाइझ केल्या गेल्या हे ठरवण्याचा प्रयत्न करा, जर त्या केल्या असतील. सर्वात सामान्य समस्या कोणती आहे?
काही ओपन सोर्स वेबसाइट्स तपासा ज्या खूप पूर्वीपासून आहेत आणि त्यांच्या GitHub इतिहासाच्या आधारे, त्यांनी कार्यक्षमतेसाठी कसे ऑप्टिमाइझ केले आहे हे ठरवू शकता का, जर ते केले असेल तर. सर्वात सामान्य समस्या कोणती आहे?
## पोस्ट-लेक्चर क्विझ
@ -164,7 +163,7 @@ function drawIcon(value) {
[परफॉर्मन्स न्यूजलेटर](https://perf.email/) साठी साइन अप करण्याचा विचार करा.
ब्राउझर वेब कार्यक्षमता कशी मोजतात याचे काही मार्ग तपासा, त्यांच्या वेब टूल्समधील कार्यक्षमता टॅब पाहून. तुम्हाला काही मोठे फरक आढळतात का?
ब्राउझर वेब कार्यक्षमता कशी मोजतात याबद्दल अधिक जाणून घेण्यासाठी त्यांच्या वेब टूल्समधील कार्यक्षमता टॅब तपासा. तुम्हाला काही मोठे फरक आढळतात का?
## असाइनमेंट
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**अस्वीकरण**:
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) चा वापर करून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित केला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयाआहे की स्वयंचलित भाषांतरांमध्ये चुका किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील मूळ दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
# Projek Sambungan Pelayar Bahagian 3: Belajar tentang Tugas Latar Belakang dan Prestasi
# Projek Sambungan Penyemak Imbas Bahagian 3: Belajar tentang Tugas Latar Belakang dan Prestasi
## Kuiz Pra-Kuliah
@ -15,17 +15,17 @@ CO_OP_TRANSLATOR_METADATA:
### Pengenalan
Dalam dua pelajaran terakhir modul ini, anda telah belajar cara membina borang dan kawasan paparan untuk data yang diambil dari API. Ini adalah cara yang sangat standard untuk mencipta kehadiran web di web. Anda juga telah belajar cara mengendalikan pengambilan data secara asinkron. Sambungan pelayar anda hampir siap sepenuhnya.
Dalam dua pelajaran terakhir modul ini, anda telah belajar cara membina borang dan kawasan paparan untuk data yang diambil dari API. Ini adalah cara yang sangat standard untuk mencipta kehadiran web di internet. Anda juga telah belajar cara mengendalikan pengambilan data secara asinkron. Sambungan penyemak imbas anda hampir siap sepenuhnya.
Masih ada tugas latar belakang yang perlu diuruskan, termasuk menyegarkan warna ikon sambungan, jadi ini adalah masa yang sesuai untuk membincangkan bagaimana pelayar menguruskan jenis tugas ini. Mari kita fikirkan tentang tugas pelayar ini dalam konteks prestasi aset web anda semasa anda membinanya.
Masih ada tugas latar belakang yang perlu diuruskan, termasuk menyegarkan warna ikon sambungan, jadi ini adalah masa yang sesuai untuk membincangkan bagaimana penyemak imbas menguruskan jenis tugas ini. Mari kita fikirkan tentang tugas penyemak imbas ini dalam konteks prestasi aset web anda semasa anda membangunkannya.
## Asas Prestasi Web
> "Prestasi laman web berkisar pada dua perkara: seberapa cepat halaman dimuat, dan seberapa cepat kod di dalamnya berjalan." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Topik tentang cara membuat laman web anda sangat pantas pada semua jenis peranti, untuk semua jenis pengguna, dalam semua jenis situasi, adalah sangat luas. Berikut adalah beberapa perkara yang perlu diingat semasa anda membina projek web standard atau sambungan pelayar.
Topik tentang cara membuat laman web anda sangat pantas pada semua jenis peranti, untuk semua jenis pengguna, dalam semua jenis situasi, adalah sangat luas. Berikut adalah beberapa perkara yang perlu diingat semasa anda membina projek web standard atau sambungan penyemak imbas.
Perkara pertama yang perlu anda lakukan untuk memastikan laman web anda berjalan dengan cekap adalah mengumpulkan data tentang prestasinya. Tempat pertama untuk melakukannya adalah dalam alat pembangun pelayar web anda. Dalam Edge, anda boleh memilih butang "Tetapan dan banyak lagi" (ikon tiga titik di bahagian atas kanan pelayar), kemudian navigasi ke Alat Lain > Alat Pembangun dan buka tab Prestasi. Anda juga boleh menggunakan pintasan papan kekunci `Ctrl` + `Shift` + `I` pada Windows atau `Option` + `Command` + `I` pada Mac untuk membuka alat pembangun.
Perkara pertama yang perlu anda lakukan untuk memastikan laman web anda berjalan dengan cekap ialah mengumpulkan data tentang prestasinya. Tempat pertama untuk melakukannya ialah dalam alat pembangun penyemak imbas web anda. Dalam Edge, anda boleh memilih butang "Tetapan dan banyak lagi" (ikon tiga titik di bahagian atas kanan penyemak imbas), kemudian pergi ke Alat Lain > Alat Pembangun dan buka tab Prestasi. Anda juga boleh menggunakan pintasan papan kekunci `Ctrl` + `Shift` + `I` pada Windows atau `Option` + `Command` + `I` pada Mac untuk membuka alat pembangun.
Tab Prestasi mengandungi alat Profiling. Buka laman web (cuba, sebagai contoh, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) dan klik butang 'Record', kemudian segarkan laman web tersebut. Hentikan rakaman pada bila-bila masa, dan anda akan dapat melihat rutin yang dihasilkan untuk 'script', 'render', dan 'paint' laman web:
@ -33,9 +33,9 @@ Tab Prestasi mengandungi alat Profiling. Buka laman web (cuba, sebagai contoh, [
✅ Lawati [Dokumentasi Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tentang panel Prestasi dalam Edge
> Tip: untuk mendapatkan bacaan yang tepat tentang masa permulaan laman web anda, kosongkan cache pelayar anda
> Tip: untuk mendapatkan bacaan yang tepat tentang masa permulaan laman web anda, kosongkan cache penyemak imbas anda
Pilih elemen garis masa profil untuk mengezum masuk pada acara yang berlaku semasa halaman anda dimuat.
Pilih elemen garis masa profil untuk memperbesar acara yang berlaku semasa halaman anda dimuat.
Dapatkan gambaran prestasi halaman anda dengan memilih bahagian garis masa profil dan melihat panel ringkasan:
@ -45,29 +45,29 @@ Periksa panel Log Acara untuk melihat jika ada acara yang mengambil masa lebih d
✅ Kenali profiler anda! Buka alat pembangun di laman ini dan lihat jika ada halangan. Apakah aset yang paling lambat dimuat? Yang paling pantas?
✅ Kenali profiler anda! Buka alat pembangun di laman ini dan lihat jika ada halangan. Apakah aset yang paling lambat dimuat? Yang paling cepat?
## Pemeriksaan Profiling
Secara umum, terdapat beberapa "kawasan masalah" yang setiap pembangun web harus perhatikan semasa membina laman web untuk mengelakkan kejutan yang tidak menyenangkan apabila tiba masa untuk melancarkan ke produksi.
**Saiz aset**: Web telah menjadi lebih 'berat', dan dengan itu lebih lambat, dalam beberapa tahun kebelakangan ini. Sebahagian daripada berat ini berkaitan dengan penggunaan imej.
**Saiz aset**: Web telah menjadi 'lebih berat', dan dengan itu lebih lambat, dalam beberapa tahun kebelakangan ini. Sebahagian daripada berat ini berkaitan dengan penggunaan imej.
✅ Lihat melalui [Internet Archive](https://httparchive.org/reports/page-weight) untuk pandangan sejarah tentang berat halaman dan banyak lagi.
Amalan yang baik adalah memastikan imej anda dioptimumkan dan dihantar pada saiz dan resolusi yang sesuai untuk pengguna anda.
**Traversals DOM**: Pelayar perlu membina Model Objek Dokumen berdasarkan kod yang anda tulis, jadi demi prestasi halaman yang baik, pastikan tag anda minimum, hanya menggunakan dan menggayakan apa yang diperlukan oleh halaman. Untuk perkara ini, CSS berlebihan yang dikaitkan dengan halaman boleh dioptimumkan; gaya yang hanya perlu digunakan pada satu halaman tidak perlu dimasukkan dalam helaian gaya utama, sebagai contoh.
**Traversals DOM**: Penyemak imbas perlu membina Model Objek Dokumen berdasarkan kod yang anda tulis, jadi demi prestasi halaman yang baik, pastikan tag anda minimum, hanya menggunakan dan menggayakan apa yang diperlukan oleh halaman. Dalam hal ini, CSS berlebihan yang dikaitkan dengan halaman boleh dioptimumkan; gaya yang hanya perlu digunakan pada satu halaman tidak perlu dimasukkan dalam helaian gaya utama, sebagai contoh.
**JavaScript**: Setiap pembangun JavaScript harus memerhatikan skrip 'render-blocking' yang mesti dimuat sebelum DOM yang lain dapat dilalui dan dilukis ke pelayar. Pertimbangkan untuk menggunakan `defer` dengan skrip inline anda (seperti yang dilakukan dalam modul Terrarium).
**JavaScript**: Setiap pembangun JavaScript harus memerhatikan skrip 'render-blocking' yang mesti dimuat sebelum DOM yang lain dapat dilalui dan dilukis ke penyemak imbas. Pertimbangkan untuk menggunakan `defer` dengan skrip inline anda (seperti yang dilakukan dalam modul Terrarium).
✅ Cuba beberapa laman web di laman [Ujian Kelajuan Laman Web](https://www.webpagetest.org/) untuk mengetahui lebih lanjut tentang pemeriksaan biasa yang dilakukan untuk menentukan prestasi laman web.
Sekarang anda mempunyai idea tentang bagaimana pelayar memaparkan aset yang anda hantar kepadanya, mari kita lihat beberapa perkara terakhir yang perlu anda lakukan untuk melengkapkan sambungan anda:
Sekarang anda mempunyai idea tentang bagaimana penyemak imbas melukis aset yang anda hantar kepadanya, mari kita lihat beberapa perkara terakhir yang perlu anda lakukan untuk melengkapkan sambungan anda:
### Cipta fungsi untuk mengira warna
### Buat fungsi untuk mengira warna
Bekerja dalam `/src/index.js`, tambahkan fungsi bernama`calculateColor()` selepas siri pembolehubah `const` yang anda tetapkan untuk mendapatkan akses kepada DOM:
Bekerja dalam `/src/index.js`, tambahkan fungsi yang dipanggil`calculateColor()` selepas siri pembolehubah `const` yang anda tetapkan untuk mendapatkan akses kepada DOM:
```JavaScript
function calculateColor(value) {
@ -90,13 +90,13 @@ function calculateColor(value) {
Apa yang berlaku di sini? Anda menghantar nilai (intensiti karbon) dari panggilan API yang anda selesaikan dalam pelajaran terakhir, dan kemudian anda mengira sejauh mana nilainya dengan indeks yang disajikan dalam array warna. Kemudian anda menghantar nilai warna terdekat itu ke runtime chrome.
Runtime chrome mempunyai [API](https://developer.chrome.com/extensions/runtime) yang mengendalikan pelbagai jenis tugas latar belakang, dan sambungan anda memanfaatkan itu:
Chrome.runtime mempunyai [API](https://developer.chrome.com/extensions/runtime) yang mengendalikan pelbagai jenis tugas latar belakang, dan sambungan anda memanfaatkan itu:
> "Gunakan API chrome.runtime untuk mendapatkan halaman latar belakang, mengembalikan butiran tentang manifest, dan mendengar serta bertindak balas terhadap acara dalam kitaran hayat aplikasi atau sambungan. Anda juga boleh menggunakan API ini untuk menukar laluan relatif URL kepada URL yang sepenuhnya layak."
> "Gunakan API chrome.runtime untuk mendapatkan halaman latar belakang, mengembalikan butiran tentang manifest, dan mendengar serta bertindak balas terhadap acara dalam kitaran hayat aplikasi atau sambungan. Anda juga boleh menggunakan API ini untuk menukar laluan relatif URL kepada URL yang layak sepenuhnya."
✅ Jika anda sedang membangunkan sambungan pelayar ini untuk Edge, mungkin mengejutkan anda bahawa anda menggunakan API chrome. Versi pelayar Edge yang lebih baru berjalan pada enjin pelayar Chromium, jadi anda boleh memanfaatkan alat ini.
✅ Jika anda sedang membangunkan sambungan penyemak imbas ini untuk Edge, mungkin mengejutkan anda bahawa anda menggunakan API chrome. Versi penyemak imbas Edge yang lebih baru berjalan pada enjin penyemak imbas Chromium, jadi anda boleh memanfaatkan alat ini.
> Nota, jika anda ingin memprofil sambungan pelayar, lancarkan alat pembangun dari dalam sambungan itu sendiri, kerana ia adalah instance pelayar yang berasingan.
> Nota, jika anda ingin memprofilkan sambungan penyemak imbas, lancarkan alat pembangun dari dalam sambungan itu sendiri, kerana ia adalah instance penyemak imbas yang berasingan.
### Tetapkan warna ikon lalai
@ -110,10 +110,9 @@ chrome.runtime.sendMessage({
},
});
```
### Panggil fungsi, laksanakan panggilan
Seterusnya, panggil fungsi yang baru anda cipta dengan menambahkannya kepada janji yang dikembalikan oleh API C02Signal:
Seterusnya, panggil fungsi yang baru anda buat dengan menambahkannya kepada janji yang dikembalikan oleh API C02Signal:
```JavaScript
//let CO2...
@ -125,12 +124,12 @@ Dan akhirnya, dalam `/dist/background.js`, tambahkan pendengar untuk panggilan t
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -146,9 +145,9 @@ Dalam kod ini, anda menambah pendengar untuk sebarang mesej yang datang kepada p
✅ Anda akan belajar lebih lanjut tentang API Canvas dalam [pelajaran Permainan Angkasa](../../6-space-game/2-drawing-to-canvas/README.md).
Sekarang, bina semula sambungan anda (`npm run build`), segarkan dan lancarkan sambungan anda, dan perhatikan perubahan warna. Adakah ini masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!
Sekarang, bina semula sambungan anda (`npm run build`), segarkan dan lancarkan sambungan anda, dan lihat warna berubah. Adakah ini masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!
Tahniah, anda telah membina sambungan pelayar yang berguna dan belajar lebih lanjut tentang bagaimana pelayar berfungsi dan cara memprofil prestasinya.
Tahniah, anda telah membina sambungan penyemak imbas yang berguna dan belajar lebih lanjut tentang bagaimana penyemak imbas berfungsi dan cara memprofilkan prestasinya.
---
@ -160,11 +159,11 @@ Selidiki beberapa laman web sumber terbuka yang telah wujud sejak lama dahulu, d
Pertimbangkan untuk mendaftar [buletin prestasi](https://perf.email/)
Pertimbangkan untuk mendaftar ke [buletin prestasi](https://perf.email/)
Selidiki beberapa cara pelayar mengukur prestasi web dengan melihat melalui tab prestasi dalam alat web mereka. Adakah anda menemui sebarang perbezaan besar?
Selidiki beberapa cara penyemak imbas mengukur prestasi web dengan melihat melalui tab prestasi dalam alat web mereka. Adakah anda menemui sebarang perbezaan utama?
## Tugasan
@ -173,4 +172,4 @@ Selidiki beberapa cara pelayar mengukur prestasi web dengan melihat melalui tab
---
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
ယေဘူယျအားဖြင့် site တစ်ခုကို production မှာ deploy လုပ်ဖို့အချိန်ရောက်တဲ့အခါ အဆိုးရွားဆုံးအံ့ဩစရာတွေကိုရှောင်ရှားဖို့အတွက် web developer တစ်ဦးအနေနဲ့ သတိထားရမယ့် "ပြဿနာဧရိယာ" တချို့ရှိပါတယ်။
အထွေထွေအားဖြင့် site တစ်ခုကို production မှာ deploy လုပ်တဲ့အခါ အဆင်မပြေတဲ့အရာတွေမဖြစ်စေရန် web developer တစ်ဦးအနေနဲ့ သတိထားရမယ့် "problem areas" တွေရှိပါတယ်။
✅ [Site Speed Test website](https://www.webpagetest.org/) မှာ site performance ကိုစစ်ဆေးတဲ့အခါ သာမန်စစ်ဆေးမှုတွေကိုလေ့လာပါ။
✅ [Site Speed Test website](https://www.webpagetest.org/) မှာ ဝက်ဘ်ဆိုဒ်တစ်ချို့ကိုစမ်းကြည့်ပြီး site performance ကိုသတ်မှတ်ဖို့ လုပ်ရတဲ့ common checks တွေကိုလေ့လာပါ။
`/src/index.js` မှာ `calculateColor()`လို့ခေါ်တဲ့ function တစ်ခုကို DOM ကို access လုပ်ဖို့ သတ်မှတ်ထားတဲ့ `const` variables တွေရဲ့နောက်မှာထည့်ပါ။
`/src/index.js` မှာ `calculateColor()`ဆိုတဲ့ function ကို DOM ကို access လုပ်ဖို့ သတ်မှတ်ထားတဲ့ `const` variables တွေပြီးရင်ထည့်ပါ:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
ဒီမှာဘာဖြစ်နေလဲ? သင် API call ကနေရရှိတဲ့ carbon intensity value ကို pass လုပ်ပြီး colors array မှာရှိတဲ့ index နဲ့ ဘယ်လောက်နီးလဲဆိုတာတွက်ချက်ပါတယ်။ ပြီးရင် အဲ့ဒီနီးဆုံး color value ကို chrome runtime ကိုပို့ပါတယ်။
ဒီမှာ ဘာဖြစ်နေလဲ? API call မှာရရှိတဲ့ carbon intensity value ကို pass လုပ်ပြီး colors array မှာရှိတဲ့ index နဲ့ value ရဲ့နီးစပ်မှုကိုတွက်ချက်ပါတယ်။ ပြီးရင် အနီးဆုံး color value ကို chrome runtime ကိုပို့ပါတယ်။
# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनबारे जान्नुहोस्
# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनको बारेमा जान्नुहोस्
## प्रि-लेक्चर क्विज
@ -15,59 +15,59 @@ CO_OP_TRANSLATOR_METADATA:
### परिचय
यस मोड्युलका पछिल्ला दुई पाठहरूमा, तपाईंले API बाट डेटा ल्याउनको लागि फारम र प्रदर्शन क्षेत्र निर्माण गर्ने तरिका सिक्नुभयो। यो वेबमा वेब उपस्थिति सिर्जना गर्ने एकदम सामान्य तरिका हो। तपाईंले डेटा असिन्क्रोनस रूपमा ल्याउनको लागि कसरी ह्यान्डल गर्ने भन्ने पनि सिक्नुभयो। तपाईंको ब्राउजर एक्सटेन्सन लगभग तयार छ।
यस मोड्युलका पछिल्ला दुई पाठहरूमा, तपाईंले API बाट डेटा ल्याउनको लागि फारम र प्रदर्शन क्षेत्र निर्माण गर्ने तरिका सिक्नुभयो। यो वेबमा वेब उपस्थिति सिर्जना गर्ने एकदमै सामान्य तरिका हो। तपाईंले डेटा असिंक्रोनस रूपमा ल्याउनको लागि कसरी ह्यान्डल गर्ने भन्ने पनि सिक्नुभयो। तपाईंको ब्राउजर एक्सटेन्सन लगभग तयार छ।
अब केही पृष्ठभूमि कार्यहरू व्यवस्थापन गर्न बाँकी छ, जसमा एक्सटेन्सनको आइकनको रंग ताजा गर्ने कार्य पनि समावेश छ। यो ब्राउजरले यस प्रकारको कार्य कसरी व्यवस्थापन गर्छ भन्ने कुरा बुझ्नको लागि राम्रो समय हो। तपाईंले निर्माण गरिरहेका वेब सम्पत्तिहरूको प्रदर्शनको सन्दर्भमा यी ब्राउजर कार्यहरूबारे सोचौं।
अब केही पृष्ठभूमि कार्यहरू व्यवस्थापन गर्न बाँकी छ, जसमा एक्सटेन्सनको आइकनको रंग ताजा गर्ने समावेश छ। यो ब्राउजरले यस प्रकारको कार्य कसरी व्यवस्थापन गर्छ भन्ने कुरा बुझ्नको लागि राम्रो समय हो। तपाईंले निर्माण गरिरहेका वेब सम्पत्तिहरूको प्रदर्शनको सन्दर्भमा यी ब्राउजर कार्यहरूबारे सोचौं।
## वेब प्रदर्शनको आधारभूत कुरा
> "वेबसाइट प्रदर्शन दुई कुराबारे हो: पृष्ठ कति छिटो लोड हुन्छ, र त्यसमा रहेको कोड कति छिटो चल्छ।" -- [ज्याक ग्रोसबार्ट](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "वेबसाइट प्रदर्शन दुई कुराहरूको बारेमा हो: पृष्ठ कति छिटो लोड हुन्छ, र त्यसमा रहेको कोड कति छिटो चल्छ।" -- [ज्याक ग्रोसबार्ट](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
वेबसाइटहरूलाई सबै प्रकारका उपकरणहरू, सबै प्रकारका प्रयोगकर्ताहरू, र सबै प्रकारका परिस्थितिहरूमा अत्यन्त छिटो बनाउने विषय अपेक्षाकृत विशाल छ। यहाँ केही बुँदाहरू छन् जुन तपाईंले सामान्य वेब प्रोजेक्ट वा ब्राउजर एक्सटेन्सन निर्माण गर्दा ध्यानमा राख्नुपर्छ।
वेबसाइटलाई सबै प्रकारका उपकरणहरू, सबै प्रकारका प्रयोगकर्ताहरू, र सबै प्रकारका परिस्थितिहरूमा अत्यन्त छिटो बनाउने तरिका एक विशाल विषय हो। यहाँ केही बुँदाहरू छन् जुन तपाईंले सामान्य वेब प्रोजेक्ट वा ब्राउजर एक्सटेन्सन निर्माण गर्दा ध्यानमा राख्नुपर्छ।
तपाईंको साइट कुशलतापूर्वक चलिरहेको छ भन्ने सुनिश्चित गर्नको लागि पहिलो कुरा भनेको यसको प्रदर्शनको डेटा संकलन गर्नु हो। यसको पहिलो स्थान भनेको तपाईंको वेब ब्राउजरको डेभलपर टूल्स हो। Edge मा, तपाईं "सेटिङ्स र थप" बटन (ब्राउजरको माथि दायाँपट्टि रहेको तीन डट आइकन) चयन गर्न सक्नुहुन्छ, त्यसपछि More Tools > Developer Tools मा जानुहोस् र Performance ट्याब खोल्नुहोस्। तपाईं Windows मा `Ctrl` + `Shift` + `I` वा Mac मा `Option` + `Command` + `I` प्रयोग गरेर डेभलपर टूल्स खोल्न सक्नुहुन्छ।
तपाईंको साइट कुशलतापूर्वक चलिरहेको छ भन्ने सुनिश्चित गर्नको लागि पहिलो कुरा भनेको यसको प्रदर्शनको डेटा संकलन गर्नु हो। यसको लागि पहिलो स्थान भनेको तपाईंको वेब ब्राउजरको डेभलपर टूल्स हो। Edge मा, तपाईं "सेटिङ्स र थप" बटन (ब्राउजरको माथि दायाँपट्टि रहेको तीन डट आइकन) चयन गर्न सक्नुहुन्छ, त्यसपछि More Tools > Developer Tools मा जानुहोस् र Performance ट्याब खोल्नुहोस्। तपाईं Windows मा `Ctrl` + `Shift` + `I` वा Mac मा `Option` + `Command` + `I`कीबोर्ड सर्टकट प्रयोग गरेर पनि डेभलपर टूल्स खोल्न सक्नुहुन्छ।
Performance ट्याबमा एक प्रोफाइलिङ टूल हुन्छ। कुनै वेबसाइट खोल्नुहोस् (उदाहरणको लागि, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) र 'Record' बटन क्लिक गर्नुहोस्, त्यसपछि साइटलाई रिफ्रेस गर्नुहोस्। कुनै पनि समयमा रेकर्डिङ रोक्नुहोस्, र तपाईंले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्न उत्पन्न हुने रुटिनहरू देख्न सक्नुहुन्छ:
Performance ट्याबमा एक प्रोफाइलिङ टूल हुन्छ। कुनै वेबसाइट खोल्नुहोस् (उदाहरणको लागि, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) र 'Record' बटन क्लिक गर्नुहोस्, त्यसपछि साइटलाई रिफ्रेस गर्नुहोस्। कुनै पनि समयमा रेकर्डिङ रोक्नुहोस्, र तपाईंले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्न उत्पन्न भएका रुटिनहरू देख्न सक्नुहुन्छ:
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा Edge को Performance प्यानलबारे जान्नुहोस्।
✅ Edge मा Performance प्यानलको बारेमा [Microsoft डकुमेन्टेशन](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) हेर्नुहोस्।
> टिप: तपाईंको वेबसाइटको स्टार्टअप समयको सही रिडिङ प्राप्त गर्नको लागि, तपाईंको ब्राउजरको क्यास खाली गर्नुहोस्।
प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्।
प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर तपाईंको पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्।
प्रोफाइल टाइमलाइनको कुनै भाग चयन गरेर र समरी प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:
✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र हेर्नुहोस् कि कुनै बोटलनेक छ कि छैन। सबैभन्दा ढिलो लोड हुने सम्पत्ति कुन हो? सबैभन्दा छिटो?
✅ तपाईंको प्रोफाइलरलाई राम्रोसँग चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै बोटलनेक छ कि छैन हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति कुन हो? सबैभन्दा छिटो?
## प्रोफाइलिङ जाँचहरू
सामान्यतया, केही "समस्या क्षेत्रहरू" छन् जसलाई प्रत्येक वेब डेभलपरले साइट निर्माण गर्दा ध्यान दिनुपर्छ ताकि उत्पादनमा डिप्लोय गर्ने समय अप्रिय आश्चर्यहरूबाट बच्न सकियोस्।
सामान्यतया, केही "समस्या क्षेत्रहरू" छन् जुन प्रत्येक वेब डेभलपरले साइट निर्माण गर्दा ध्यान दिनुपर्छ ताकि उत्पादनमा डिप्लोय गर्ने समय अप्रिय आश्चर्यहरूबाट बच्न सकियोस्।
**एसेट साइजहरू**: पछिल्ला केही वर्षहरूमा वेब 'भारी' भएको छ, र यसैले ढिलो पनि। यस तौलको केही भाग छविहरूको प्रयोगसँग सम्बन्धित छ।
**एसेट साइजहरू**: पछिल्ला केही वर्षहरूमा वेब 'भारी' भएको छ, र त्यसैले ढिलो पनि। यस तौलको केही भाग छविहरूको प्रयोगसँग सम्बन्धित छ।
✅ [Internet Archive](https://httparchive.org/reports/page-weight) हेरेर पृष्ठको तौलको ऐतिहासिक दृश्य र थप जानकारी प्राप्त गर्नुहोस्।
✅ [इन्टरनेट आर्काइभ](https://httparchive.org/reports/page-weight) हेर्नुहोस् पृष्ठको तौलको ऐतिहासिक दृश्य र थप जानकारीको लागि।
एक राम्रो अभ्यास भनेको सुनिश्चित गर्नु हो कि तपाईंको छविहरू अनुकूलित छन् र तपाईंका प्रयोगकर्ताहरूको लागि सही आकार र रिजोल्युसनमा प्रदान गरिएका छन्।
एक राम्रो अभ्यास भनेको तपाईंको छविहरूलाई अनुकूलित गर्नु र तपाईंका प्रयोगकर्ताहरूको लागि सही साइज र रिजोल्युसनमा डेलिभर गर्नु हो।
**DOM ट्राभर्सलहरू**: ब्राउजरले तपाईंले लेखेको कोडको आधारमा यसको Document Object Model निर्माण गर्नुपर्छ, त्यसैले राम्रो पृष्ठ प्रदर्शनको लागि तपाईंका ट्यागहरू न्यूनतम राख्नु राम्रो हुन्छ। पृष्ठले आवश्यक पर्ने मात्र प्रयोग र स्टाइल गर्नुहोस्। यस बुँदामा, पृष्ठसँग सम्बन्धित अतिरिक्त CSS अनुकूलित गर्न सकिन्छ; उदाहरणका लागि, केवल एक पृष्ठमा प्रयोग गर्न आवश्यक पर्ने स्टाइलहरू मुख्य स्टाइल शीटमा समावेश गर्न आवश्यक छैन।
**DOM ट्राभर्सलहरू**: ब्राउजरले तपाईंले लेखेको कोडको आधारमा यसको Document Object Model निर्माण गर्नुपर्छ, त्यसैले राम्रो पृष्ठ प्रदर्शनको लागि तपाईंको ट्यागहरू न्यूनतम राख्नु राम्रो हुन्छ। पृष्ठलाई आवश्यक पर्ने मात्र प्रयोग गर्नुहोस् र स्टाइल गर्नुहोस्। यस बुँदामा, पृष्ठसँग सम्बन्धित अतिरिक्त CSS अनुकूलित गर्न सकिन्छ; उदाहरणका लागि, केवल एक पृष्ठमा प्रयोग गर्न आवश्यक स्टाइलहरू मुख्य स्टाइल शीटमा समावेश गर्न आवश्यक छैन।
**जाभास्क्रिप्ट**: प्रत्येक जाभास्क्रिप्ट डेभलपरले 'रेन्डर-ब्लकिङ' स्क्रिप्टहरूको लागि ध्यान दिनुपर्छ जसले DOM ट्राभर्स र ब्राउजरमा पेन्ट गर्नुअघि लोड हुनुपर्छ। तपाईंका इनलाइन स्क्रिप्टहरूसँग `defer` प्रयोग गर्ने विचार गर्नुहोस् (जसरी Terrarium मोड्युलमा गरिएको छ)।
**जाभास्क्रिप्ट**: प्रत्येक जाभास्क्रिप्ट डेभलपरले 'रेन्डर-ब्लकिङ' स्क्रिप्टहरूको लागि ध्यान दिनुपर्छ जुन DOM ट्राभर्स र ब्राउजरमा पेन्ट गर्नुअघि लोड गर्नुपर्छ। तपाईंको इनलाइन स्क्रिप्टहरूसँग `defer` प्रयोग गर्ने विचार गर्नुहोस् (जसरी Terrarium मोड्युलमा गरिएको छ)।
✅ साइट प्रदर्शन निर्धारण गर्न गरिने सामान्य जाँचहरूबारे थप जान्नको लागि [Site Speed Test वेबसाइट](https://www.webpagetest.org/) मा केही साइटहरू प्रयास गर्नुहोस्।
✅ साइट प्रदर्शन निर्धारण गर्न गरिने सामान्य जाँचहरूको बारेमा थप जान्नको लागि [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) मा केही साइटहरू प्रयास गर्नुहोस्।
अब तपाईंलाई ब्राउजरले तपाईंले पठाएका सम्पत्तिहरू कसरी रेन्डर गर्छ भन्ने थाहा छ, अब तपाईंको एक्सटेन्सन पूरा गर्न आवश्यक अन्तिम केही कुराहरू हेरौं:
अब तपाईंलाई ब्राउजरले तपाईंले पठाएका सम्पत्तिहरू कसरी रेन्डर गर्छ भन्ने थाहा छ, अब तपाईंको एक्सटेन्सन पूरा गर्न आवश्यक अन्तिम केही कुराहरू हेर्नुहोस्:
### रंग गणना गर्ने फङ्सन सिर्जना गर्नुहोस्
`/src/index.js` मा काम गर्दै, `calculateColor()` नामक फङ्सनलाई DOM पहुँच गर्न सेट गरिएका `const` भेरिएबलहरूको श्रृंखलापछि थप्नुहोस्:
`/src/index.js` मा काम गर्दै, `calculateColor()` नामक फङ्सनलाई तपाईंले DOM पहुँच गर्न सेट गरेका `const` भेरिएबलहरूको श्रृंखलापछि थप्नुहोस्:
```JavaScript
function calculateColor(value) {
@ -92,15 +92,15 @@ function calculateColor(value) {
क्रोम रनटाइमसँग [एक API](https://developer.chrome.com/extensions/runtime) छ जसले सबै प्रकारका पृष्ठभूमि कार्यहरू ह्यान्डल गर्छ, र तपाईंको एक्सटेन्सनले यसलाई प्रयोग गरिरहेको छ:
> "क्रोम रनटाइम API प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनःप्राप्त गर्नुहोस्, म्यानिफेस्टको विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन लाइफसाइकलमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईंले यस API प्रयोग गरेर URLहरूको सापेक्ष पथलाई पूर्ण-योग्य URLहरूमा रूपान्तरण गर्न पनि सक्नुहुन्छ।"
> "क्रोम रनटाइम API प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनःप्राप्त गर्नुहोस्, म्यानिफेस्टको विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन लाइफसाइकलमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईं यस API प्रयोग गरेर URLहरूको सापेक्ष पथलाई पूर्ण-योग्य URLहरूमा रूपान्तरण गर्न सक्नुहुन्छ।"
✅ यदि तपाईं Edge को लागि यो ब्राउजर एक्सटेन्सन विकास गर्दै हुनुहुन्छ भने, तपाईंलाई आश्चर्य लाग्न सक्छ कि तपाईं क्रोम API प्रयोग गर्दै हुनुहुन्छ। Edge ब्राउजरका नयाँ संस्करणहरू Chromium ब्राउजर इन्जिनमा चल्छन्, त्यसैले तपाईंले यी उपकरणहरू प्रयोग गर्न सक्नुहुन्छ।
✅ यदि तपाईं Edge को लागि यो ब्राउजर एक्सटेन्सन विकास गर्दै हुनुहुन्छ भने, तपाईंलाई आश्चर्य लाग्न सक्छ कि तपाईं क्रोम API प्रयोग गर्दै हुनुहुन्छ। Edge ब्राउजरका नयाँ संस्करणहरू Chromium ब्राउजर इन्जिनमा चल्छन्, त्यसैले तपाईं यी उपकरणहरू प्रयोग गर्न सक्नुहुन्छ।
> नोट, यदि तपाईं ब्राउजर एक्सटेन्सन प्रोफाइल गर्न चाहनुहुन्छ भने, एक्सटेन्सनभित्रै डेभलपर टूल्स खोल्नुहोस्, किनकि यो आफ्नै अलग ब्राउजर इन्स्ट्यान्स हो।
> नोट, यदि तपाईं ब्राउजर एक्सटेन्सन प्रोफाइल गर्न चाहनुहुन्छ भने, एक्सटेन्सन भित्रबाट डेभलपर टूल्स सुरू गर्नुहोस्, किनकि यो आफ्नै अलग ब्राउजर इन्स्ट्यान्स हो।
### डिफल्ट आइकन रंग सेट गर्नुहोस्
अब, `init()` फङ्सनमा, आइकनलाई सुरुमा सामान्य हरियो रंगमा सेट गर्नुहोस् र फेरि क्रोमको `updateIcon` एक्सनलाई कल गर्नुहोस्:
अब, `init()` फङ्सनमा, आइकनलाई सुरुमा सामान्य हरियो रंगमा सेट गर्नुहोस् क्रोमको `updateIcon` एक्सनलाई फेरि कल गरेर:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### फङ्सन कल गर्नुहोस्, कल कार्यान्वयन गर्नुहोस्
अब, तपाईंले पछिल्लो पाठमा पूरा गरेको C02Signal API द्वारा फर्काइएको प्रॉमिसमा यो फङ्सनलाई कल गर्नुहोस्:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,29 +141,29 @@ function drawIcon(value) {
}
```
यस कोडमा, तपाईंले ब्याकएन्ड टास्क म्यानेजरमा आउने कुनै पनि सन्देशहरूको लागि लिस्नर थप्दै हुनुहुन्छ। यदि यसलाई 'updateIcon' भनिन्छ भने, त्यसपछि सही रंगको आइकन क्यानभास API प्रयोग गरेर ड्र गर्न अर्को कोड चलाइन्छ।
यस कोडमा, तपाईं पृष्ठभूमि टास्क म्यानेजरमा आउने कुनै पनि सन्देशहरूको लागि लिस्नर थप्दै हुनुहुन्छ। यदि यसलाई 'updateIcon' भनिन्छ भने, त्यसपछि अर्को कोड चल्छ जसले Canvas API प्रयोग गरेर सही रंगको आइकन बनाउँछ।
✅ तपाईं [Space Game पाठहरू](../../6-space-game/2-drawing-to-canvas/README.md) मा क्यानभास API को बारेमा थप जान्नुहुनेछ।
✅ तपाईं [Space Game पाठहरू](../../6-space-game/2-drawing-to-canvas/README.md) मा Canvas API को बारेमा थप जान्नुहुनेछ।
अब, तपाईंको एक्सटेन्सन पुनः निर्माण गर्नुहोस् (`npm run build`), रिफ्रेस गर्नुहोस् र तपाईंको एक्सटेन्सन सुरु गर्नुहोस्, र रंग परिवर्तन हेर्नुहोस्। के यो काम गर्न वा भाँडा माझ्न जाने राम्रो समय हो? अब तपाईंलाई थाहा छ!
अब, तपाईंको एक्सटेन्सन पुनः निर्माण गर्नुहोस् (`npm run build`), रिफ्रेस गर्नुहोस् र तपाईंको एक्सटेन्सन सुरू गर्नुहोस्, र रंग परिवर्तन हेर्नुहोस्। के यो काम गर्नको लागि राम्रो समय हो? अब तपाईंलाई थाहा छ!
बधाई छ, तपाईंले उपयोगी ब्राउजर एक्सटेन्सन निर्माण गर्नुभयो र ब्राउजर कसरी काम गर्छ र यसको प्रदर्शन कसरी प्रोफाइल गर्ने भन्ने बारे थप सिक्नुभयो।
बधाई छ, तपाईंले उपयोगी ब्राउजर एक्सटेन्सन निर्माण गर्नुभयो र ब्राउजर कसरी काम गर्छ र यसको प्रदर्शन कसरी प्रोफाइल गर्ने भन्ने बारेमा थप सिक्नुभयो।
---
## 🚀 चुनौती
केही पुराना ओपन सोर्स वेबसाइटहरू अन्वेषण गर्नुहोस्, र तिनीहरूको GitHub इतिहासको आधारमा, तिनीहरू प्रदर्शनको लागि वर्षौंसम्म कसरी अनुकूलित गरिए भन्ने निर्धारण गर्न प्रयास गर्नुहोस्। सबैभन्दा सामान्य समस्या क्षेत्र कुन हो?
केही पुराना ओपन सोर्स वेबसाइटहरूको अनुसन्धान गर्नुहोस्, र तिनीहरूको GitHub इतिहासको आधारमा, तिनीहरू प्रदर्शनको लागि वर्षौंसम्म कसरी अनुकूलित गरिएका थिए भनेर निर्धारण गर्न प्रयास गर्नुहोस्। सबैभन्दा सामान्य समस्या क्षेत्र के हो?
[प्रदर्शन न्यूजलेटर](https://perf.email/) को लागि साइन अप गर्ने विचार गर्नुहोस्।
वेब टूल्सका प्रदर्शन ट्याबहरू हेरेर ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरू अन्वेषण गर्नुहोस्। के तपाईंले कुनै प्रमुख भिन्नता पाउनुभयो?
वेब टूल्सका प्रदर्शन ट्याबहरू हेरेर ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरूको अनुसन्धान गर्नुहोस्। के तपाईंले कुनै ठूला भिन्नता पाउनुभयो?
## असाइनमेन्ट
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**अस्वीकरण**:
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरी अनुवाद गरिएको हो। हामी यथासम्भव शुद्धताको लागि प्रयास गर्छौं, तर कृपया जानकार रहनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छन्। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्त्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
In de laatste twee lessen van deze module heb je geleerd hoe je een formulier en een weergavegebied kunt maken voor gegevens die worden opgehaald van een API. Dit is een zeer standaard manier om een webaanwezigheid te creëren. Je hebt zelfs geleerd hoe je gegevens asynchroon kunt ophalen. Je browserextensie is bijna klaar.
In de laatste twee lessen van deze module heb je geleerd hoe je een formulier en een weergavegebied kunt bouwen voor gegevens die worden opgehaald via een API. Dit is een zeer standaard manier om een webaanwezigheid te creëren op het internet. Je hebt zelfs geleerd hoe je gegevens asynchroon kunt ophalen. Je browserextensie is bijna klaar.
Het enige wat nog moet gebeuren, is het beheren van enkele achtergrondtaken, zoals het verversen van de kleur van het pictogram van de extensie. Dit is een goed moment om te bespreken hoe de browser dit soort taken beheert. Laten we nadenken over deze browsertaken in de context van de prestaties van je webassets terwijl je ze bouwt.
Wat nog rest is het beheren van enkele achtergrondtaken, waaronder het verversen van de kleur van het pictogram van de extensie. Dit is een goed moment om te bespreken hoe de browser dit soort taken beheert. Laten we nadenken over deze browsertaken in de context van de prestaties van je webassets terwijl je ze bouwt.
## Basisprincipes van Webprestaties
> "Websiteprestaties gaan over twee dingen: hoe snel de pagina laadt en hoe snel de code op de pagina wordt uitgevoerd." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Websiteprestaties gaan over twee dingen: hoe snel de pagina laadt en hoe snel de code erop wordt uitgevoerd." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Het onderwerp hoe je je websites razendsnel kunt maken op allerlei apparaten, voor allerlei gebruikers, in allerlei situaties, is niet verrassend enorm uitgebreid. Hier zijn enkele punten om in gedachten te houden terwijl je een standaard webproject of een browserextensie bouwt.
Het onderwerp hoe je je websites razendsnel kunt maken op allerlei soorten apparaten, voor allerlei soorten gebruikers, in allerlei situaties, is niet verrassend enorm uitgebreid. Hier zijn enkele punten om in gedachten te houden terwijl je een standaard webproject of een browserextensie bouwt.
Het eerste wat je moet doen om ervoor te zorgen dat je site efficiënt werkt, is gegevens verzamelen over de prestaties. De eerste plek om dit te doen is in de ontwikkelaarstools van je webbrowser. In Edge kun je de knop "Instellingen en meer" selecteren (het pictogram met de drie stippen rechtsboven in de browser), vervolgens naar Meer Hulpmiddelen > Ontwikkelaarstools navigeren en het tabblad Prestaties openen. Je kunt ook de sneltoetsen `Ctrl` + `Shift` + `I` op Windows of `Option` + `Command` + `I` op Mac gebruiken om de ontwikkelaarstools te openen.
Het eerste wat je moet doen om ervoor te zorgen dat je site efficiënt werkt, is gegevens verzamelen over de prestaties ervan. De eerste plek om dit te doen is in de ontwikkelaarstools van je webbrowser. In Edge kun je de knop "Instellingen en meer" selecteren (het pictogram met drie stippen rechtsboven in de browser), vervolgens navigeren naar Meer Hulpmiddelen > Ontwikkelaarstools en het tabblad Prestaties openen. Je kunt ook de sneltoetsen `Ctrl` + `Shift` + `I` op Windows of `Option` + `Command` + `I` op Mac gebruiken om de ontwikkelaarstools te openen.
Het tabblad Prestaties bevat een Profileringstool. Open een website (bijvoorbeeld [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) en klik op de knop 'Opnemen', ververs vervolgens de site. Stop de opname op elk moment en je kunt de routines zien die worden gegenereerd om de site te 'scripten', 'renderen' en 'tekenen':
Het tabblad Prestaties bevat een Profiling-tool. Open een website (probeer bijvoorbeeld [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) en klik op de knop 'Record', ververs vervolgens de site. Stop de opname op elk moment en je kunt de routines zien die worden gegenereerd om de site te 'script', 'renderen' en 'schilderen':
✅ Bezoek de [Microsoft-documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) over het tabblad Prestaties in Edge.
✅ Bezoek de [Microsoft Documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) over het Prestaties-paneel in Edge.
> Tip: om een nauwkeurige meting van de opstarttijd van je website te krijgen, wis je de cache van je browser.
@ -41,33 +41,33 @@ Krijg een momentopname van de prestaties van je pagina door een deel van de prof
✅ Maak kennis met je profiler! Open de ontwikkelaarstools op deze site en kijk of er knelpunten zijn. Wat is het langzaamst ladende asset? Het snelst?
✅ Leer je profiler kennen! Open de ontwikkelaarstools op deze site en kijk of er knelpunten zijn. Wat is het langzaamst ladende asset? Het snelst?
## Profileringscontroles
## Profiling-controles
Over het algemeen zijn er enkele "probleemgebieden" waar elke webontwikkelaar op moet letten bij het bouwen van een site om vervelende verrassingen te voorkomen wanneer het tijd is om naar productie te gaan.
**Assetgroottes**: Het web is de afgelopen jaren 'zwaarder' en daardoor trager geworden. Een deel van dit gewicht heeft te maken met het gebruik van afbeeldingen.
**Assetgroottes**: Het web is de afgelopen jaren 'zwaarder' en dus langzamer geworden. Een deel van dit gewicht heeft te maken met het gebruik van afbeeldingen.
✅ Bekijk het [Internetarchief](https://httparchive.org/reports/page-weight) voor een historisch overzicht van paginagewicht en meer.
✅ Bekijk het [Internet Archive](https://httparchive.org/reports/page-weight) voor een historisch overzicht van paginagewicht en meer.
Een goede praktijk is ervoor te zorgen dat je afbeeldingen zijn geoptimaliseerd en worden geleverd in het juiste formaat en de juiste resolutie voor je gebruikers.
Een goede praktijk is ervoor te zorgen dat je afbeeldingen zijn geoptimaliseerd en worden geleverd op de juiste grootte en resolutie voor je gebruikers.
**DOM-traversals**: De browser moet zijn Document Object Model bouwen op basis van de code die je schrijft, dus het is in het belang van goede paginaprestaties om je tags minimaal te houden en alleen te gebruiken en te stylen wat de pagina nodig heeft. In dit opzicht kan overtollige CSS die aan een pagina is gekoppeld worden geoptimaliseerd; stijlen die alleen op één pagina nodig zijn, hoeven bijvoorbeeld niet in het hoofdstijlblad te worden opgenomen.
**DOM-traversals**: De browser moet zijn Document Object Model bouwen op basis van de code die je schrijft, dus het is in het belang van goede pagina-prestaties om je tags minimaal te houden, alleen te gebruiken en te stylen wat de pagina nodig heeft. Tot dit punt kan overtollige CSS die aan een pagina is gekoppeld worden geoptimaliseerd; stijlen die alleen op één pagina hoeven te worden gebruikt, hoeven bijvoorbeeld niet te worden opgenomen in het hoofdstijlblad.
**JavaScript**: Elke JavaScript-ontwikkelaar moet letten op 'render-blocking'-scripts die moeten worden geladen voordat de rest van de DOM kan worden doorlopen en naar de browser kan worden getekend. Overweeg het gebruik van `defer` met je inline scripts (zoals gedaan in de Terrarium-module).
**JavaScript**: Elke JavaScript-ontwikkelaar moet letten op 'render-blocking'scripts die moeten worden geladen voordat de rest van de DOM kan worden doorlopen en naar de browser kan worden geschilderd. Overweeg het gebruik van `defer` met je inline scripts (zoals gedaan in de Terrarium-module).
✅ Probeer enkele sites op een [Site Speed Test-website](https://www.webpagetest.org/) om meer te leren over de gebruikelijke controles die worden uitgevoerd om de prestaties van een site te bepalen.
✅ Probeer enkele sites op een [Site Speed Testwebsite](https://www.webpagetest.org/) om meer te leren over de gebruikelijke controles die worden uitgevoerd om de prestaties van een site te bepalen.
Nu je een idee hebt van hoe de browser de assets rendert die je naar hem stuurt, laten we kijken naar de laatste paar dingen die je moet doen om je extensie te voltooien:
### Maak een functie om kleur te berekenen
Werk in `/src/index.js` en voeg een functie genaamd `calculateColor()` toe na de reeks `const`-variabelen die je hebt ingesteld om toegang te krijgen tot de DOM:
Werkend in `/src/index.js`, voeg een functie genaamd `calculateColor()` toe na de reeks `const`-variabelen die je hebt ingesteld om toegang te krijgen tot de DOM:
```JavaScript
function calculateColor(value) {
@ -94,9 +94,9 @@ De chrome.runtime heeft [een API](https://developer.chrome.com/extensions/runtim
> "Gebruik de chrome.runtime API om de achtergrondpagina op te halen, details over het manifest te retourneren en te luisteren naar en te reageren op gebeurtenissen in de levenscyclus van de app of extensie. Je kunt deze API ook gebruiken om het relatieve pad van URL's om te zetten naar volledig gekwalificeerde URL's."
✅ Als je deze browserextensie ontwikkelt voor Edge, kan het je verrassen dat je een chrome API gebruikt. De nieuwere Edge-browserversies draaien op de Chromium-browserengine, dus je kunt deze tools gebruiken.
✅ Als je deze browserextensie voor Edge ontwikkelt, kan het je verrassen dat je een chrome API gebruikt. De nieuwere Edge-browserversies draaien op de Chromium-browserengine, dus je kunt deze tools gebruiken.
> Opmerking: als je een browserextensie wilt profileren, start je de ontwikkelaarstools vanuit de extensie zelf, omdat deze zijn eigen aparte browserinstantie is.
> Let op, als je een browserextensie wilt profileren, start je de ontwikkelaarstools vanuit de extensie zelf, omdat deze een eigen aparte browserinstantie is.
### Stel een standaardkleur voor het pictogram in
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Roep de functie aan, voer de oproep uit
Roep vervolgens de functie die je zojuist hebt gemaakt aan door deze toe te voegen aan de belofte die wordt geretourneerd door de C02Signal API:
@ -120,17 +119,17 @@ Roep vervolgens de functie die je zojuist hebt gemaakt aan door deze toe te voeg
calculateColor(CO2);
```
En voeg ten slotte in `/dist/background.js` de luisteraar toe voor deze achtergrondactie-aanroepen:
En voeg ten slotte in `/dist/background.js` de listener toe voor deze achtergrondactie-oproepen:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,7 +141,7 @@ function drawIcon(value) {
}
```
In deze code voeg je een luisteraar toe voor alle berichten die naar de backend-taakbeheerder worden gestuurd. Als het 'updateIcon' wordt genoemd, wordt de volgende code uitgevoerd om een pictogram van de juiste kleur te tekenen met behulp van de Canvas API.
In deze code voeg je een listener toe voor alle berichten die naar de backend-taakbeheerder worden verzonden. Als het 'updateIcon' wordt genoemd, wordt de volgende code uitgevoerd om een pictogram van de juiste kleur te tekenen met behulp van de Canvas API.
✅ Je leert meer over de Canvas API in de [Space Game-lessen](../../6-space-game/2-drawing-to-canvas/README.md).
@ -154,17 +153,17 @@ Gefeliciteerd, je hebt een nuttige browserextensie gebouwd en meer geleerd over
## 🚀 Uitdaging
Onderzoek enkele open source-websites die al lang bestaan en kijk op basis van hun GitHub-geschiedenis of je kunt bepalen hoe ze in de loop der jaren zijn geoptimaliseerd voor prestaties, als dat al is gebeurd. Wat is het meest voorkomende pijnpunt?
Onderzoek enkele open source-websites die al lang bestaan, en kijk op basis van hun GitHub-geschiedenis of je kunt bepalen hoe ze in de loop der jaren zijn geoptimaliseerd voor prestaties, als dat al is gebeurd. Wat is het meest voorkomende pijnpunt?
## Quiz na de les
## Post-Lecture Quiz
[Quiz na de les](https://ff-quizzes.netlify.app/web/quiz/28)
Overweeg je aan te melden voor een [prestatie-nieuwsbrief](https://perf.email/).
Overweeg je aan te melden voor een [prestaties-nieuwsbrief](https://perf.email/).
Onderzoek enkele manieren waarop browsers webprestaties meten door de prestatietabbladen in hun webtools te bekijken. Zie je grote verschillen?
Onderzoek enkele manieren waarop browsers webprestaties meten door de prestatietabbladen in hun webtools te bekijken. Vind je grote verschillen?
## Opdracht
@ -173,4 +172,4 @@ Onderzoek enkele manieren waarop browsers webprestaties meten door de prestatiet
---
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
# Nettleserutvidelsesprosjekt Del 3: Lær om bakgrunnsoppgaver og ytelse
# Browserutvidelsesprosjekt del 3: Lær om bakgrunnsoppgaver og ytelse
## Quiz før forelesning
@ -17,17 +17,17 @@ CO_OP_TRANSLATOR_METADATA:
I de to siste leksjonene i dette modulen lærte du hvordan du bygger et skjema og et visningsområde for data hentet fra en API. Dette er en veldig standard måte å skape en webtilstedeværelse på nettet. Du lærte til og med hvordan du håndterer asynkron datainnhenting. Nettleserutvidelsen din er nesten ferdig.
Det gjenstår å håndtere noen bakgrunnsoppgaver, inkludert oppdatering av fargen på utvidelsens ikon, så dette er et godt tidspunkt å snakke om hvordan nettleseren håndterer denne typen oppgaver. La oss tenke på disse nettleseroppgavene i sammenheng med ytelsen til webressursene dine mens du bygger dem.
Det gjenstår å håndtere noen bakgrunnsoppgaver, inkludert å oppdatere fargen på utvidelsens ikon. Dette er derfor et godt tidspunkt å snakke om hvordan nettleseren håndterer denne typen oppgaver. La oss tenke på disse nettleseroppgavene i konteksten av ytelsen til dine webressurser mens du bygger dem.
## Grunnleggende om webytelse
> "Nettstedytelse handler om to ting: hvor raskt siden lastes, og hvor raskt koden på den kjører." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Temaet om hvordan du gjør nettstedene dine lynraske på alle slags enheter, for alle slags brukere, i alle slags situasjoner, er ikke overraskende omfattende. Her er noen punkter å huske på mens du bygger enten et standard webprosjekt eller en nettleserutvidelse.
Temaet om hvordan du gjør nettstedene dine lynraske på alle typer enheter, for alle typer brukere, i alle typer situasjoner, er ikke overraskende omfattende. Her er noen punkter å huske på når du bygger enten et standard webprosjekt eller en nettleserutvidelse.
Det første du må gjøre for å sikre at nettstedet ditt kjører effektivt, er å samle data om ytelsen. Det første stedet å gjøre dette er i utviklerverktøyene til nettleseren din. I Edge kan du velge "Innstillinger og mer"-knappen (ikonet med tre prikker øverst til høyre i nettleseren), deretter navigere til Flere verktøy > Utviklerverktøy og åpne Ytelse-fanen. Du kan også bruke hurtigtastene `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac for å åpne utviklerverktøyene.
Ytelse-fanen inneholder et profileringsverktøy. Åpne et nettsted (prøv for eksempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) og klikk på 'Record'-knappen, deretter oppdater nettstedet. Stopp opptaket når som helst, og du vil kunne se rutinene som genereres for 'script', 'render' og 'paint' av nettstedet:
Ytelse-fanen inneholder et profileringsverktøy. Åpne et nettsted (prøv for eksempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) og klikk på 'Record'-knappen, deretter oppdater nettstedet. Stopp opptaket når som helst, og du vil kunne se rutinene som genereres for å 'skrive', 'rendre' og 'male' nettstedet:
@ -57,13 +57,13 @@ Generelt er det noen "problemområder" som enhver webutvikler bør være oppmerk
En god praksis er å sørge for at bildene dine er optimalisert og levert i riktig størrelse og oppløsning for brukerne dine.
**DOM-traverseringer**: Nettleseren må bygge sitt Document Object Model basert på koden du skriver, så det er i interesse av god sideytelse å holde taggene minimale, og kun bruke og style det siden trenger. I denne sammenhengen kan overflødig CSS knyttet til en side optimaliseres; stiler som bare trenger å brukes på én side, trenger for eksempel ikke å inkluderes i hovedstilarket.
**DOM-traverseringer**: Nettleseren må bygge sitt Document Object Model basert på koden du skriver, så det er i interesse av god sideytelse å holde taggene minimale, kun bruke og style det siden trenger. Til dette punktet kan overflødig CSS knyttet til en side optimaliseres; stiler som bare trenger å brukes på én side, trenger ikke å inkluderes i hovedstilarket, for eksempel.
**JavaScript**: Hver JavaScript-utvikler bør være oppmerksom på 'render-blokkerende' skript som må lastes før resten av DOM kan traverseres og males til nettleseren. Vurder å bruke `defer` med dine inline-skript (som det gjøres i Terrarium-modulen).
**JavaScript**: Hver JavaScript-utvikler bør passe på 'render-blokkerende' skript som må lastes før resten av DOM kan traverseres og males til nettleseren. Vurder å bruke `defer` med dine inline-skript (som det gjøres i Terrarium-modulen).
✅ Prøv noen nettsteder på en [Site Speed Test-nettside](https://www.webpagetest.org/) for å lære mer om de vanlige testene som gjøres for å bestemme nettstedets ytelse.
✅ Prøv noen nettsteder på en [Site Speed Test-nettside](https://www.webpagetest.org/) for å lære mer om de vanlige testene som utføres for å bestemme nettstedets ytelse.
Nå som du har en idé om hvordan nettleseren gjengir ressursene du sender til den, la oss se på de siste tingene du må gjøre for å fullføre utvidelsen din:
Nå som du har en idé om hvordan nettleseren rendrer ressursene du sender til den, la oss se på de siste tingene du må gjøre for å fullføre utvidelsen din:
### Lag en funksjon for å beregne farge
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Hva skjer her? Du sender inn en verdi (karbonintensiteten) fra API-kallet du fullførte i forrige leksjon, og deretter beregner du hvor nær verdien er indeksen som presenteres i fargearrayen. Deretter sender du den nærmeste fargeverdien videre til chrome runtime.
Hva skjer her? Du sender inn en verdi (karbonintensiteten) fra API-kallet du fullførte i forrige leksjon, og deretter beregner du hvor nær verdien er indeksen som presenteres i fargearrayen. Deretter sender du den nærmeste fargeverdien til chrome runtime.
Chrome.runtime har [en API](https://developer.chrome.com/extensions/runtime) som håndterer alle slags bakgrunnsoppgaver, og utvidelsen din utnytter dette:
> "Bruk chrome.runtime API for å hente bakgrunnssiden, returnere detaljer om manifestet, og lytte til og svare på hendelser i app- eller utvidelseslivssyklusen. Du kan også bruke denne API-en til å konvertere relative URL-stier til fullstendige URL-er."
> "Bruk chrome.runtime API for å hente bakgrunnssiden, returnere detaljer om manifestet, og lytte til og svare på hendelser i app- eller utvidelseslivssyklusen. Du kan også bruke denne API-en for å konvertere den relative banen til URL-er til fullstendig kvalifiserte URL-er."
✅ Hvis du utvikler denne nettleserutvidelsen for Edge, kan det overraske deg at du bruker en chrome API. De nyere Edge-nettleserversjonene kjører på Chromium-nettlesermotoren, så du kan utnytte disse verktøyene.
> Merk, hvis du vil profilere en nettleserutvidelse, åpne utviklerverktøyene fra selve utvidelsen, da den er sin egen separate nettleserinstans.
> Merk, hvis du vil profilere en nettleserutvidelse, start utviklerverktøyene fra selve utvidelsen, da den er sin egen separate nettleserinstans.
### Sett en standard ikonfarge
Nå, i `init()`-funksjonen, sett ikonet til å være generisk grønt til å begynne med ved igjen å kalle chromes `updateIcon`-handling:
Nå, i `init()`-funksjonen, sett ikonet til å være generisk grønt til å begynne med ved å igjen kalle chromes `updateIcon`-handling:
```JavaScript
chrome.runtime.sendMessage({
@ -110,10 +110,9 @@ chrome.runtime.sendMessage({
},
});
```
### Kall funksjonen, utfør kallet
Deretter, kall den funksjonen du nettopp opprettet ved å legge den til løftet som returneres av C02Signal API:
Deretter, kall funksjonen du nettopp opprettet ved å legge den til løftet som returneres av C02Signal API:
```JavaScript
//let CO2...
@ -125,12 +124,12 @@ Og til slutt, i `/dist/background.js`, legg til lytteren for disse bakgrunnsaksj
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -146,7 +145,7 @@ I denne koden legger du til en lytter for eventuelle meldinger som kommer til ba
✅ Du vil lære mer om Canvas API i [Space Game-leksjonene](../../6-space-game/2-drawing-to-canvas/README.md).
Nå, bygg utvidelsen din på nytt (`npm run build`), oppdater og start utvidelsen, og se fargen endre seg. Er det et godt tidspunkt å ta en pause eller gjøre noe annet? Nå vet du!
Nå, bygg utvidelsen din på nytt (`npm run build`), oppdater og start utvidelsen din, og se fargen endre seg. Er det et godt tidspunkt å ta en pause eller vaske opp? Nå vet du!
Gratulerer, du har bygget en nyttig nettleserutvidelse og lært mer om hvordan nettleseren fungerer og hvordan du profilerer ytelsen.
@ -173,4 +172,4 @@ Undersøk noen av måtene nettlesere vurderer webytelse ved å se gjennom ytelse
---
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
# Projekt Rozszerzenia Przeglądarki, Część 3: Dowiedz się o Zadaniach w Tle i Wydajności
# Projekt rozszerzenia przeglądarki, część 3: Dowiedz się o zadaniach w tle i wydajności
## Quiz Przed Lekcją
## Quiz przed wykładem
[Quiz przed lekcją](https://ff-quizzes.netlify.app/web/quiz/27)
[Quiz przed wykładem](https://ff-quizzes.netlify.app/web/quiz/27)
### Wprowadzenie
W dwóch ostatnich lekcjach tego modułu nauczyłeś się, jak stworzyć formularz i obszar wyświetlania danych pobranych z API. To bardzo standardowy sposób tworzenia obecności w sieci. Nauczyłeś się także, jak obsługiwać asynchroniczne pobieranie danych. Twoje rozszerzenie przeglądarki jest prawie gotowe.
W dwóch ostatnich lekcjach tego modułu nauczyłeś się, jak stworzyć formularz i obszar wyświetlania dla danych pobieranych z API. To bardzo standardowy sposób tworzenia obecności w sieci. Nauczyłeś się także, jak obsługiwać asynchroniczne pobieranie danych. Twoje rozszerzenie przeglądarki jest prawie gotowe.
Pozostało zarządzanie niektórymi zadaniami w tle, w tym odświeżanie koloru ikony rozszerzenia, więc to świetny moment, aby porozmawiać o tym, jak przeglądarka zarządza tego typu zadaniami. Zastanówmy się nad tymi zadaniami przeglądarki w kontekście wydajności Twoich zasobów internetowych podczas ich tworzenia.
Pozostało zarządzanie niektórymi zadaniami w tle, w tym odświeżanie koloru ikony rozszerzenia, więc to świetny moment, aby porozmawiać o tym, jak przeglądarka zarządza tego typu zadaniami. Zastanówmy się nad tymi zadaniami w kontekście wydajności Twoich zasobów internetowych podczas ich tworzenia.
## Podstawy Wydajności w Sieci
## Podstawy wydajności w sieci
> "Wydajność strony internetowej to dwie rzeczy: jak szybko ładuje się strona i jak szybko działa kod na niej." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Wydajność strony internetowej dotyczy dwóch rzeczy: jak szybko ładuje się strona i jak szybko działa kod na niej." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Temat tego, jak sprawić, by Twoje strony internetowe działały błyskawicznie na wszelkiego rodzaju urządzeniach, dla różnych użytkowników i w różnych sytuacjach, jest, co nie dziwi, bardzo obszerny. Oto kilka punktów, które warto mieć na uwadze podczas tworzenia standardowego projektu internetowego lub rozszerzenia przeglądarki.
Temat, jak sprawić, by Twoje strony internetowe działały błyskawicznie na wszelkiego rodzaju urządzeniach, dla wszelkiego rodzaju użytkowników, w różnych sytuacjach, jest, co nie dziwi, bardzo rozległy. Oto kilka punktów, które warto mieć na uwadze podczas tworzenia standardowego projektu internetowego lub rozszerzenia przeglądarki.
Pierwszą rzeczą, którą musisz zrobić, aby upewnić się, że Twoja strona działa wydajnie, jest zebranie danych na temat jej wydajności. Pierwszym miejscem, w którym możesz to zrobić, są narzędzia deweloperskie Twojej przeglądarki. W Edge możesz wybrać przycisk "Ustawienia i więcej" (ikona trzech kropek w prawym górnym rogu przeglądarki), a następnie przejść do Więcej narzędzi > Narzędzia deweloperskie i otworzyć kartę Wydajność. Możesz także użyć skrótów klawiaturowych `Ctrl` + `Shift` + `I` na Windowsie lub `Option` + `Command` + `I` na Macu, aby otworzyć narzędzia deweloperskie.
Pierwszą rzeczą, którą musisz zrobić, aby upewnić się, że Twoja strona działa wydajnie, jest zebranie danych o jej wydajności. Pierwszym miejscem, gdzie możesz to zrobić, są narzędzia deweloperskie Twojej przeglądarki. W Edge możesz wybrać przycisk "Ustawienia i więcej" (ikona trzech kropek w prawym górnym rogu przeglądarki), a następnie przejść do Więcej narzędzi > Narzędzia deweloperskie i otworzyć zakładkę Wydajność. Możesz także użyć skrótów klawiaturowych `Ctrl` + `Shift` + `I` na Windowsie lub `Option` + `Command` + `I` na Macu, aby otworzyć narzędzia deweloperskie.
Karta Wydajność zawiera narzędzie do profilowania. Otwórz stronę internetową (spróbuj na przykład [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) i kliknij przycisk "Nagrywaj", a następnie odśwież stronę. Zatrzymaj nagrywanie w dowolnym momencie, a zobaczysz rutyny generowane do 'skryptowania', 'renderowania' i 'malowania' strony:
Zakładka Wydajność zawiera narzędzie do profilowania. Otwórz stronę internetową (spróbuj na przykład [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) i kliknij przycisk 'Record', a następnie odśwież stronę. Zatrzymaj nagrywanie w dowolnym momencie, a będziesz mógł zobaczyć rutyny generowane do 'skryptowania', 'renderowania' i 'malowania' strony:
✅ Zapoznaj się z profilerem! Otwórz narzędzia deweloperskie na tej stronie i sprawdź, czy występują jakieś wąskie gardła. Jaki zasób ładuje się najwolniej? Najszybciej?
✅ Poznaj swój profiler! Otwórz narzędzia deweloperskie na tej stronie i sprawdź, czy są jakieś wąskie gardła. Jaki zasób ładuje się najwolniej? Najszybciej?
## Kontrole Profilowania
## Kontrole profilowania
Ogólnie rzecz biorąc, istnieją pewne "problematyczne obszary", na które każdy deweloper stron internetowych powinien zwracać uwagę podczas budowania strony, aby uniknąć niemiłych niespodzianek podczas wdrażania na produkcję.
Ogólnie rzecz biorąc, istnieją pewne "problematyczne obszary", na które każdy deweloper stron internetowych powinien zwracać uwagę podczas tworzenia strony, aby uniknąć niemiłych niespodzianek podczas wdrażania na produkcję.
**Rozmiary zasobów**: Sieć stała się w ostatnich latach "cięższa", a co za tym idzie, wolniejsza. Część tej wagi wynika z użycia obrazów.
**Rozmiary zasobów**: Internet stał się "cięższy", a co za tym idzie, wolniejszy w ciągu ostatnich kilku lat. Część tej wagi wynika z użycia obrazów.
✅ Przejrzyj [Internet Archive](https://httparchive.org/reports/page-weight) w poszukiwaniu historycznego widoku wagi stron i innych informacji.
✅ Przejrzyj [Internet Archive](https://httparchive.org/reports/page-weight) dla historycznego widoku wagi stron i więcej.
Dobrym zwyczajem jest upewnienie się, że Twoje obrazy są zoptymalizowane i dostarczane w odpowiednim rozmiarze i rozdzielczości dla Twoich użytkowników.
**Przechodzenie po DOM**: Przeglądarka musi zbudować swój Model Obiektowy Dokumentu na podstawie kodu, który piszesz, więc w interesie dobrej wydajności strony leży minimalizacja znaczników, używając i stylizując tylko to, co jest potrzebne na stronie. Na przykład nadmiar CSS związany ze stroną można zoptymalizować; style, które są potrzebne tylko na jednej stronie, nie muszą być uwzględniane w głównym arkuszu stylów.
**Przechodzenie po DOM**: Przeglądarka musi zbudować swój Model Obiektu Dokumentu na podstawie kodu, który piszesz, więc w interesie dobrej wydajności strony leży utrzymanie minimalnej liczby tagów, używając i stylizując tylko to, czego strona potrzebuje. W związku z tym nadmiar CSS związany ze stroną można zoptymalizować; style, które muszą być używane tylko na jednej stronie, nie muszą być uwzględniane w głównym arkuszu stylów, na przykład.
**JavaScript**: Każdy deweloper JavaScript powinien uważać na skrypty blokujące renderowanie, które muszą zostać załadowane, zanim reszta DOM zostanie przejrzana i wyrenderowana w przeglądarce. Rozważ użycie `defer` w swoich skryptach inline (jak to zrobiono w module Terrarium).
**JavaScript**: Każdy deweloper JavaScript powinien uważać na skrypty blokujące renderowanie, które muszą być załadowane przed przejściem i malowaniem reszty DOM w przeglądarce. Rozważ użycie `defer` w swoich skryptach inline (jak to jest zrobione w module Terrarium).
✅ Wypróbuj kilka stron na [stronie testującej prędkość witryn](https://www.webpagetest.org/), aby dowiedzieć się więcej o typowych kontrolach przeprowadzanych w celu określenia wydajności strony.
✅ Wypróbuj kilka stron na [stronie testującej szybkość witryn](https://www.webpagetest.org/), aby dowiedzieć się więcej o typowych kontrolach przeprowadzanych w celu określenia wydajności strony.
Teraz, gdy masz pojęcie, jak przeglądarka renderuje zasoby, które jej wysyłasz, przyjrzyjmy się ostatnim rzeczom, które musisz zrobić, aby ukończyć swoje rozszerzenie:
Teraz, gdy masz pojęcie, jak przeglądarka renderuje zasoby, które jej wysyłasz, przyjrzyjmy się ostatnim kilku rzeczom, które musisz zrobić, aby ukończyć swoje rozszerzenie:
### Stwórz funkcję do obliczania koloru
### Utwórz funkcję do obliczania koloru
Pracując w `/src/index.js`, dodaj funkcję o nazwie `calculateColor()` po serii zmiennych `const`, które ustawiłeś, aby uzyskać dostęp do DOM:
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Co tu się dzieje? Przekazujesz wartość (intensywność węgla) z wywołania API, które ukończyłeś w ostatniej lekcji, a następnie obliczasz, jak blisko jej wartość jest indeksu przedstawionego w tablicy kolorów. Następnie przesyłasz tę najbliższą wartość koloru do środowiska chrome runtime.
Co tu się dzieje? Przekazujesz wartość (intensywność węgla) z wywołania API, które ukończyłeś w ostatniej lekcji, a następnie obliczasz, jak blisko jej wartość jest indeksu przedstawionego w tablicy kolorów. Następnie wysyłasz tę najbliższą wartość koloru do chrome runtime.
Chrome.runtime ma [API](https://developer.chrome.com/extensions/runtime), które obsługuje wszelkiego rodzaju zadania w tle, a Twoje rozszerzenie z niego korzysta:
> "Użyj API chrome.runtime, aby pobrać stronę w tle, zwrócić szczegóły dotyczące manifestu oraz nasłuchiwać i reagować na zdarzenia w cyklu życia aplikacji lub rozszerzenia. Możesz także użyć tego API, aby konwertować względne ścieżki URL na w pełni kwalifikowane URL."
> "Użyj API chrome.runtime, aby pobrać stronę w tle, zwrócić szczegóły dotyczące manifestu oraz nasłuchiwać i reagować na zdarzenia w cyklu życia aplikacji lub rozszerzenia. Możesz także użyć tego API, aby przekonwertować względną ścieżkę URL na w pełni kwalifikowany URL."
✅ Jeśli rozwijasz to rozszerzenie przeglądarki dla Edge, może Cię zaskoczyć, że używasz API chrome. Nowsze wersje przeglądarki Edge działają na silniku przeglądarki Chromium, więc możesz korzystać z tych narzędzi.
> Uwaga: jeśli chcesz profilować rozszerzenie przeglądarki, uruchom narzędzia deweloperskie z poziomu samego rozszerzenia, ponieważ jest to oddzielna instancja przeglądarki.
> Uwaga: jeśli chcesz profilować rozszerzenie przeglądarki, uruchom narzędzia deweloperskie z poziomu samego rozszerzenia, ponieważ jest ono oddzielnym instancją przeglądarki.
### Ustaw domyślny kolor ikony
Teraz, w funkcji `init()`, ustaw ikonę na ogólny zielony kolor na początek, ponownie wywołując akcję `updateIcon`w chrome:
Teraz, w funkcji `init()`, ustaw ikonę na ogólny zielony kolor na początek, ponownie wywołując akcję `updateIcon` chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Wywołaj funkcję, wykonaj wywołanie
Następnie wywołaj funkcję, którą właśnie stworzyłeś, dodając ją do obietnicy zwróconej przez API C02Signal:
@ -120,17 +119,17 @@ Następnie wywołaj funkcję, którą właśnie stworzyłeś, dodając ją do ob
calculateColor(CO2);
```
I wreszcie, w `/dist/background.js`, dodaj nasłuchiwacza dla tych wywołań akcji w tle:
I na koniec, w `/dist/background.js`, dodaj nasłuchiwacz dla tych wywołań akcji w tle:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,35 +141,35 @@ function drawIcon(value) {
}
```
W tym kodzie dodajesz nasłuchiwacza dla wszelkich wiadomości przychodzących do menedżera zadań w tle. Jeśli wiadomość nazywa się 'updateIcon', następny kod zostanie uruchomiony, aby narysować ikonę w odpowiednim kolorze za pomocą API Canvas.
W tym kodzie dodajesz nasłuchiwacz dla wszelkich wiadomości przychodzących do menedżera zadań w tle. Jeśli jest to wywołanie 'updateIcon', następny kod zostanie uruchomiony, aby narysować ikonę w odpowiednim kolorze za pomocą API Canvas.
✅ Dowiesz się więcej o API Canvas w [lekcjach o grze kosmicznej](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Dowiesz się więcej o API Canvas w [lekcjach dotyczących gry kosmicznej](../../6-space-game/2-drawing-to-canvas/README.md).
Teraz, zbuduj ponownie swoje rozszerzenie (`npm run build`), odśwież i uruchom swoje rozszerzenie, i obserwuj, jak zmienia się kolor. Czy to dobry moment, aby zrobić sobie przerwę lub pozmywać naczynia? Teraz już wiesz!
Teraz, zbuduj ponownie swoje rozszerzenie (`npm run build`), odśwież i uruchom swoje rozszerzenie, i obserwuj zmianę koloru. Czy to dobry moment na zrobienie zakupów lub umycie naczyń? Teraz już wiesz!
Gratulacje, stworzyłeś użyteczne rozszerzenie przeglądarki i dowiedziałeś się więcej o tym, jak działa przeglądarka i jak profilować jej wydajność.
Gratulacje, stworzyłeś użyteczne rozszerzenie przeglądarki i dowiedziałeś się więcej o tym, jak działa przeglądarka oraz jak profilować jej wydajność.
---
## 🚀 Wyzwanie
Zbadaj kilka stron internetowych open source, które istnieją od dawna, i na podstawie ich historii na GitHubie spróbuj ustalić, czy były optymalizowane pod kątem wydajności na przestrzeni lat, a jeśli tak, to w jaki sposób. Jaki jest najczęstszy problem?
Zbadaj kilka stron internetowych open source, które istnieją od dawna, i na podstawie ich historii na GitHubie spróbuj określić, jak były optymalizowane na przestrzeni lat pod kątem wydajności, jeśli w ogóle. Jaki jest najczęstszy punkt problematyczny?
## Quiz Po Lekcji
## Quiz po wykładzie
[Quiz po lekcji](https://ff-quizzes.netlify.app/web/quiz/28)
[Quiz po wykładzie](https://ff-quizzes.netlify.app/web/quiz/28)
## Przegląd i Samodzielna Nauka
## Przegląd i samodzielna nauka
Rozważ zapisanie się na [newsletter o wydajności](https://perf.email/).
Rozważ zapisanie się na [newsletter o wydajności](https://perf.email/)
Zbadaj niektóre sposoby, w jakie przeglądarki oceniają wydajność stron internetowych, przeglądając zakładki wydajności w ich narzędziach internetowych. Czy zauważasz jakieś istotne różnice?
## Zadanie
[Przeanalizuj stronę pod kątem wydajności](assignment.md)
[Analizuj stronę pod kątem wydajności](assignment.md)
---
**Zastrzeżenie**:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za źródło autorytatywne. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
Nas duas últimas lições deste módulo, aprendeste a construir um formulário e uma área de exibição para dados obtidos de uma API. É uma forma bastante comum de criar uma presença na web. Também aprendeste a lidar com a obtenção de dados de forma assíncrona. A tua extensão de navegador está quase completa.
Nas duas últimas lições deste módulo, aprendeste a construir um formulário e uma área de exibição para dados obtidos de uma API. É uma forma bastante comum de criar uma presença na web. Até aprendeste a lidar com a obtenção de dados de forma assíncrona. A tua extensão de navegador está quase completa.
Resta gerir algumas tarefas em segundo plano, incluindo atualizar a cor do ícone da extensão. Este é um ótimo momento para falar sobre como o navegador gerencia este tipo de tarefa. Vamos pensar sobre estas tarefas do navegador no contexto do desempenho dos teus recursos web enquanto os desenvolves.
Resta gerir algumas tarefas em segundo plano, incluindo atualizar a cor do ícone da extensão. Por isso, este é um ótimo momento para falar sobre como o navegador gere este tipo de tarefa. Vamos pensar nestas tarefas do navegador no contexto do desempenho dos teus recursos web enquanto os desenvolves.
## Noções Básicas de Desempenho na Web
## Noções Básicas de Desempenho Web
> "O desempenho de um site é sobre duas coisas: quão rápido a página carrega e quão rápido o código nela é executado." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
O tema de como tornar os teus sites incrivelmente rápidos em todos os tipos de dispositivos, para todos os tipos de utilizadores, em todas as situações, é, sem surpresa, vasto. Aqui estão alguns pontos a ter em mente enquanto desenvolves um projeto web padrão ou uma extensão de navegador.
A primeira coisa que precisas de fazer para garantir que o teu site está a funcionar de forma eficiente é reunir dados sobre o seu desempenho. O primeiro lugar para fazer isso é nas ferramentas de desenvolvedor do teu navegador. No Edge, podes selecionar o botão "Definições e mais" (o ícone de três pontos no canto superior direito do navegador), depois navegar para Mais Ferramentas > Ferramentas de Desenvolvedor e abrir o separador de Desempenho. Também podes usar os atalhos de teclado `Ctrl` + `Shift` + `I` no Windows ou `Option` + `Command` + `I` no Mac para abrir as ferramentas de desenvolvedor.
A primeira coisa que precisas de fazer para garantir que o teu site está a funcionar de forma eficiente é recolher dados sobre o seu desempenho. O primeiro lugar para fazer isso é nas ferramentas de desenvolvedor do teu navegador web. No Edge, podes selecionar o botão "Definições e mais" (o ícone de três pontos no canto superior direito do navegador), depois navegar para Mais Ferramentas > Ferramentas de Desenvolvedor e abrir o separador Desempenho. Também podes usar os atalhos de teclado `Ctrl` + `Shift` + `I` no Windows ou `Option` + `Command` + `I` no Mac para abrir as ferramentas de desenvolvedor.
O separador de Desempenho contém uma ferramenta de Perfil. Abre um site (experimenta, por exemplo, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) e clica no botão 'Gravar', depois atualiza o site. Para a gravação a qualquer momento, e poderás ver as rotinas geradas para 'script', 'renderizar' e 'pintar' o site:
O separador Desempenho contém uma ferramenta de Perfilagem. Abre um site (experimenta, por exemplo, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) e clica no botão 'Gravar', depois atualiza o site. Para a gravação a qualquer momento, e poderás ver as rotinas que são geradas para 'script', 'renderizar' e 'pintar' o site:
✅ Visita a [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sobre o painel de Desempenho no Edge.
> Dica: para obter uma leitura precisa do tempo de inicialização do teu site, limpa a cache do navegador.
Seleciona elementos da linha do tempo do perfil para ampliar eventos que ocorrem enquanto a tua página carrega.
Seleciona elementos da linha do tempo do perfil para ampliar os eventos que ocorrem enquanto a tua página carrega.
Obtém uma visão geral do desempenho da tua página ao selecionar uma parte da linha do tempo do perfil e olhar para o painel de resumo:
✅ Familiariza-te com o teu profiler! Abre as ferramentas de desenvolvedor neste site e verifica se há algum gargalo. Qual é o recurso que carrega mais lentamente? E o mais rápido?
✅ Familiariza-te com o teu profiler! Abre as ferramentas de desenvolvedor neste site e vê se há algum gargalo. Qual é o recurso que demora mais a carregar? E o mais rápido?
## Verificações de Perfil
## Verificações de Perfilagem
De forma geral, há algumas "áreas problemáticas" que todo desenvolvedor web deve observar ao construir um site para evitar surpresas desagradáveis na hora de implementar em produção.
De forma geral, há algumas "áreas problemáticas" que todo desenvolvedor web deve observar ao construir um site para evitar surpresas desagradáveis quando for hora de implementar em produção.
**Tamanhos de recursos**: A web tem ficado mais 'pesada' e, portanto, mais lenta nos últimos anos. Parte desse peso tem a ver com o uso de imagens.
**Tamanhos de recursos**: A web ficou mais 'pesada' e, portanto, mais lenta, nos últimos anos. Parte desse peso tem a ver com o uso de imagens.
✅ Dá uma olhada no [Internet Archive](https://httparchive.org/reports/page-weight) para uma visão histórica do peso das páginas e mais.
✅ Explora o [Internet Archive](https://httparchive.org/reports/page-weight) para uma visão histórica do peso das páginas e mais.
Uma boa prática é garantir que as tuas imagens estão otimizadas e entregues no tamanho e resolução certos para os teus utilizadores.
**Percursos no DOM**: O navegador precisa construir o seu Modelo de Objeto de Documento (DOM) com base no código que escreves, então é do interesse de um bom desempenho da página manter as tags mínimas, usando e estilizando apenas o que a página necessita. Por exemplo, estilos que precisam ser usados apenas numa página não precisam ser incluídos na folha de estilos principal.
**Percursos no DOM**: O navegador precisa construir o seu Modelo de Objeto de Documento (DOM) com base no código que escreves, por isso é do interesse de um bom desempenho da página manter as tags mínimas, usando e estilizando apenas o que a página necessita. Neste ponto, CSS em excesso associado a uma página pode ser otimizado; estilos que precisam ser usados apenas numa página não precisam ser incluídos na folha de estilo principal, por exemplo.
**JavaScript**: Todo desenvolvedor de JavaScript deve observar scripts que bloqueiam a renderização e que precisam ser carregados antes que o restante do DOM possa ser percorrido e pintado no navegador. Considera usar `defer` com os teus scripts inline (como é feito no módulo Terrarium).
✅ Experimenta alguns sites num [site de teste de velocidade](https://www.webpagetest.org/) para aprender mais sobre as verificações comuns feitas para determinar o desempenho de um site.
Agora que tens uma ideia de como o navegador renderiza os recursos que envias para ele, vamos olhar para as últimas coisas que precisas fazer para completar a tua extensão:
Agora que tens uma ideia de como o navegador renderiza os recursos que envias para ele, vamos ver as últimas coisas que precisas fazer para completar a tua extensão:
### Criar uma função para calcular a cor
@ -92,11 +92,11 @@ O que está a acontecer aqui? Passas um valor (a intensidade de carbono) da cham
O chrome.runtime tem [uma API](https://developer.chrome.com/extensions/runtime) que lida com todos os tipos de tarefas em segundo plano, e a tua extensão está a aproveitar isso:
> "Usa a API chrome.runtime para recuperar a página de fundo, retornar detalhes sobre o manifesto e ouvir e responder a eventos no ciclo de vida da aplicação ou extensão. Também podes usar esta API para converter o caminho relativo de URLs em URLs totalmente qualificados."
> "Usa a API chrome.runtime para recuperar a página de fundo, retornar detalhes sobre o manifesto e ouvir e responder a eventos no ciclo de vida da aplicação ou extensão. Também podes usar esta API para converter o caminho relativo de URLs em URLs totalmente qualificadas."
✅ Se estás a desenvolver esta extensão de navegador para o Edge, pode surpreender-te que estás a usar uma API do Chrome. As versões mais recentes do navegador Edge funcionam com o motor de navegador Chromium, então podes aproveitar estas ferramentas.
✅ Se estás a desenvolver esta extensão de navegador para o Edge, pode surpreender-te que estás a usar uma API do Chrome. As versões mais recentes do navegador Edge funcionam no motor de navegador Chromium, por isso podes aproveitar estas ferramentas.
> Nota: se quiseres fazer o perfil de uma extensão de navegador, abre as ferramentas de desenvolvedor dentro da própria extensão, pois ela é uma instância separada do navegador.
> Nota: se quiseres fazer a perfilagem de uma extensão de navegador, lança as ferramentas de desenvolvedor a partir da própria extensão, pois ela é uma instância separada do navegador.
### Definir uma cor padrão para o ícone
@ -110,8 +110,7 @@ chrome.runtime.sendMessage({
},
});
```
### Chamar a função e executar a chamada
### Chamar a função, executar a chamada
Em seguida, chama a função que acabaste de criar ao adicioná-la à promessa retornada pela API C02Signal:
@ -120,17 +119,17 @@ Em seguida, chama a função que acabaste de criar ao adicioná-la à promessa r
calculateColor(CO2);
```
E, finalmente, em `/dist/background.js`, adiciona o listener para estas chamadas de ações em segundo plano:
E, finalmente, em `/dist/background.js`, adiciona o listener para estas chamadas de ação em segundo plano:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -146,9 +145,9 @@ Neste código, estás a adicionar um listener para quaisquer mensagens que chega
✅ Vais aprender mais sobre a API Canvas nas [lições do Jogo Espacial](../../6-space-game/2-drawing-to-canvas/README.md).
Agora, reconstrói a tua extensão (`npm run build`), atualiza e lança a tua extensão, e observa a mudança de cor. É um bom momento para fazer uma pausa ou lavar a louça? Agora já sabes!
Agora, reconstrói a tua extensão (`npm run build`), atualiza e lança a tua extensão, e observa a mudança de cor. É um bom momento para fazer uma tarefa ou lavar a loiça? Agora já sabes!
Parabéns, construíste uma extensão de navegador útil e aprendeste mais sobre como o navegador funciona e como fazer o perfil do seu desempenho.
Parabéns, construíste uma extensão de navegador útil e aprendeste mais sobre como o navegador funciona e como fazer a perfilagem do seu desempenho.
---
@ -162,7 +161,7 @@ Investiga alguns sites de código aberto que existem há muito tempo e, com base
## Revisão & Autoestudo
Considera inscrever-te numa [newsletter de desempenho](https://perf.email/).
Considera inscrever-te numa [newsletter de desempenho](https://perf.email/)
Investiga algumas das formas como os navegadores avaliam o desempenho web ao explorar os separadores de desempenho nas suas ferramentas web. Encontras alguma diferença significativa?
@ -172,5 +171,5 @@ Investiga algumas das formas como os navegadores avaliam o desempenho web ao exp
---
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante ter em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
**Aviso**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
# Proiect Extensie de Browser Partea 3: Învață despre Sarcini de Fundal și Performanță
# Proiect de Extensie pentru Browser Partea 3: Învață despre Sarcini de Fundal și Performanță
## Chestionar Pre-Lecție
@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
În ultimele două lecții ale acestui modul, ai învățat cum să construiești un formular și o zonă de afișare pentru datele preluate de la un API. Este o metodă foarte standard de a crea o prezență web. Ai învățat chiar și cum să gestionezi preluarea datelor în mod asincron. Extensia ta de browser este aproape completă.
Mai rămâne să gestionezi câteva sarcini de fundal, inclusiv actualizarea culorii pictogramei extensiei, așa că este un moment excelent să discutăm despre cum browserul gestionează acest tip de sarcini. Să ne gândim la aceste sarcini ale browserului în contextul performanței resurselor tale web pe măsură ce le construiești.
Mai rămâne să gestionezi câteva sarcini de fundal, inclusiv actualizarea culorii pictogramei extensiei, așa că acesta este un moment excelent pentru a discuta despre modul în care browserul gestionează acest tip de sarcini. Să ne gândim la aceste sarcini ale browserului în contextul performanței resurselor tale web pe măsură ce le construiești.
## Bazele Performanței Web
@ -25,15 +25,15 @@ Mai rămâne să gestionezi câteva sarcini de fundal, inclusiv actualizarea cul
Subiectul despre cum să faci site-urile tale extrem de rapide pe toate tipurile de dispozitive, pentru toți utilizatorii, în toate situațiile, este, fără surpriză, vast. Iată câteva puncte de luat în considerare pe măsură ce construiești fie un proiect web standard, fie o extensie de browser.
Primul lucru pe care trebuie să-l faci pentru a te asigura că site-ul tău funcționează eficient este să colectezi date despre performanța sa. Primul loc unde poți face acest lucru este în instrumentele de dezvoltare ale browserului tău web. În Edge, poți selecta butonul "Setări și altele" (pictograma cu trei puncte din colțul din dreapta sus al browserului), apoi navighează la Mai Multe Instrumente > Instrumente de Dezvoltare și deschide fila Performanță. De asemenea, poți folosi combinațiile de taste `Ctrl` + `Shift` + `I` pe Windows sau `Option` + `Command` + `I` pe Mac pentru a deschide instrumentele de dezvoltare.
Primul lucru pe care trebuie să-l faci pentru a te asigura că site-ul tău funcționează eficient este să colectezi date despre performanța acestuia. Primul loc unde poți face acest lucru este în instrumentele de dezvoltare ale browserului tău web. În Edge, poți selecta butonul "Setări și altele" (pictograma cu trei puncte din colțul din dreapta sus al browserului), apoi navighează la Mai Multe Instrumente > Instrumente pentru Dezvoltatori și deschide fila Performanță. De asemenea, poți folosi combinațiile de taste `Ctrl` + `Shift` + `I` pe Windows sau `Option` + `Command` + `I` pe Mac pentru a deschide instrumentele de dezvoltare.
Fila Performanță conține un instrument de Profilare. Deschide un site web (încearcă, de exemplu, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) și apasă butonul 'Înregistrare', apoi reîmprospătează site-ul. Oprește înregistrarea în orice moment și vei putea vedea rutinele generate pentru 'script', 'render' și 'paint' ale site-ului:
Fila Performanță conține un instrument de Profilare. Deschide un site web (încearcă, de exemplu, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) și apasă butonul 'Record', apoi reîmprospătează site-ul. Oprește înregistrarea în orice moment și vei putea vedea rutinele generate pentru 'script', 'render' și 'paint' ale site-ului:
✅ Vizitează [Documentația Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) despre panoul Performanță în Edge
> Sfat: pentru a obține o citire precisă a timpului de pornire al site-ului tău, golește memoria cache a browserului tău.
> Sfat: pentru a obține o citire precisă a timpului de pornire al site-ului tău, golește memoria cache a browserului tău
Selectează elemente din cronologia profilului pentru a mări evenimentele care se întâmplă în timp ce pagina ta se încarcă.
@ -45,11 +45,11 @@ Verifică panoul Jurnal de Evenimente pentru a vedea dacă vreun eveniment a dur
✅ Familiarizează-te cu instrumentul de profilare! Deschide instrumentele de dezvoltare pe acest site și vezi dacă există blocaje. Care este resursa care se încarcă cel mai lent? Dar cea mai rapidă?
✅ Familiarizează-te cu instrumentul de profilare! Deschide instrumentele de dezvoltare pe acest site și vezi dacă există blocaje. Care este cea mai lentă resursă? Cea mai rapidă?
## Verificări de profilare
În general, există câteva "zone problematice" pe care fiecare dezvoltator web ar trebui să le urmărească atunci când construiește un site pentru a evita surprizele neplăcute în momentul în care este gata de lansare în producție.
În general, există câteva "zone problematice" pe care fiecare dezvoltator web ar trebui să le urmărească atunci când construiește un site pentru a evita surprizele neplăcute în momentul în care acesta este lansat în producție.
**Dimensiunile resurselor**: Web-ul a devenit mai 'greu' și, astfel, mai lent, în ultimii ani. O parte din această greutate are legătură cu utilizarea imaginilor.
@ -57,9 +57,9 @@ Verifică panoul Jurnal de Evenimente pentru a vedea dacă vreun eveniment a dur
O practică bună este să te asiguri că imaginile tale sunt optimizate și livrate la dimensiunea și rezoluția potrivită pentru utilizatorii tăi.
**Traversări DOM**: Browserul trebuie să construiască Modelul Obiectului Documentului (DOM) pe baza codului pe care îl scrii, așa că este în interesul unei performanțe bune a paginii să păstrezi etichetele la minim, folosind și stilizând doar ceea ce pagina are nevoie. În acest sens, CSS-ul excesiv asociat unei pagini ar putea fi optimizat; stilurile care trebuie utilizate doar pe o singură pagină nu trebuie incluse în foaia de stil principală, de exemplu.
**Traversări DOM**: Browserul trebuie să construiască Modelul Obiectului Documentului (DOM) pe baza codului pe care îl scrii, așa că este în interesul unei performanțe bune a paginii să păstrezi etichetele la minimum, folosind și stilizând doar ceea ce pagina are nevoie. În acest sens, CSS-ul excesiv asociat unei pagini ar putea fi optimizat; stilurile care trebuie utilizate doar pe o singură pagină nu trebuie incluse în foaia de stil principală, de exemplu.
**JavaScript**: Fiecare dezvoltator JavaScript ar trebui să fie atent la scripturile care blochează randarea și care trebuie încărcate înainte ca restul DOM-ului să poată fi traversat și afișat în browser. Ia în considerare utilizarea `defer` cu scripturile tale inline (așa cum se face în modulul Terrarium).
**JavaScript**: Fiecare dezvoltator JavaScript ar trebui să fie atent la scripturile care blochează randarea și care trebuie încărcate înainte ca restul DOM-ului să poată fi traversat și afișat în browser. Ia în considerare utilizarea atributului `defer` cu scripturile tale inline (așa cum se face în modulul Terrarium).
✅ Încearcă câteva site-uri pe un [site de testare a vitezei](https://www.webpagetest.org/) pentru a afla mai multe despre verificările comune care se fac pentru a determina performanța unui site.
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Ce se întâmplă aici? Transmiți o valoare (intensitatea carbonului) din apelul API pe care l-ai finalizat în lecția anterioară, iar apoi calculezi cât de aproape este valoarea sa de indexul prezentat în array-ul de culori. Apoi trimiți acea valoare de culoare cea mai apropiată către runtime-ul chrome.
Ce se întâmplă aici? Transmiți o valoare (intensitatea carbonului) din apelul API pe care l-ai finalizat în lecția anterioară, iar apoi calculezi cât de aproape este valoarea sa de indexul prezentat în array-ul de culori. Apoi trimiți acea valoare de culoare cea mai apropiată către runtime-ul Chrome.
Runtime-ul chrome are [un API](https://developer.chrome.com/extensions/runtime) care gestionează tot felul de sarcini de fundal, iar extensia ta profită de acest lucru:
Runtime-ul Chrome are [un API](https://developer.chrome.com/extensions/runtime) care gestionează tot felul de sarcini de fundal, iar extensia ta profită de acest lucru:
> "Folosește API-ul chrome.runtime pentru a prelua pagina de fundal, a returna detalii despre manifest și a asculta și răspunde la evenimentele din ciclul de viață al aplicației sau extensiei. De asemenea, poți folosi acest API pentru a converti calea relativă a URL-urilor în URL-uri complet calificate."
✅ Dacă dezvolți această extensie de browser pentru Edge, s-ar putea să te surprindă faptul că folosești un API chrome. Versiunile mai noi ale browserului Edge rulează pe motorul browserului Chromium, așa că poți profita de aceste instrumente.
✅ Dacă dezvolți această extensie de browser pentru Edge, s-ar putea să te surprindă faptul că folosești un API Chrome. Versiunile mai noi ale browserului Edge rulează pe motorul browserului Chromium, astfel încât poți profita de aceste instrumente.
> Notă: dacă vrei să profilezi o extensie de browser, lansează instrumentele de dezvoltare din interiorul extensiei, deoarece aceasta este o instanță separată a browserului.
> Notă: dacă vrei să profilezi o extensie de browser, lansează instrumentele de dezvoltare din interiorul extensiei, deoarece aceasta este propria instanță separată de browser.
### Setează o culoare implicită pentru pictogramă
Acum, în funcția `init()`, setează pictograma să fie generică verde la început, apelând din nou acțiunea `updateIcon` a chrome:
Acum, în funcția `init()`, setează pictograma să fie generică, de culoare verde, la început, apelând din nou acțiunea `updateIcon` a Chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Apelează funcția, execută apelul
Apoi, apelează funcția pe care tocmai ai creat-o adăugând-o la promisiunea returnată de API-ul C02Signal:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -144,9 +143,9 @@ function drawIcon(value) {
În acest cod, adaugi un ascultător pentru orice mesaje care ajung la managerul de sarcini de fundal. Dacă este numit 'updateIcon', atunci următorul cod este rulat pentru a desena o pictogramă de culoarea corespunzătoare folosind API-ul Canvas.
✅ Vei învăța mai multe despre API-ul Canvas în lecțiile [Space Game](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Vei învăța mai multe despre API-ul Canvas în [lecțiile despre Jocul Spațial](../../6-space-game/2-drawing-to-canvas/README.md).
Acum, reconstruiește extensia ta (`npm run build`), reîmprospătează și lansează extensia ta și urmărește cum se schimbă culoarea. Este un moment bun să faci o plimbare sau să speli vasele? Acum știi!
Acum, reconstruiește extensia ta (`npm run build`), reîmprospătează și lansează extensia ta și urmărește cum se schimbă culoarea. Este un moment bun să faci o pauză sau să speli vasele? Acum știi!
Felicitări, ai construit o extensie de browser utilă și ai învățat mai multe despre cum funcționează browserul și cum să-i profilezi performanța.
@ -164,7 +163,7 @@ Investighează câteva site-uri open source care există de mult timp și, pe ba
Ia în considerare abonarea la un [newsletter despre performanță](https://perf.email/)
Investighează câteva dintre modurile în care browserele evaluează performanța web uitându-te prin filele de performanță din instrumentele lor web. Găsești vreo diferență majoră?
Investighează câteva dintre modalitățile prin care browserele evaluează performanța web, analizând filele de performanță din instrumentele lor web. Găsești diferențe majore?
## Temă
@ -173,4 +172,4 @@ Investighează câteva dintre modurile în care browserele evaluează performan
---
**Declinarea responsabilității**:
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
# Проект расширения для браузера, часть 3: Изучение фоновых задач и производительности
## Викторина перед лекцией
## Тест перед лекцией
[Викторина перед лекцией](https://ff-quizzes.netlify.app/web/quiz/27)
[Тест перед лекцией](https://ff-quizzes.netlify.app/web/quiz/27)
### Введение
В двух предыдущих уроках этого модуля вы узнали, как создать форму и область отображения для данных, полученных из API. Это стандартный способ создания веб-присутствия. Вы даже научились асинхронно получать данные. Ваше расширение для браузера почти готово.
В двух предыдущих уроках этого модуля вы научились создавать форму и область отображения для данных, полученных из API. Это стандартный способ создания веб-присутствия в интернете. Вы даже узнали, как обрабатывать асинхронное получение данных. Ваше расширение для браузера почти готово.
Осталось настроить выполнение некоторых фоновых задач, включая обновление цвета значка расширения. Это отличный момент, чтобы обсудить, как браузер управляет такими задачами. Давайте рассмотрим эти задачи в контексте производительности ваших веб-ресурсов.
Осталось настроить выполнение некоторых фоновых задач, включая обновление цвета значка расширения. Это отличный момент, чтобы поговорить о том, как браузер управляет такими задачами. Давайте рассмотрим эти задачи в контексте производительности ваших веб-ресурсов при их создании.
## Основы веб-производительности
> "Производительность веб-сайта — это две вещи: как быстро загружается страница и как быстро выполняется код на ней." -- [Зак Гроссбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Производительность веб-сайта заключается в двух вещах: как быстро загружается страница и как быстро выполняется код на ней." -- [Зак Гроссбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Тема ускорения работы веб-сайтов на всех типах устройств, для всех пользователей и в любых условиях, как вы понимаете, обширна. Вот несколько моментов, которые стоит учитывать при создании стандартного веб-проекта или расширения для браузера.
Тема ускорения работы веб-сайтов на всех типах устройств, для всех пользователей и в любых условиях, как вы могли догадаться, обширна. Вот несколько моментов, которые стоит учитывать при создании стандартного веб-проекта или расширения для браузера.
Первое, что нужно сделать, чтобы убедиться, что ваш сайт работает эффективно, — это собрать данные оего производительности. Начать можно с инструментов разработчика в вашем веб-браузере. В Edge выберите кнопку "Настройки и другое" (значок с тремя точками в правом верхнем углу браузера), затем перейдите в "Дополнительные инструменты" > "Инструменты разработчика" и откройте вкладку "Производительность". Вы также можете использовать сочетания клавиш `Ctrl` + `Shift` + `I` на Windows или `Option` + `Command` + `I` на Mac, чтобы открыть инструменты разработчика.
Первое, что нужно сделать, чтобы убедиться, что ваш сайт работает эффективно, — это собрать данные оего производительности. Первое место для этого — инструменты разработчика вашего веб-браузера. В Edge вы можете выбрать кнопку "Настройки и другое" (значок с тремя точками в правом верхнем углу браузера), затем перейти в "Дополнительные инструменты" > "Инструменты разработчика" и открыть вкладку "Производительность". Вы также можете использовать сочетания клавиш `Ctrl` + `Shift` + `I` на Windows или `Option` + `Command` + `I` на Mac, чтобы открыть инструменты разработчика.
На вкладке "Производительность" есть инструмент профилирования. Откройте веб-сайт (например, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и нажмите кнопку "Запись", затем обновите сайт. Остановите запись в любой момент, и вы сможете увидеть процессы, связанные со 'скриптами', 'рендерингом' и 'отрисовкой' сайта:
Вкладка "Производительность" содержит инструмент профилирования. Откройте веб-сайт (например, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и нажмите кнопку "Запись", затем обновите сайт. Остановите запись в любое время, и вы сможете увидеть процессы, которые выполняются для "скрипта", "рендеринга" и "рисования" сайта:
✅ Посетите [документацию Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) о панели производительности в Edge.
✅ Ознакомьтесь с [документацией Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) о панели производительности в Edge.
> Совет: чтобы получить точные данные о времени загрузки вашего сайта, очистите кэш браузера.
Выберите элементы временной шкалы профиля, чтобы увеличить события, происходящие во время загрузки страницы.
Выберите элементы временной шкалы профиля, чтобы увеличить события, происходящие во время загрузки вашей страницы.
Получите снимок производительности вашей страницы, выбрав часть временной шкалы профиля и посмотрев на панель сводки:
@ -45,29 +45,29 @@ CO_OP_TRANSLATOR_METADATA:
✅ Познакомьтесь с вашим профайлером! Откройте инструменты разработчика на этом сайте и проверьте, есть ли узкие места. Какой ресурс загружается дольше всего? Быстрее всего?
✅ Ознакомьтесь с профайлером! Откройте инструменты разработчика на этом сайте и проверьте, есть ли узкие места. Какой ресурс загружается медленнее всего? Быстрее всего?
## Проверки профилирования
В целом, есть несколько "проблемных зон", за которыми каждый веб-разработчик должен следить при создании сайта, чтобы избежать неприятных сюрпризов при развертывании в продакшн.
**Размеры ресурсов**: За последние годы веб стал "тяжелее" и, соответственно, медленнее. Часть этого веса связана с использованием изображений.
**Размеры ресурсов**: Веб стал "тяжелее", а значит, медленнее за последние несколько лет. Часть этого веса связана с использованием изображений.
✅ Изучите [Архив Интернета](https://httparchive.org/reports/page-weight), чтобы получить исторический обзор веса страниц и другую информацию.
✅ Просмотрите [Архив Интернета](https://httparchive.org/reports/page-weight) для исторического обзора веса страниц и других данных.
Хорошей практикой является оптимизация изображений и их доставка в нужном размере и разрешении для ваших пользователей.
Хорошая практика — убедиться, что ваши изображения оптимизированы и предоставляются в нужном размере и разрешении для ваших пользователей.
**Обход DOM**: Браузер должен построить модель объекта документа (DOM) на основе вашего кода, поэтому для хорошей производительности страницы важно минимизировать количество тегов, используя и стилизуя только то, что необходимо. Например, избыточные CSS, связанные со страницей, можно оптимизировать; стили, которые нужны только на одной странице, не обязательно включать в основной файл стилей.
**Перемещения по DOM**: Браузер должен построить свою модель объекта документа (DOM) на основе написанного вами кода, поэтому для хорошей производительности страницы важно минимизировать количество тегов, используя и стилизуя только то, что нужно странице. Например, избыточные CSS, связанные со страницей, можно оптимизировать; стили, которые нужно использовать только на одной странице, не обязательно включать в основной файл стилей.
**JavaScript**: Каждый разработчик JavaScript должен следить за скриптами, блокирующими рендеринг, которые должны быть загружены до того, как остальная часть DOM будет обработана и отрисована в браузере. Рассмотрите возможность использования `defer`для ваших встроенных скриптов (как это сделано в модуле Terrarium).
**JavaScript**: Каждый разработчик JavaScript должен следить за скриптами, блокирующими рендеринг, которые должны быть загружены до того, как остальная часть DOM может быть обработана и отображена в браузере. Рассмотрите возможность использования `defer`с вашими встроенными скриптами (как это сделано в модуле Terrarium).
✅ Попробуйте протестировать несколько сайтов на [сервисе проверки скорости сайтов](https://www.webpagetest.org/), чтобы узнать больше о стандартных проверках производительности.
✅ Попробуйте несколько сайтов на [сайте тестирования скорости](https://www.webpagetest.org/), чтобы узнать больше о стандартных проверках, которые проводятся для определения производительности сайта.
Теперь, когда вы понимаете, как браузер обрабатывает ресурсы, которые вы ему отправляете, давайте рассмотрим последние шаги для завершения вашего расширения:
Теперь, когда у вас есть представление о том, как браузер отображает ресурсы, которые вы ему отправляете, давайте рассмотрим последние шаги, которые нужно выполнить, чтобы завершить ваше расширение:
### Создание функции для расчета цвета
Работая в `/src/index.js`, добавьте функцию `calculateColor()` после серии переменных `const`, которые вы настроили для доступа к DOM:
Работая в `/src/index.js`, добавьте функцию `calculateColor()` после серии переменных `const`, которые вы установили для доступа к DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Что здесь происходит? Вы передаете значение (интенсивность углерода) из вызова API, который вы завершили на прошлом уроке, а затем вычисляете, насколько близко его значение к индексу, представленному в массиве цветов. Затем вы отправляете это ближайшее значение цвета в chrome runtime.
Что здесь происходит? Вы передаете значение (интенсивность углерода) из вызова API, который вы завершили в прошлом уроке, а затем рассчитываете, насколько близко его значение к индексу, представленному в массиве цветов. Затем вы отправляете это ближайшее значение цвета в chrome runtime.
Chrome.runtime имеет [API](https://developer.chrome.com/extensions/runtime), которое обрабатывает все виды фоновых задач, и ваше расширение использует его:
Chrome.runtime имеет [API](https://developer.chrome.com/extensions/runtime), который обрабатывает всевозможные фоновые задачи, и ваше расширение использует его:
> "Используйте API chrome.runtime для получения фоновой страницы, возврата данных о манифесте и прослушивания/реагирования на события в жизненном цикле приложения или расширения. Вы также можете использовать этот API для преобразования относительных путей URL в полностью квалифицированные URL."
> "Используйте API chrome.runtime для получения фоновой страницы, возврата сведений о манифесте и прослушивания событий в жизненном цикле приложения или расширения. Вы также можете использовать этот API для преобразования относительного пути URL в полностью квалифицированный URL."
✅ Если вы разрабатываете это расширение для Edge, вас может удивить, что вы используете API Chrome. Новые версии браузера Edge работают на движке Chromium, поэтому вы можете использовать эти инструменты.
✅ Если вы разрабатываете это расширение для Edge, вас может удивить, что вы используете API Chrome. Новые версии браузера Edge работают на движке браузера Chromium, поэтому вы можете использовать эти инструменты.
> Обратите внимание, если вы хотите профилировать расширение для браузера, откройте инструменты разработчика из самого расширения, так как оно является отдельным экземпляром браузера.
> Замечание: если вы хотите профилировать расширение для браузера, откройте инструменты разработчика внутри самого расширения, так как оно является отдельным экземпляром браузера.
### Установка цвета значка по умолчанию
### Установите цвет значка по умолчанию
Теперь в функции `init()` установите значок в стандартный зеленый цвет, снова вызвав действие `updateIcon` из Chrome:
Теперь, в функции `init()`, установите значок на стандартный зеленый цвет, снова вызвав действие `updateIcon` Chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Вызов функции, выполнение вызова
### Вызов функции и выполнение вызова
Далее вызовите созданную вами функцию, добавив ее в промис, возвращаемый API C02Signal:
Далее вызовите созданную вами функцию, добавив ее к обещанию, возвращаемому API C02Signal:
```JavaScript
//let CO2...
calculateColor(CO2);
```
И, наконец, в `/dist/background.js` добавьте слушатель для этих вызовов фоновых задач:
И, наконец, в `/dist/background.js`, добавьте слушатель для этих вызовов фоновых задач:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,11 +141,11 @@ function drawIcon(value) {
}
```
В этом коде вы добавляете слушатель для любых сообщений, поступающих в менеджер фоновых задач. Если сообщение называется 'updateIcon', то выполняется следующий код для отрисовки значка нужного цвета с использованием Canvas API.
В этом коде вы добавляете слушатель для любых сообщений, поступающих в менеджер фоновых задач. Если он называется 'updateIcon', то следующий код выполняется для рисования значка нужного цвета с использованием Canvas API.
✅ Вы узнаете больше о Canvas API в [уроках по созданию космической игры](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Вы узнаете больше о Canvas API в [уроках по игре в космос](../../6-space-game/2-drawing-to-canvas/README.md).
Теперь пересоберите ваше расширение (`npm run build`), обновите и запустите его, и наблюдайте за изменением цвета. Пора сходить за покупками или помыть посуду? Теперь вы знаете!
Теперь соберите ваше расширение (`npm run build`), обновите и запустите его, и наблюдайте за изменением цвета. Хорошее время, чтобы сходить за покупками или помыть посуду? Теперь вы знаете!
Поздравляем, вы создали полезное расширение для браузера и узнали больше о том, как работает браузер и как профилировать его производительность.
@ -154,23 +153,23 @@ function drawIcon(value) {
## 🚀 Задание
Исследуйте несколько открытых веб-сайтов, которые существуют уже давно, и, основываясь на их истории в GitHub, попробуйте определить, как они оптимизировались для производительностис течением времени, если вообще оптимизировались. Какая проблема встречается чаще всего?
Исследуйте некоторые сайты с открытым исходным кодом, которые существуют уже давно, и, основываясь на их истории в GitHub, попробуйте определить, как они оптимизировались за годы для повышения производительности, если вообще оптимизировались. Какой наиболее распространенный болевой момент?
## Викторина после лекции
## Тест после лекции
[Викторина после лекции](https://ff-quizzes.netlify.app/web/quiz/28)
[Тест после лекции](https://ff-quizzes.netlify.app/web/quiz/28)
## Обзор и самостоятельное изучение
Рассмотрите возможность подписки на [рассылку о производительности](https://perf.email/).
Изучите, как браузеры оценивают производительность веб-сайтов, исследуя вкладки производительности в их инструментах разработчика. Обнаружили ли вы какие-либо значительные различия?
Исследуйте некоторые способы, которыми браузеры оценивают веб-производительность, изучив вкладки производительности в их инструментах разработчика. Вы нашли какие-либо существенные различия?
## Задание
[Анализ производительности сайта](assignment.md)
[Анализ сайта на производительность](assignment.md)
---
**Отказ от ответственности**:
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
V posledných dvoch lekciách tohto modulu ste sa naučili, ako vytvoriť formulár a zobrazovaciu oblasť pre údaje získané z API. Je to veľmi štandardný spôsob vytvárania webovej prítomnosti na internete. Dokonca ste sa naučili, ako asynchrónne získavať údaje. Vaše rozšírenie prehliadača je takmer hotové.
V posledných dvoch lekciách tohto modulu ste sa naučili, ako vytvoriť formulár a zobrazovaciu oblasť pre údaje získané z API. Je to veľmi štandardný spôsob vytvárania webovej prezentácie na internete. Dokonca ste sa naučili, ako spracovávať asynchrónne získavanie údajov. Vaše rozšírenie prehliadača je takmer hotové.
Zostáva spravovať niektoré úlohy na pozadí, vrátane aktualizácie farby ikony rozšírenia, takže je to skvelý čas na diskusiu o tom, ako prehliadač spravuje tento typ úloh. Zamyslime sa nad týmito úlohami prehliadača v kontexte výkonu vašich webových aktív počas ich vytvárania.
Zostáva spravovať niektoré úlohy na pozadí, vrátane aktualizácie farby ikony rozšírenia, takže je to skvelý čas na diskusiu o tom, ako prehliadač spravuje tento druh úloh. Poďme sa zamyslieť nad týmito úlohami prehliadača v kontexte výkonu vašich webových aktív počas ich vytvárania.
## Základy webového výkonu
> "Výkon webovej stránky je o dvoch veciach: ako rýchlo sa stránka načíta a ako rýchlo na nej beží kód." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Téma, ako urobiť vaše webové stránky extrémne rýchle na všetkých typoch zariadení, pre všetkých typov používateľov a v rôznych situáciách, je neprekvapivo rozsiahla. Tu je niekoľko bodov, ktoré by ste mali mať na pamäti pri vytváraní štandardného webového projektu alebo rozšírenia prehliadača.
Téma, ako urobiť vaše webové stránky neuveriteľne rýchle na všetkých druhoch zariadení, pre všetkých druhov používateľov, v rôznych situáciách, je neprekvapivo rozsiahla. Tu je niekoľko bodov, ktoré by ste mali mať na pamäti pri vytváraní štandardného webového projektu alebo rozšírenia prehliadača.
Prvá vec, ktorú musíte urobiť, aby ste zabezpečili efektívny chod vašej stránky, je zhromaždiť údaje o jej výkone. Prvým miestom na to sú vývojárske nástroje vášho webového prehliadača. V Edge môžete vybrať tlačidlo "Nastavenia a ďalšie" (ikona troch bodiek v pravom hornom rohu prehliadača), potom prejsť na Viac nástrojov > Vývojárske nástroje a otvoriť kartu Výkon. Na Windows môžete použiť klávesové skratky `Ctrl` + `Shift` + `I` alebo na Mac`Option` + `Command` + `I` na otvorenie vývojárskych nástrojov.
Prvá vec, ktorú musíte urobiť, aby ste zabezpečili efektívny chod vašej stránky, je zhromaždiť údaje o jej výkone. Prvým miestom na to sú vývojárske nástroje vášho webového prehliadača. V Edge môžete vybrať tlačidlo "Nastavenia a ďalšie" (ikona troch bodiek v pravom hornom rohu prehliadača), potom prejsť na Viac nástrojov > Vývojárske nástroje a otvoriť kartu Výkon. Môžete tiež použiť klávesové skratky `Ctrl` + `Shift` + `I` na Windows alebo`Option` + `Command` + `I` na Macu na otvorenie vývojárskych nástrojov.
Karta Výkon obsahuje nástroj na profilovanie. Otvorte webovú stránku (vyskúšajte napríklad [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) a kliknite na tlačidlo 'Record', potom stránku obnovte. Nahrávanie môžete kedykoľvek zastaviť a budete môcť vidieť rutiny, ktoré sa generujú na 'skriptovanie', 'renderovanie' a 'maľovanie' stránky:
Karta Výkon obsahuje nástroj na profilovanie. Otvorte webovú stránku (vyskúšajte napríklad [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) a kliknite na tlačidlo 'Record', potom obnovte stránku. Nahrávanie môžete kedykoľvek zastaviť a budete môcť vidieť rutiny, ktoré sa generujú na 'skriptovanie', 'renderovanie' a 'maľovanie' stránky:
✅ Navštívte [Microsoft Dokumentáciu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o paneli Výkon v Edge
> Tip: aby ste získali presné údaje o čase spustenia vašej stránky, vymažte cache prehliadača
> Tip: aby ste získali presné údaje o čase spustenia vašej stránky, vymažte cache prehliadača.
Vyberte prvky časovej osi profilu, aby ste priblížili udalosti, ktoré sa dejú počas načítania vašej stránky.
@ -41,7 +41,7 @@ Získajte snímku výkonu vašej stránky výberom časti časovej osi profilu a
@ -55,11 +55,11 @@ Vo všeobecnosti existujú niektoré "problémové oblasti", na ktoré by si mal
✅ Prezrite si [Internetový archív](https://httparchive.org/reports/page-weight) pre historický pohľad na váhu stránok a ďalšie informácie.
Dobrou praxou je zabezpečiť, aby vaše obrázky boli optimalizované a doručené vo správnej veľkosti a rozlíšení pre vašich používateľov.
Dobrou praxou je zabezpečiť, aby vaše obrázky boli optimalizované a dodávané v správnej veľkosti a rozlíšení pre vašich používateľov.
**Prechádzanie DOM**: Prehliadač musí vytvoriť svoj Document Object Model na základe kódu, ktorý napíšete, takže je v záujme dobrého výkonu stránky udržiavať značky minimálne, používať a štýlovať len to, čo stránka potrebuje. Napríklad nadbytočné CSS spojené so stránkou by mohlo byť optimalizované; štýly, ktoré sa používajú len na jednej stránke, nemusia byť zahrnuté v hlavnom štýle.
**Prechádzanie DOM**: Prehliadač musí vytvoriť svoj Document Object Model na základe kódu, ktorý napíšete, takže je v záujme dobrého výkonu stránky udržiavať značky minimálne, používať a štýlovať len to, čo stránka potrebuje. Na tento bod by sa mohol optimalizovať nadbytočný CSS spojený so stránkou; štýly, ktoré sa majú používať iba na jednej stránke, nemusia byť zahrnuté v hlavnom štýle.
**JavaScript**: Každý JavaScript vývojár by si mal dávať pozor na 'skripty blokujúce renderovanie', ktoré musia byť načítané pred tým, ako môže byť zvyšok DOM prechádzaný a maľovaný do prehliadača. Zvážte použitie `defer` s vašimi inline skriptami (ako je to urobené v module Terrarium).
**JavaScript**: Každý vývojár JavaScriptu by si mal dávať pozor na skripty blokujúce renderovanie, ktoré sa musia načítať pred tým, ako sa zvyšok DOM môže prechádzať a maľovať do prehliadača. Zvážte použitie `defer` s vašimi inline skriptami (ako je to urobené v module Terrarium).
✅ Vyskúšajte niektoré stránky na [webovej stránke na testovanie rýchlosti stránok](https://www.webpagetest.org/), aby ste sa dozvedeli viac o bežných kontrolách, ktoré sa vykonávajú na určenie výkonu stránky.
@ -67,7 +67,7 @@ Teraz, keď máte predstavu o tom, ako prehliadač renderuje aktíva, ktoré mu
### Vytvorte funkciu na výpočet farby
Pracujte v súbore `/src/index.js` a pridajte funkciu nazvanú `calculateColor()` po sérii `const`premenných, ktoré ste nastavili na získanie prístupu k DOM:
Pracujte v `/src/index.js`, pridajte funkciu nazvanú `calculateColor()` po sérii premenných`const`, ktoré ste nastavili na získanie prístupu k DOM:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Čo sa tu deje? Odovzdáte hodnotu (intenzitu uhlíka) z API volania, ktoré ste dokončili v poslednej lekcii, a potom vypočítate, ako blízko je jej hodnota k indexu prezentovanému v poli farieb. Potom pošlete túto najbližšiu hodnotu farby do runtime prehliadača.
Čo sa tu deje? Odovzdáte hodnotu (intenzitu uhlíka) z API volania, ktoré ste dokončili v poslednej lekcii, a potom vypočítate, ako blízko je jej hodnota k indexu prezentovanému v poli farieb. Potom pošlete túto najbližšiu hodnotu farby cez runtime chrome.
Runtime prehliadača má [API](https://developer.chrome.com/extensions/runtime), ktoré spravuje všetky druhy úloh na pozadí, a vaše rozšírenie ho využíva:
Chrome.runtime má [API](https://developer.chrome.com/extensions/runtime), ktoré spracováva všetky druhy úloh na pozadí, a vaše rozšírenie to využíva:
> "Použite chrome.runtime API na získanie stránky na pozadí, vrátenie podrobností o manifeste a počúvanie a reagovanie na udalosti v životnom cykle aplikácie alebo rozšírenia. Toto API môžete tiež použiť na konverziu relatívnej cesty URL na plne kvalifikované URL."
> "Použite API chrome.runtime na získanie stránky na pozadí, vrátenie podrobností o manifeste a počúvanie a reagovanie na udalosti v životnom cykle aplikácie alebo rozšírenia. Toto API môžete tiež použiť na konverziu relatívnej cesty URL na úplne kvalifikované URL."
✅ Ak vyvíjate toto rozšírenie pre Edge, môže vás prekvapiť, že používate chrome API. Novšie verzie prehliadača Edge bežia na prehliadačovom engine Chromium, takže môžete využívať tieto nástroje.
✅ Ak vyvíjate toto rozšírenie pre Edge, môže vás prekvapiť, že používate API chrome. Novšie verzie prehliadača Edge bežia na prehliadačovom engine Chromium, takže môžete využívať tieto nástroje.
> Poznámka: Ak chcete profilovať rozšírenie prehliadača, spustite vývojárske nástroje priamo z rozšírenia, pretože ide o samostatnú inštanciu prehliadača.
> Poznámka: Ak chcete profilovať rozšírenie prehliadača, spustite vývojárske nástroje priamo z rozšírenia, pretože je to samostatná inštancia prehliadača.
### Nastavte predvolenú farbu ikony
Teraz v funkcii `init()` nastavte ikonu na generickú zelenú farbu na začiatok tým, že opäť zavoláte akciu `updateIcon`prehliadača chrome:
Teraz v funkcii `init()` nastavte ikonu na generickú zelenú farbu na začiatok tým, že opäť zavoláte akciu `updateIcon`v chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Zavolajte funkciu, vykonajte volanie
Ďalej zavolajte funkciu, ktorú ste práve vytvorili, pridaním do sľubu vráteného API C02Signal:
@ -120,17 +119,17 @@ chrome.runtime.sendMessage({
calculateColor(CO2);
```
A nakoniec, v súbore `/dist/background.js`, pridajte poslucháča pre tieto volania úloh na pozadí:
A nakoniec, v `/dist/background.js`, pridajte poslucháča pre tieto volania akcií na pozadí:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,12 +140,11 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
V tomto kóde pridávate poslucháča pre akékoľvek správy prichádzajúce do správcu úloh na pozadí. Ak sa volá 'updateIcon', potom sa spustí nasledujúci kód na nakreslenie ikony správnej farby pomocou Canvas API.
✅ Viac o Canvas API sa dozviete v [lekciách o vesmírnej hre](../../6-space-game/2-drawing-to-canvas/README.md).
✅ O Canvas API sa dozviete viac v [lekciách o vesmírnej hre](../../6-space-game/2-drawing-to-canvas/README.md).
Teraz znovu zostavte svoje rozšírenie (`npm run build`), obnovte a spustite svoje rozšírenie a sledujte zmenu farby. Je vhodný čas ísť na nákup alebo umyť riad? Teraz už viete!
Teraz znovu zostavte svoje rozšírenie (`npm run build`), obnovte a spustite svoje rozšírenie a sledujte zmenu farby. Je vhodný čas ísť na nákup alebo umyť riad? Teraz to viete!
Gratulujeme, vytvorili ste užitočné rozšírenie prehliadača a dozvedeli ste sa viac o tom, ako prehliadač funguje a ako profilovať jeho výkon.
@ -154,7 +152,7 @@ Gratulujeme, vytvorili ste užitočné rozšírenie prehliadača a dozvedeli ste
## 🚀 Výzva
Preskúmajte niektoré open source webové stránky, ktoré existujú už dlhší čas, a na základe ich histórie na GitHube zistite, či boli optimalizované pre výkon v priebehu rokov, ak vôbec. Aký je najbežnejší problém?
Preskúmajte niektoré open source webové stránky, ktoré existujú už dlho, a na základe ich histórie na GitHube zistite, či boli optimalizované pre výkon v priebehu rokov, ak vôbec. Aký je najbežnejší problém?
Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, upozorňujeme, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
@ -25,31 +25,31 @@ Ostaja še upravljanje nekaterih ozadnih opravil, vključno z osveževanjem barv
Tema, kako narediti vaše spletne strani izjemno hitre na vseh vrstah naprav, za vse vrste uporabnikov in v vseh situacijah, je pričakovano obsežna. Tukaj je nekaj točk, ki jih je treba upoštevati pri gradnji standardnega spletnega projekta ali razširitve brskalnika.
Prva stvar, ki jo morate storiti, da zagotovite učinkovito delovanje vaše strani, je zbiranje podatkov o njeni zmogljivosti. Prvo mesto za to so orodja za razvijalce v vašem spletnem brskalniku. V brskalniku Edge lahko izberete gumb "Nastavitve in več" (ikona treh pik v zgornjem desnem kotu brskalnika), nato pa se pomaknete na Več orodij > Orodja za razvijalce in odprete zavihek Zmogljivost. Orodja za razvijalce lahko odprete tudi s kombinacijo tipk `Ctrl` + `Shift` + `I` v sistemu Windows ali `Option` + `Command` + `I` v sistemu Mac.
Prva stvar, ki jo morate storiti, da zagotovite učinkovito delovanje vaše strani, je zbiranje podatkov o njeni zmogljivosti. Prvo mesto za to so razvojna orodja vašega spletnega brskalnika. V brskalniku Edge lahko izberete gumb "Nastavitve in več" (ikona treh pik v zgornjem desnem kotu brskalnika), nato pa se pomaknete na Več orodij > Razvojna orodja in odprete zavihek Zmogljivost. Razvojna orodja lahko odprete tudi s kombinacijo tipk `Ctrl` + `Shift` + `I` v sistemu Windows ali `Option` + `Command` + `I` v sistemu Mac.
Zavihek Zmogljivost vsebuje orodje za profiliranje. Odprite spletno stran (poskusite na primer [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) in kliknite gumb 'Record', nato osvežite stran. Snemanje lahko kadar koli ustavite, nato pa boste lahko videli rutine, ki se generirajo za 'script', 'render' in 'paint' strani:
✅ Obiščite [Microsoftovo dokumentacijo](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) o zavihku Zmogljivost v brskalniku Edge.
> Nasvet: za natančno merjenje časa zagona vaše spletne strani počistite predpomnilnik brskalnika.
> Nasvet: da dobite natančno meritev časa zagona vaše spletne strani, počistite predpomnilnik brskalnika.
Izberite elemente časovnice profila, da povečate dogodke, ki se zgodijo med nalaganjem vaše strani.
Pridobite posnetek zmogljivosti vaše strani tako, da izberete del časovnice profila in si ogledate povzetek v stranskem podoknu:
Pridobite posnetek zmogljivosti vaše strani tako, da izberete del časovnice profila in si ogledate povzetek:
✅ Spoznajte svoj profiler! Odprite orodja za razvijalce na tej strani in preverite, ali obstajajo ozka grla. Katero sredstvo se nalaga najpočasneje? Katero najhitreje?
✅ Spoznajte svoj profiler! Odprite razvojna orodja na tej strani in preverite, ali obstajajo ozka grla. Katero sredstvo se nalaga najpočasneje? Katero najhitreje?
## Preverjanje profiliranja
Na splošno obstajajo nekatera "problematična področja", na katera bi moral biti pozoren vsak spletni razvijalec pri gradnji strani, da se izogne neprijetnim presenečenjem ob času objave v produkciji.
Na splošno obstajajo nekatera "problematična področja", na katera bi moral biti pozoren vsak spletni razvijalec pri gradnji strani, da se izogne neprijetnim presenečenjem ob času uvedbe v produkcijo.
**Velikosti sredstev**: Splet je v zadnjih nekaj letih postal 'težji' in zato počasnejši. Del te teže je povezan z uporabo slik.
@ -57,17 +57,17 @@ Na splošno obstajajo nekatera "problematična področja", na katera bi moral bi
Dobra praksa je zagotoviti, da so vaše slike optimizirane in dostavljene v ustrezni velikosti in ločljivosti za vaše uporabnike.
**Prehodi po DOM-u**: Brskalnik mora zgraditi svoj model dokumenta (DOM) na podlagi kode, ki jo napišete, zato je v interesu dobre zmogljivosti strani, da ohranite oznake minimalne, pri čemer uporabljate in oblikujete le tisto, kar stran potrebuje. Na primer, odvečni CSS, povezan s stranjo, bi lahko bil optimiziran; slogi, ki jih je treba uporabiti le na eni strani, ni treba vključiti v glavno slogovno datoteko.
**Prehodi DOM**: Brskalnik mora zgraditi svoj model dokumenta (DOM) na podlagi kode, ki jo napišete, zato je v interesu dobre zmogljivosti strani, da ohranite oznake minimalne, pri čemer uporabljate in oblikujete le tisto, kar stran potrebuje. Na primer, odvečna CSS, povezana s stranjo, bi lahko bila optimizirana; slogi, ki jih je treba uporabiti le na eni strani, ni treba vključiti v glavno slogovno datoteko.
**JavaScript**: Vsak razvijalec JavaScripta bi moral paziti na 'skripte, ki blokirajo upodabljanje',ki jih je treba naložiti, preden se lahko prehodi in nariše preostali DOM v brskalniku. Razmislite o uporabi `defer` z vašimi vgrajenimi skripti (kot je storjeno v modulu Terrarium).
**JavaScript**: Vsak razvijalec JavaScripta bi moral paziti na skripte, ki blokirajo upodabljanje in jih je treba naložiti, preden se preostali DOM lahko prehodi in nariše v brskalnik. Razmislite o uporabi `defer` z vašimi vgrajenimi skripti (kot je storjeno v modulu Terrarium).
✅ Preizkusite nekaj strani na [spletni strani za testiranje hitrosti strani](https://www.webpagetest.org/), da se naučite več o običajnih preverjanjih, ki se izvajajo za določanje zmogljivosti strani.
Zdaj, ko imate predstavo o tem, kako brskalnik upodablja sredstva, ki mu jih pošljete, si poglejmo zadnje stvari, ki jih morate storiti za dokončanje vaše razširitve:
Zdaj, ko imate predstavo o tem, kako brskalnik upodablja sredstva, ki jih pošljete nanj, si poglejmo zadnje stvari, ki jih morate storiti, da dokončate svojo razširitev:
### Ustvarite funkcijo za izračun barve
V datoteki `/src/index.js` dodajte funkcijo z imenom `calculateColor()` za serijo spremenljivk `const`, ki jih nastavite za dostop do DOM-a:
V datoteki `/src/index.js` dodajte funkcijo z imenom `calculateColor()` za serijo spremenljivk `const`, ki ste jih nastavili za dostop do DOM-a:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Kaj se tukaj dogaja? Posredujete vrednost (intenzivnost ogljika) iz klica API-ja, ki ste ga dokončali v zadnji lekciji, nato pa izračunate, kako blizu je njena vrednost indeksu, predstavljenemu v polju barv. Nato pošljete to najbližjo vrednost barve prek runtime okolja Chrome.
Kaj se tukaj dogaja? Posredujete vrednost (intenzivnost ogljika) iz API-klica, ki ste ga dokončali v prejšnji lekciji, nato pa izračunate, kako blizu je njena vrednost indeksu, predstavljenemu v polju barv. Nato pošljete to najbližjo barvno vrednost prek runtime okolja Chrome.
Runtime okolje Chrome ima [API](https://developer.chrome.com/extensions/runtime), ki obravnava vse vrste ozadnih opravil, vaša razširitev pa ga izkorišča:
> "Uporabite API chrome.runtime za pridobitev ozadja strani, vrnitev podrobnosti o manifestu ter poslušanje in odzivanje na dogodke v življenjskem ciklu aplikacije ali razširitve. Ta API lahko uporabite tudi za pretvorbo relativne poti URL-jev v popolnoma kvalificirane URL-je."
> "Uporabite API runtime okolja Chrome za pridobitev ozadja strani, vrnitev podrobnosti o manifestu ter poslušanje in odzivanje na dogodke v življenjskem ciklu aplikacije ali razširitve. Ta API lahko uporabite tudi za pretvorbo relativne poti URL-jev v popolnoma kvalificirane URL-je."
✅ Če razvijate to razširitev brskalnika za Edge, vas morda preseneča, da uporabljate API Chrome. Novejše različice brskalnika Edge delujejo na brskalniškem pogonu Chromium, zato lahko izkoristite ta orodja.
✅ Če razvijate to razširitev brskalnika za Edge, vas morda preseneča, da uporabljate API Chrome. Novejše različice brskalnika Edge delujejo na pogonu brskalnika Chromium, zato lahko izkoristite ta orodja.
> Opomba: če želite profilirati razširitev brskalnika, zaženite orodja za razvijalce znotraj same razširitve, saj je to ločen brskalniški primerek.
> Opomba: če želite profilirati razširitev brskalnika, zaženite razvojna orodja znotraj same razširitve, saj je to ločen primer brskalnika.
### Nastavite privzeto barvo ikone
Zdaj v funkciji `init()` nastavite ikono na generično zeleno barvo, tako da znova pokličete akcijo `updateIcon`v okolju Chrome:
Zdaj v funkciji `init()` nastavite ikono na generično zeleno barvo, tako da znova pokličete akcijo `updateIcon`okolja Chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Pokličite funkcijo, izvedite klic
Nato pokličite funkcijo, ki ste jo pravkar ustvarili, tako da jo dodate obljubi, ki jo vrne API C02Signal:
@ -125,12 +124,12 @@ In na koncu, v datoteki `/dist/background.js`, dodajte poslušalca za te klice o
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,35 +141,35 @@ function drawIcon(value) {
}
```
V tej kodi dodajate poslušalca za kakršna koli sporočila, ki prihajajo v upravitelja ozadnih opravil. Če je klic imenovan 'updateIcon', se nato izvede naslednja koda za risanje ikone ustrezne barve z uporabo API-ja Canvas.
V tej kodi dodajate poslušalca za vse sporočila, ki prihajajo v upravitelja ozadnih opravil. Če je klic imenovan 'updateIcon', se nato izvede naslednja koda za risanje ikone ustrezne barve z uporabo API-ja Canvas.
✅ Več o API-ju Canvas boste izvedeli v [lekcijah o vesoljski igri](../../6-space-game/2-drawing-to-canvas/README.md).
Zdaj ponovno zgradite svojo razširitev (`npm run build`), osvežite in zaženite svojo razširitev ter opazujte spremembo barve. Je pravi čas za opravilo ali pomivanje posode? Zdaj veste!
Čestitamo, zgradili ste uporabno razširitev brskalnika in se naučili več o delovanju brskalnika ter profiliranju njegove zmogljivosti.
Čestitke, zgradili ste uporabno razširitev brskalnika in se naučili več o delovanju brskalnika ter profiliranju njegove zmogljivosti.
---
## 🚀 Izziv
Raziskujte nekatere odprtokodne spletne strani, ki obstajajo že dolgo, in na podlagi njihove zgodovine na GitHubu preverite, ali lahko ugotovite, kako so bile optimizirane skozi leta za zmogljivost, če sploh. Kaj je najpogostejša težava?
Raziskujte nekatere odprtokodne spletne strani, ki obstajajo že dolgo časa, in na podlagi njihove zgodovine na GitHubu preverite, ali lahko ugotovite, kako so bile optimizirane skozi leta za zmogljivost, če sploh. Kaj je najpogostejša težava?
## Kviz po lekciji
## Zaključni kviz
[Kviz po lekciji](https://ff-quizzes.netlify.app/web/quiz/28)
Razmislite o prijavi na [novice o zmogljivosti](https://perf.email/).
Razmislite o prijavi na [novičnik o zmogljivosti](https://perf.email/).
Raziskujte nekatere načine, kako brskalniki ocenjujejo spletno zmogljivost, tako da pregledate zavihke zmogljivosti v njihovih orodjih za razvijalce. Ali opazite kakšne večje razlike?
Raziskujte nekatere načine, kako brskalniki ocenjujejo spletno zmogljivost, tako da pregledate zavihke zmogljivosti v njihovih spletnih orodjih. Ali opazite kakšne večje razlike?
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.
Ta dokument je bil preveden z uporabo storitve AI za prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku naj se šteje za avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.
# Пројекат за проширење прегледача, део 3: Упознајте сеса позадинским задацима и перформансама
# Пројекат проширења за прегледач, део 3: Упознајте позадинске задатке и перформансе
## Квиз пре предавања
@ -15,59 +15,59 @@ CO_OP_TRANSLATOR_METADATA:
### Увод
У претходне две лекције овог модула, научили сте како да направите форму и простор за приказивање података преузетих са API-ја. Овоје веома стандардни начин креирања веб присуства на интернету. Чак сте научили како да асинхроно преузимате податке. Ваше проширење за прегледач је скоро завршено.
У претходна два часа овог модула, научили сте како да направите форму и простор за приказ података преузетих са API-ја. Тоје веома стандардни начин креирања веб присуства на интернету. Чак сте научили како да асинхроно преузимате податке. Ваше проширење за прегледач је скоро завршено.
Остаје да управљате неким позадинским задацима, укључујући освежавање боје иконе проширења, па је ово одличан тренутак да разговарамо о томе како прегледач управља оваквим задацима. Размислимо о овим задацима прегледача у контексту перформанси ваших веб ресурса док их градите.
Остало је да управљате неким позадинским задацима, укључујући освежавање боје иконе проширења, па је ово одличан тренутак да разговарамо о томе како прегледач управља оваквим задацима. Размислимо о овим задацима прегледача у контексту перформанси ваших веб ресурса док их градите.
## Основе веб перформанси
> "Перформансе вебсајта се односе на две ствари: колико брзо се страница учитава и колико брзо се код на њој извршава." -- [Зак Гросбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Перформансе вебсајта се односе на две ствари: колико брзо се страница учитава и колико брзо код на њој ради." -- [Зак Гросбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Тема како учинити ваше вебсајтове изузетно брзим на свим врстама уређаја, за све врсте корисника, у свим врстама ситуација, није изненађујуће обимна. Ево неколико тачака које треба имати на уму док градите стандардни веб пројекат или проширење за прегледач.
Тема како учинити ваше вебсајтове изузетно брзим на свим врстама уређаја, за све врсте корисника, у свим врстама ситуација, је, очекивано, веома широка. Ево неких тачака које треба имати на уму док градите стандардни веб пројекат или проширење за прегледач.
Прва ствар коју треба да урадите како бисте осигурали да ваш сајт ради ефикасно је да прикупите податке о његовим перформансама. Прво место за то су алати за програмере у вашем веб прегледачу. У Edge-у, можете изабрати дугме „Подешавања и још“ (икона са три тачке у горњем десном углу прегледача), затим идите на Више алата > Алатке за програмере и отворите картицу Перформансе. Такође можете користити пречице на тастатури `Ctrl` + `Shift` + `I` на Windows-у или `Option` + `Command` + `I` на Mac-у да отворите алате за програмере.
Прва ствар коју треба да урадите да бисте осигурали да ваш сајт ради ефикасно је да прикупите податке о његовим перформансама. Прво место за то су алати за програмере у вашем веб прегледачу. У Edge-у, можете изабрати дугме "Подешавања и још" (икона три тачке у горњем десном углу прегледача), затим отићи на Више алата > Алатке за програмере и отворити картицу Перформансе. Такође можете користити пречице на тастатури `Ctrl` + `Shift` + `I` на Windows-у или `Option` + `Command` + `I` на Mac-у да отворите алатке за програмере.
Картица Перформансе садржи алат за профилисање. Отворите вебсајт (на пример, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликните на дугме 'Сними', затим освежите сајт. Прекините снимање у било ком тренутку и моћи ћете да видите рутине које се генеришу за 'script', 'render' и 'paint' сајта:
Картица Перформансе садржи алатку за профилисање. Отворите вебсајт (пробајте, на пример, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликните на дугме 'Record', затим освежите сајт. Прекините снимање у било ком тренутку, и моћи ћете да видите рутине које се генеришу за 'script', 'render' и 'paint' сајта:
✅ Упознајте свој профајлер! Отворите алате за програмере на овом сајту и проверите да ли постоје уска грла. Који јересурсса најспоријим учитавањем? Најбржим?
✅ Упознајте свој профилер! Отворите алатке за програмере на овом сајту и видите да ли постоје уска грла. Који јересурсса најспоријим учитавањем? Најбржим?
## Провере профилисања
Генерално, постоје неке „проблематичне области“ које сваки веб програмер треба да прати приликом изградње сајта како би избегао непријатна изненађења када дође време за пуштање у продукцију.
Уопштено, постоје неке "проблематичне области" које сваки веб програмер треба да прати приликом изградње сајта како би избегао непријатна изненађења када дође време за пуштање у продукцију.
**Величине ресурса**: Вебје постао „тежи“, а самим тим и спорији, током последњих неколико година. Део ове тежине има везе са употребом слика.
**Величине ресурса**: Вебје постао 'тежи', а самим тим и спорији, током последњих неколико година. Део те тежине има везе са употребом слика.
✅ Прегледајте [Интернет архиву](https://httparchive.org/reports/page-weight) за историјски преглед тежине страница и више.
✅ Прегледајте [Архиву интернета](https://httparchive.org/reports/page-weight) за историјски преглед тежине страница и више.
Добра пракса је да осигурате да су ваше слике оптимизоване и испоручене у одговарајућој величини и резолуцији за ваше кориснике.
**Проласци кроз DOM**: Прегледач мора да изгради свој Document Object Model на основу кода који напишете, тако дајеу интересу добрих перформанси странице да ваши тагови буду минимални, користећи и стилизујући само оно што је страници потребно. У том смислу, вишак CSS-а повезан са страницом могао би бити оптимизован; стилови који треба да се користе само на једној страници не морају бити укључени у главни стилски лист, на пример.
**Пролази кроз DOM**: Прегледач мора да изгради свој Document Object Model на основу кода који напишете, пајеу интересу добрих перформанси странице да ваши тагови буду минимални, користећи и стилизујући само оно што страница захтева. У том смислу, вишак CSS-а повезан са страницом могао би бити оптимизован; стилови који треба да се користе само на једној страници не морају бити укључени у главни стилски лист, на пример.
**JavaScript**: Сваки JavaScript програмер треба да пази на скрипте које блокирају рендеровање и које морају бити учитане пре него што остатак DOM-а може бити обрађен и нацртан у прегледачу. Размотрите коришћење`defer`са вашим уграђеним скриптама (као што је урађено у модулу Terrarium).
**JavaScript**: Сваки JavaScript програмер треба да пази на скрипте које блокирају рендеровање и које морају бити учитане пре него што остатак DOM-а може бити обрађен и приказан у прегледачу. Размислите о коришћењу`defer`са вашим уграђеним скриптама (као што је урађено у модулу Terrarium).
✅ Испробајте неке сајтове на [вебсајту за тестирање брзине сајта](https://www.webpagetest.org/) да бисте сазнали више о уобичајеним проверама које се раде за одређивање перформанси сајта.
✅ Испробајте неке сајтове на [веб страници за тест брзине сајта](https://www.webpagetest.org/) да бисте сазнали више о уобичајеним проверама које се раде за одређивање перформанси сајта.
Сада када имате идеју о томе како прегледач рендерујересурсе које му шаљете, хајде да погледамо последње ствари које треба да урадите да бисте завршили своје проширење:
Сада када имате идеју о томе како прегледач приказујересурсе које му шаљете, погледајмо последње ствари које треба да урадите да бисте завршили своје проширење:
### Направите функцију за израчунавање боје
Радећи у`/src/index.js`, додајте функцију под називом`calculateColor()` након серије `const` променљивих које сте поставили да бисте добили приступ DOM-у:
Радећи у`/src/index.js`, додајте функцију названу`calculateColor()` након серије `const` променљивих које сте поставили да бисте добили приступ DOM-у:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Шта се овде дешава? Прослеђујете вредност (интензитет угљеника) из API позива који сте завршили у претходној лекцији, а затим израчунавате колико је његова вредност близу индекса представљеног у низу боја. Затим ту најближу вредност боје шаљете у chrome runtime.
Шта се овде дешава? Прослеђујете вредност (интензитет угљеника) из API позива који сте завршили у претходном часу, а затим израчунавате колико је његова вредност близу индекса представљеног у низу боја. Затим шаљете ту најближу вредност боје преко chrome runtime-а.
Chrome.runtime има [API](https://developer.chrome.com/extensions/runtime) који обрађује све врсте позадинских задатака, а ваше проширење то користи:
chrome.runtime има [API](https://developer.chrome.com/extensions/runtime) који обрађује све врсте позадинских задатака, а ваше проширење то користи:
> "Користите chrome.runtime API за преузимање позадинске странице, враћање детаља о манифесту и слушање и одговарање на догађаје у животном циклусу апликације или проширења. Такође можете користити овај API за конвертовање релативних путања URL-ова у потпуно квалификоване URL-ове."
> "Користите chrome.runtime API да бисте преузели позадинску страницу, вратили детаље о манифесту и слушали и одговарали на догађаје у животном циклусу апликације или проширења. Такође можете користити овај API да конвертујете релативну путању URL-ова у потпуно квалификоване URL-ове."
✅ Ако развијате ово проширење за Edge, могло би вас изненадити што користите chrome API. Новије верзије Edge прегледача раде на Chromium прегледачком механизму, тако да можете користити ове алате.
✅ Ако развијате ово проширење за Edge, могло би вас изненадити да користите chrome API. Новије верзије Edge прегледача раде на Chromium прегледачком механизму, тако да можете користити ове алатке.
> Напомена: ако желите да профилишете проширење за прегледач, покрените алате за програмере из самог проширења, јерје оно засебнаинстанца прегледача.
> Напомена: ако желите да профилишете проширење за прегледач, покрените алатке за програмере из самог проширења, јерје оно свој сопствени засебни прегледачки инстанц.
### Поставите подразумевану боју иконе
Сада, у функцији `init()`, поставите икону на генеричку зелену боју тако што ћете поново позвати chrome-ову акцију `updateIcon`:
Сада, у функцији `init()`, поставите икону да буде генеричка зелена на почетку тако што ћете поново позвати chrome-ову акцију `updateIcon`:
```JavaScript
chrome.runtime.sendMessage({
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Позовите функцију, извршите позив
Затим, позовите ту функцију коју сте управо креирали тако што ћете је додати уpromise који враћа C02Signal API:
Затим, позовите ту функцију коју сте управо креирали тако што ћете је додати уобећање које враћа C02Signal API:
```JavaScript
//let CO2...
calculateColor(CO2);
```
И на крају, у`/dist/background.js`, додајте слушаоца за ове позадинске позиве акција:
И на крају, у`/dist/background.js`, додајте слушач за ове позадинске позиве акција:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,29 +141,29 @@ function drawIcon(value) {
}
```
У овом коду, додајете слушаоца за било које поруке које стижу до менаџера позадинских задатака. Ако се зове 'updateIcon', онда сеизвршава следећи код за цртање иконе одговарајуће боје користећи Canvas API.
У овом коду, додајете слушач за било које поруке које стижу до менаџера позадинских задатака. Ако се зове 'updateIcon', онда сеследећи код извршава да би се нацртала икона одговарајуће боје користећи Canvas API.
✅ Више ћете научити о Canvas API-јуу [лекцијама о свемирској игри](../../6-space-game/2-drawing-to-canvas/README.md).
Сада, поново изградите своје проширење (`npm run build`), освежите и покрените своје проширење и гледајте како себоја мења. Да ли је добро време за обављање неког посла или прање судова? Сада знате!
Сада, поново изградите своје проширење (`npm run build`), освежите и покрените своје проширење, и гледајте како себоја мења. Да ли је добро време за обављање неког посла или прање судова? Сада знате!
Честитамо, направили сте корисно проширење за прегледач и научили више о томе како прегледач функционише и како профилисати његове перформансе.
Честитамо, направили сте корисно проширење за прегледач и научили више о томе како прегледач ради и како профилисати његове перформансе.
---
## 🚀 Изазов
Истражите неке вебсајтове отвореног кода који постоје већ дуго и, на основу њихове историје на GitHub-у, покушајте да утврдите како су оптимизовани током година за перформансе, ако уопште јесу. Којаје најчешћа тачка проблема?
Истражите неке вебсајтове отвореног кода који постоје већ дуго времена, и, на основу њихове историје на GitHub-у, видите да ли можете утврдити како су оптимизовани током година за перформансе, ако уопште јесу. Којаје најчешћа проблематична тачка?
## Квиз након предавања
## Квиз после предавања
[Квиз након предавања](https://ff-quizzes.netlify.app/web/quiz/28)
[Квиз после предавања](https://ff-quizzes.netlify.app/web/quiz/28)
## Преглед и самостално учење
Размотрите пријављивање на [билтен о перформансама](https://perf.email/).
Размислите о пријављивању на [билтен о перформансама](https://perf.email/)
Истражите неке од начина на које прегледачи мере веб перформансе тако што ћете прегледати картице перформанси у њиховим алатима за веб. Да ли налазите неке велике разлике?
Истражите неке од начина на које прегледачи процењују веб перформансе тако што ћете прегледати картице перформанси у њиховим веб алатима. Да ли налазите неке значајне разлике?
## Задатак
@ -173,4 +172,4 @@ function drawIcon(value) {
---
**Одрицање од одговорности**:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Несносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Непреузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.
I de två senaste lektionerna i denna modul lärde du dig att bygga ett formulär och en visningsyta för data hämtad från ett API. Det är ett mycket vanligt sätt att skapa en webbnärvaro. Du lärde dig även att hantera asynkron datainhämtning. Ditt webbläsartillägg är nästan färdigt.
I de två senaste lektionerna i denna modul lärde du dig hur man bygger ett formulär och en visningsyta för data hämtad från ett API. Det är ett mycket vanligt sätt att skapa en webbnärvaro. Du lärde dig till och med hur man hanterar asynkron datainhämtning. Ditt webbläsartillägg är nästan klart.
Det som återstår är att hantera några bakgrundsuppgifter, inklusive att uppdatera färgen på tilläggets ikon. Det är därför ett bra tillfälle att prata om hur webbläsaren hanterar denna typ av uppgifter. Låt oss tänka på dessa webbläsaruppgifter i kontexten av prestandan för dina webbresurser när du bygger dem.
Det återstår att hantera några bakgrundsuppgifter, inklusive att uppdatera färgen på tilläggets ikon, så det är ett bra tillfälle att prata om hur webbläsaren hanterar denna typ av uppgifter. Låt oss tänka på dessa webbläsaruppgifter i kontexten av prestandan för dina webbresurser när du bygger dem.
## Grundläggande om webbprestanda
@ -25,13 +25,13 @@ Det som återstår är att hantera några bakgrundsuppgifter, inklusive att uppd
Ämnet om hur man gör sina webbplatser blixtsnabba på alla typer av enheter, för alla typer av användare, i alla typer av situationer, är föga förvånande omfattande. Här är några punkter att tänka på när du bygger antingen ett standardwebbprojekt eller ett webbläsartillägg.
Det första du behöver göra för att säkerställa att din webbplats körs effektivt är att samla in data om dess prestanda. Den första platsen att göra detta är i utvecklarverktygen i din webbläsare. I Edge kan du välja knappen "Inställningar och mer" (ikonen med tre punkter längst upp till höger i webbläsaren), navigera till Fler verktyg > Utvecklarverktyg och öppna fliken Prestanda. Du kan också använda tangentbordsgenvägarna `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac för att öppna utvecklarverktygen.
Det första du behöver göra för att säkerställa att din webbplats fungerar effektivt är att samla in data om dess prestanda. Den första platsen att göra detta är i utvecklarverktygen i din webbläsare. I Edge kan du välja knappen "Inställningar och mer" (ikonen med tre punkter längst upp till höger i webbläsaren), sedan navigera till Fler verktyg > Utvecklarverktyg och öppna fliken Prestanda. Du kan också använda tangentbordsgenvägarna `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac för att öppna utvecklarverktygen.
Fliken Prestanda innehåller ett profileringsverktyg. Öppna en webbplats (prova till exempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) och klicka på knappen 'Spela in', uppdatera sedan webbplatsen. Stoppa inspelningen när som helst, och du kommer att kunna se rutinerna som genereras för att 'skripta', 'rendera' och 'måla' webbplatsen:
Fliken Prestanda innehåller ett profileringsverktyg. Öppna en webbplats (prova till exempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) och klicka på 'Record'-knappen, sedan uppdatera sidan. Stoppa inspelningen när som helst, och du kommer att kunna se rutinerna som genereras för att 'skripta', 'rendera' och 'måla' sidan:
✅ Besök [Microsoft-dokumentationen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) om prestandapanelen i Edge
✅ Besök [Microsoft Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) om prestandapanelen i Edge
> Tips: för att få en korrekt avläsning av din webbplats starttid, rensa webbläsarens cache
@ -45,29 +45,29 @@ Kontrollera händelseloggen för att se om någon händelse tog längre än 15 m
✅ Lär känna din profiler! Öppna utvecklarverktygen på denna webbplats och se om det finns några flaskhalsar. Vilken resurs laddar långsammast? Vilken är snabbast?
✅ Lär känna din profiler! Öppna utvecklarverktygen på denna webbplats och se om det finns några flaskhalsar. Vilken resurs laddar långsammast? Vilken snabbast?
## Profilkontroller
Generellt sett finns det några "problemområden" som varje webbutvecklare bör hålla utkik efter när de bygger en webbplats för att undvika obehagliga överraskningar när det är dags att distribuera till produktion.
**Resursstorlekar**: Webben har blivit "tyngre" och därmed långsammare under de senaste åren. En del av denna tyngd har att göra med användningen av bilder.
**Resursstorlekar**: Webben har blivit 'tyngre' och därmed långsammare under de senaste åren. En del av denna tyngd har att göra med användningen av bilder.
✅ Titta igenom [Internetarkivet](https://httparchive.org/reports/page-weight) för en historisk översikt över sidvikt och mer.
✅ Titta igenom [Internetarkivet](https://httparchive.org/reports/page-weight) för en historisk översikt av sidvikt och mer.
En bra praxis är att säkerställa att dina bilder är optimerade och levereras i rätt storlek och upplösning för dina användare.
**DOM-traverseringar**: Webbläsaren måste bygga sin Document Object Model baserat på koden du skriver, så det är i intresset av god sidprestanda att hålla dina taggar minimala och endast använda och styla det som sidan behöver. I detta avseende kan överflödig CSS som är kopplad till en sida optimeras; stilar som endast behöver användas på en sida behöver till exempel inte inkluderas i huvudstilbladet.
**DOM-traverseringar**: Webbläsaren måste bygga sin Document Object Model baserat på koden du skriver, så det är i intresset av god sidprestanda att hålla dina taggar minimala, endast använda och styla det som sidan behöver. I detta avseende kan överflödig CSS som är associerad med en sida optimeras; stilar som bara behöver användas på en sida behöver till exempel inte inkluderas i huvudstilbladet.
**JavaScript**: Varje JavaScript-utvecklare bör hålla utkik efter 'render-blockerande' skript som måste laddas innan resten av DOM kan traverseras och målas till webbläsaren. Överväg att använda `defer` med dina inline-skript (som görs i Terrarium-modulen).
✅ Testa några webbplatser på en [webbplatshastighetstest-webbplats](https://www.webpagetest.org/) för att lära dig mer om de vanliga kontroller som görs för att avgöra webbplatsens prestanda.
✅ Prova några webbplatser på en [Webbplatshastighetstest-webbplats](https://www.webpagetest.org/) för att lära dig mer om de vanliga kontroller som görs för att avgöra webbplatsens prestanda.
Nu när du har en idé om hur webbläsaren renderar de resurser du skickar till den, låt oss titta på de sista sakerna du behöver göra för att slutföra ditt tillägg:
### Skapa en funktion för att beräkna färg
Arbeta i `/src/index.js`, lägg till en funktion som heter `calculateColor()` efter serien av `const`-variabler du ställt in för att få åtkomst till DOM:
Arbeta i `/src/index.js`, lägg till en funktion som heter `calculateColor()` efter serien av `const`-variabler du ställde in för att få tillgång till DOM:
```JavaScript
function calculateColor(value) {
@ -90,13 +90,13 @@ function calculateColor(value) {
Vad händer här? Du skickar in ett värde (koldioxidintensiteten) från API-anropet du slutförde i förra lektionen, och sedan beräknar du hur nära dess värde är till indexet som presenteras i färgarrayen. Sedan skickar du det närmaste färgvärdet vidare till chrome runtime.
Chrome.runtime har [ett API](https://developer.chrome.com/extensions/runtime) som hanterar alla typer av bakgrundsuppgifter, och ditt tillägg utnyttjar detta:
Chrome.runtime har [ett API](https://developer.chrome.com/extensions/runtime) som hanterar alla typer av bakgrundsuppgifter, och ditt tillägg utnyttjar det:
> "Använd chrome.runtime API för att hämta bakgrundssidan, returnera detaljer om manifestet och lyssna på och svara på händelser i appens eller tilläggets livscykel. Du kan också använda detta API för att konvertera relativa URL-sökvägar till fullständiga URL-sökvägar."
> "Använd chrome.runtime API för att hämta bakgrundssidan, returnera detaljer om manifestet och lyssna på och svara på händelser i appens eller tilläggets livscykel. Du kan också använda detta API för att konvertera relativa sökvägar för URL:er till fullständiga URL:er."
✅ Om du utvecklar detta webbläsartillägg för Edge, kanske det förvånar dig att du använder ett chrome API. De nyare Edge-webbläsarversionerna körs på Chromium-webbläsarmotorn, så du kan utnyttja dessa verktyg.
> Observera, om du vill profilera ett webbläsartillägg, starta utvecklarverktygen från själva tillägget, eftersom det är en separat webbläsarinstans.
> Observera, om du vill profilera ett webbläsartillägg, starta utvecklarverktygen från själva tillägget, eftersom det är sin egen separata webbläsarinstans.
### Ställ in en standardfärg för ikonen
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Anropa funktionen, utför anropet
Nästa steg är att anropa den funktion du just skapade genom att lägga till den i löftet som returneras av C02Signal API:
@ -125,12 +124,12 @@ Och slutligen, i `/dist/background.js`, lägg till lyssnaren för dessa bakgrund
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,8 +140,7 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
I denna kod lägger du till en lyssnare för alla meddelanden som kommer till bakgrundsuppgiftshanteraren. Om det kallas 'updateIcon', körs nästa kod för att rita en ikon med rätt färg med hjälp av Canvas API.
I denna kod lägger du till en lyssnare för alla meddelanden som kommer till backend-uppgiftshanteraren. Om det kallas 'updateIcon', körs nästa kod för att rita en ikon med rätt färg med hjälp av Canvas API.
✅ Du kommer att lära dig mer om Canvas API i [Space Game-lektionerna](../../6-space-game/2-drawing-to-canvas/README.md).
@ -154,17 +152,17 @@ Grattis, du har byggt ett användbart webbläsartillägg och lärt dig mer om hu
## 🚀 Utmaning
Undersök några öppna källkod-webbplatser som har funnits länge, och baserat på deras GitHub-historik, se om du kan avgöra hur de har optimerats för prestanda genom åren, om alls. Vilken är den vanligaste smärtpunkten?
Undersök några öppna källkod-webbplatser som har funnits länge, och baserat på deras GitHub-historik, se om du kan avgöra hur de har optimerats över åren för prestanda, om alls. Vilken är den vanligaste smärtpunkten?
## Quiz efter föreläsningen
## Efterföreläsningsquiz
[Quiz efter föreläsningen](https://ff-quizzes.netlify.app/web/quiz/28)
Överväg att prenumerera på ett [prestandanyhetsbrev](https://perf.email/)
Undersök några av de sätt som webbläsare mäter webbprestanda genom att titta igenom prestandaflikarna i deras webbläsarverktyg. Hittar du några stora skillnader?
Undersök några av de sätt som webbläsare mäter webbprestanda genom att titta igenom prestandaflikarna i deras webbverktyg. Hittar du några stora skillnader?
## Uppgift
@ -173,4 +171,4 @@ Undersök några av de sätt som webbläsare mäter webbprestanda genom att titt
---
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
# Mradi wa Kiendelezi cha Kivinjari Sehemu ya 3: Jifunze Kuhusu Kazi za Nyuma na Utendaji
## Jaribio la Kabla ya Somo
## Maswali ya Awali ya Somo
[Jaribio la kabla ya somo](https://ff-quizzes.netlify.app/web/quiz/27)
[Maswali ya awali ya somo](https://ff-quizzes.netlify.app/web/quiz/27)
### Utangulizi
Katika masomo mawili yaliyopita ya moduli hii, ulijifunza jinsi ya kujenga fomu na eneo la kuonyesha data iliyopatikana kutoka kwa API. Hii ni njia ya kawaida sana ya kuunda uwepo wa mtandao. Pia ulijifunza jinsi ya kushughulikia upatikanaji wa data kwa njia isiyo ya moja kwa moja. Kiendelezi chako cha kivinjari karibu kimekamilika.
Katika masomo mawili yaliyopita ya moduli hii, ulijifunza jinsi ya kujenga fomu na eneo la kuonyesha data inayopatikana kutoka kwa API. Hii ni njia ya kawaida ya kuunda uwepo wa mtandao. Pia ulijifunza jinsi ya kushughulikia upatikanaji wa data kwa njia isiyo ya moja kwa moja. Kiendelezi chako cha kivinjari karibu kimekamilika.
Kinachobaki ni kusimamia baadhi ya kazi za nyuma, ikiwa ni pamoja na kusasisha rangi ya ikoni ya kiendelezi, kwa hivyo huu ni wakati mzuri wa kuzungumzia jinsi kivinjari kinavyosimamia aina hii ya kazi. Hebu tufikirie kuhusu kazi hizi za kivinjari katika muktadha wa utendaji wa mali zako za mtandao unapoziunda.
Kazi iliyobaki ni kusimamia baadhi ya kazi za nyuma, ikiwa ni pamoja na kuboresha rangi ya ikoni ya kiendelezi, kwa hivyo huu ni wakati mzuri wa kuzungumzia jinsi kivinjari kinavyosimamia aina hii ya kazi. Hebu tuzingatie kazi hizi za kivinjari katika muktadha wa utendaji wa mali zako za mtandao unapoendelea kuzitengeneza.
## Misingi ya Utendaji wa Mtandao
> "Utendaji wa tovuti unahusu mambo mawili: jinsi ukurasa unavyopakia haraka, na jinsi msimbo wake unavyokimbia haraka." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Mada ya jinsi ya kufanya tovuti zako ziwe za haraka sana kwenye aina zote za vifaa, kwa aina zote za watumiaji, katika hali zote, bila shaka ni pana. Hapa kuna mambo ya kuzingatia unapoanzisha mradi wa kawaida wa mtandao au kiendelezi cha kivinjari.
Mada ya jinsi ya kufanya tovuti zako ziwe za haraka sana kwenye aina zote za vifaa, kwa aina zote za watumiaji, katika hali zote, bila shaka ni pana. Hapa kuna mambo ya kuzingatia unapotengeneza mradi wa kawaida wa mtandao au kiendelezi cha kivinjari.
Jambo la kwanza unalohitaji kufanya ili kuhakikisha kuwa tovuti yako inafanya kazi kwa ufanisi ni kukusanya data kuhusu utendaji wake. Mahali pa kwanza pa kufanya hivyo ni katika zana za msanidi wa kivinjari chako cha wavuti. Katika Edge, unaweza kuchagua kitufe cha "Mipangilio na zaidi" (ikoni ya nukta tatu juu kulia ya kivinjari), kisha uende kwenye Zana Zaidi > Zana za Wasanidi na ufungue kichupo cha Utendaji. Unaweza pia kutumia njia za mkato za kibodi `Ctrl` + `Shift` + `I` kwenye Windows au `Option` + `Command` + `I` kwenye Mac kufungua zana za wasanidi.
Jambo la kwanza unalohitaji kufanya ili kuhakikisha tovuti yako inafanya kazi kwa ufanisi ni kukusanya data kuhusu utendaji wake. Mahali pa kwanza pa kufanya hivyo ni katika zana za msanidi programu za kivinjari chako cha mtandao. Katika Edge, unaweza kuchagua kitufe cha "Mipangilio na zaidi" (ikoni ya nukta tatu juu kulia ya kivinjari), kisha uende kwenye Zana Zaidi > Zana za Msanidi Programu na kufungua kichupo cha Utendaji. Unaweza pia kutumia njia za mkato za kibodi `Ctrl` + `Shift` + `I` kwenye Windows au `Option` + `Command` + `I` kwenye Mac kufungua zana za msanidi programu.
Kichupo cha Utendaji kina chombo cha Profaili. Fungua tovuti (jaribu, kwa mfano, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) na ubofye kitufe cha 'Rekodi', kisha upya tovuti. Acha kurekodi wakati wowote, na utaweza kuona taratibu zinazozalishwa kwa 'script', 'render', na 'paint' tovuti:
Kichupo cha Utendaji kina chombo cha Profaili. Fungua tovuti (jaribu, kwa mfano, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) na bonyeza kitufe cha 'Rekodi', kisha upya tovuti. Acha kurekodi wakati wowote, na utaweza kuona taratibu zinazozalishwa ili 'kuandika msimbo', 'kutoa', na 'kupaka rangi' tovuti:
✅ Tembelea [Nyaraka za Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) kuhusu jopo la Utendaji katika Edge.
✅ Tembelea [Nyaraka za Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) kuhusu paneli ya Utendaji katika Edge
> Kidokezo: ili kupata usomaji sahihi wa muda wa kuanza wa tovuti yako, futa akiba ya kivinjari chako.
> Kidokezo: ili kupata usomaji sahihi wa muda wa kuanza wa tovuti yako, futa akiba ya kivinjari chako
Chagua vipengele vya muda wa wasifu ili kukuza matukio yanayotokea wakati ukurasa wako unapopakia.
Chagua vipengele vya muda wa profaili ili kukuza matukio yanayotokea wakati ukurasa wako unapakia.
Pata muhtasari wa utendaji wa ukurasa wako kwa kuchagua sehemu ya muda wa wasifu na kuangalia jopo la muhtasari:
Pata muhtasari wa utendaji wa ukurasa wako kwa kuchagua sehemu ya muda wa profaili na kuangalia paneli ya muhtasari:
✅ Fahamu zaidi kuhusu profaili yako! Fungua zana za wasanidi kwenye tovuti hii na uone kama kuna vizuizi vyovyote. Ni mali gani inayopakia polepole zaidi? Haraka zaidi?
✅ Jifunze kuhusu profaili yako! Fungua zana za msanidi programu kwenye tovuti hii na uone kama kuna vikwazo vyovyote. Ni mali gani inayopakia polepole zaidi? Na ipi inayopakia haraka zaidi?
## Ukaguzi wa Profaili
Kwa ujumla, kuna baadhi ya "maeneo ya tatizo" ambayo kila msanidi wa wavuti anapaswa kuangalia anapojenga tovuti ili kuepuka mshangao mbaya wakati wa kupeleka kwenye uzalishaji.
Kwa ujumla, kuna maeneo ya "tatizo" ambayo kila msanidi programu wa mtandao anapaswa kuangalia anapojenga tovuti ili kuepuka mshangao mbaya wakati wa kupeleka kwenye uzalishaji.
**Ukubwa wa mali**: Mtandao umekuwa 'mzito', na hivyo polepole, katika miaka michache iliyopita. Baadhi ya uzito huu unahusiana na matumizi ya picha.
**Ukubwa wa mali**: Mtandao umekuwa "mzito", na hivyo polepole, katika miaka ya hivi karibuni. Baadhi ya uzito huu unahusiana na matumizi ya picha.
✅ Angalia kupitia [Internet Archive](https://httparchive.org/reports/page-weight) kwa mtazamo wa kihistoria wa uzito wa ukurasa na zaidi.
✅ Tazama kupitia [Arki za Mtandao](https://httparchive.org/reports/page-weight) kwa mtazamo wa kihistoria wa uzito wa ukurasa na zaidi.
Mazoezi mazuri ni kuhakikisha kuwa picha zako zimeboreshwa na kutolewa kwa ukubwa na azimio sahihi kwa watumiaji wako.
Mazoea mazuri ni kuhakikisha kuwa picha zako zimeboreshwa na zinatolewa kwa ukubwa na azimio sahihi kwa watumiaji wako.
**Upitiaji wa DOM**: Kivinjari kinapaswa kujenga Mfano wa Kitu cha Hati (DOM) kulingana na msimbo unaoandika, kwa hivyo ni kwa maslahi ya utendaji mzuri wa ukurasa kuweka lebo zako kuwa ndogo, ukitumia na kuunda tu kile ambacho ukurasa unahitaji. Kwa hatua hii, CSS ya ziada inayohusishwa na ukurasa inaweza kuboreshwa; mitindo inayohitajika kutumika tu kwenye ukurasa mmoja haihitaji kujumuishwa kwenye karatasi kuu ya mitindo, kwa mfano.
**Uchunguzi wa DOM**: Kivinjari kinapaswa kujenga Mfano wa Kitu cha Nyaraka kulingana na msimbo unaoandika, kwa hivyo ni kwa maslahi ya utendaji mzuri wa ukurasa kuweka lebo zako kuwa ndogo, ukitumia na kuunda tu kile ambacho ukurasa unahitaji. Kwa hatua hii, CSS ya ziada inayohusishwa na ukurasa inaweza kuboreshwa; mitindo inayohitajika kutumika tu kwenye ukurasa mmoja haitakiwi kujumuishwa kwenye karatasi kuu ya mitindo, kwa mfano.
**JavaScript**: Kila msanidi wa JavaScript anapaswa kuangalia 'scripts zinazozuia uchoraji' ambazo lazima zipakuliwe kabla ya DOM nyingine kupitiwa na kuchorwa kwenye kivinjari. Fikiria kutumia `defer` na maandishi yako ya ndani (kama inavyofanyika katika moduli ya Terrarium).
**JavaScript**: Kila msanidi programu wa JavaScript anapaswa kuangalia 'msimbo unaozuia utoaji' ambao lazima upakuliwe kabla ya DOM nyingine kutazamwa na kupakwa rangi kwenye kivinjari. Fikiria kutumia `defer` na misimbo yako ya ndani (kama inavyofanyika katika moduli ya Terrarium).
✅ Jaribu baadhi ya tovuti kwenye [Tovuti ya Mtihani wa Kasi ya Tovuti](https://www.webpagetest.org/) ili kujifunza zaidi kuhusu ukaguzi wa kawaida unaofanywa ili kubaini utendaji wa tovuti.
✅ Jaribu tovuti kadhaa kwenye [Tovuti ya Mtihani wa Kasi ya Tovuti](https://www.webpagetest.org/) ili kujifunza zaidi kuhusu ukaguzi wa kawaida unaofanywa ili kubaini utendaji wa tovuti.
Sasa kwa kuwa una wazo la jinsi kivinjari kinavyotoa mali unazotuma kwake, hebu tuangalie mambo machache ya mwisho unayohitaji kufanya ili kukamilisha kiendelezi chako:
### Unda kazi ya kuhesabu rangi
Ukifanya kazi katika `/src/index.js`, ongeza kazi inayoitwa `calculateColor()` baada ya mfululizo wa `const` ulioweka ili kupata ufikiaji wa DOM:
Ukifanya kazi katika `/src/index.js`, ongeza kazi inayoitwa `calculateColor()` baada ya mfululizo wa vigezo vya `const` ulivyoweka ili kupata ufikiaji wa DOM:
```JavaScript
function calculateColor(value) {
@ -88,15 +88,15 @@ function calculateColor(value) {
}
```
Nini kinaendelea hapa? Unapokea thamani (ukali wa kaboni) kutoka kwa API uliyokamilisha katika somo lililopita, kisha unahesabu jinsi thamani yake ilivyo karibu na faharasa iliyowasilishwa kwenye safu ya rangi. Kisha unatuma thamani ya rangi iliyo karibu zaidi kwa muda wa chrome.
Nini kinaendelea hapa? Unapitisha thamani (ukali wa kaboni) kutoka kwa API uliyokamilisha katika somo la mwisho, kisha unahesabu jinsi thamani yake ilivyo karibu na faharasa iliyowasilishwa katika safu ya rangi. Kisha unapeleka thamani ya rangi iliyo karibu zaidi kwa chrome runtime.
Chrome.runtime ina [API](https://developer.chrome.com/extensions/runtime) inayoshughulikia aina zote za kazi za nyuma, na kiendelezi chako kinatumia hiyo:
Chrome.runtime ina [API](https://developer.chrome.com/extensions/runtime) inayoshughulikia aina zote za kazi za nyuma, na kiendelezi chako kinaitumia:
> "Tumia API ya chrome.runtime kupata ukurasa wa nyuma, rudisha maelezo kuhusu manifest, na usikilize na kujibu matukio katika mzunguko wa maisha wa programu au kiendelezi. Unaweza pia kutumia API hii kubadilisha njia za URL za jamaa kuwa URL zilizo na sifa kamili."
> "Tumia API ya chrome.runtime kupata ukurasa wa nyuma, kurudisha maelezo kuhusu manifest, na kusikiliza na kujibu matukio katika mzunguko wa maisha wa programu au kiendelezi. Unaweza pia kutumia API hii kubadilisha njia ya URL za jamaa kuwa URL zilizo na sifa kamili."
✅ Ikiwa unakua kiendelezi hiki cha kivinjari kwa Edge, inaweza kukushangaza kuwa unatumia API ya chrome. Matoleo mapya ya kivinjari cha Edge yanaendesha injini ya kivinjari ya Chromium, kwa hivyo unaweza kutumia zana hizi.
✅ Ikiwa unatengeneza kiendelezi hiki cha kivinjari kwa Edge, inaweza kushangaza kwamba unatumia API ya chrome. Matoleo mapya ya kivinjari cha Edge yanaendesha injini ya kivinjari ya Chromium, kwa hivyo unaweza kutumia zana hizi.
> Kumbuka, ikiwa unataka kupima kiendelezi cha kivinjari, zindua zana za wasanidi kutoka ndani ya kiendelezi chenyewe, kwani ni kivinjari chake tofauti.
> Kumbuka, ikiwa unataka kuprofaili kiendelezi cha kivinjari, fungua zana za msanidi programu kutoka ndani ya kiendelezi chenyewe, kwani ni kivinjari chake tofauti.
### Weka rangi ya ikoni ya msingi
@ -110,8 +110,7 @@ chrome.runtime.sendMessage({
},
});
```
### Ita kazi, tekeleza mwito
### Ita kazi, tekeleza wito
Kisha, ita kazi hiyo uliyounda kwa kuiongeza kwenye ahadi inayorejeshwa na API ya C02Signal:
@ -120,17 +119,17 @@ Kisha, ita kazi hiyo uliyounda kwa kuiongeza kwenye ahadi inayorejeshwa na API y
calculateColor(CO2);
```
Na hatimaye, katika `/dist/background.js`, ongeza msikilizaji wa simu hizi za hatua za nyuma:
Na hatimaye, katika `/dist/background.js`, ongeza msikilizaji wa miito hii ya hatua za nyuma:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -141,36 +140,35 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
Katika msimbo huu, unaongeza msikilizaji wa ujumbe wowote unaokuja kwa msimamizi wa kazi za nyuma. Ikiwa unaitwa 'updateIcon', basi msimbo unaofuata unatekelezwa kuchora ikoni ya rangi sahihi kwa kutumia API ya Canvas.
Katika msimbo huu, unaongeza msikilizaji wa ujumbe wowote unaokuja kwa msimamizi wa kazi za nyuma. Ikiwa inaitwa 'updateIcon', basi msimbo unaofuata unakimbia kuchora ikoni ya rangi sahihi kwa kutumia Canvas API.
✅ Utajifunza zaidi kuhusu Canvas API katika [masomo ya Mchezo wa Anga](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Utajifunza zaidi kuhusu API ya Canvas katika [masomo ya Mchezo wa Anga](../../6-space-game/2-drawing-to-canvas/README.md).
Sasa, jenga upya kiendelezi chako (`npm run build`), upya na uzindue kiendelezi chako, na uangalie rangi ikibadilika. Je, ni wakati mzuri wa kwenda kufanya shughuli au kuosha vyombo? Sasa unajua!
Sasa, jenga upya kiendelezi chako (`npm run build`), upya na uzindue kiendelezi chako, na uangalie rangi ikibadilika. Je, ni wakati mzuri wa kufanya shughuli au kuosha vyombo? Sasa unajua!
Hongera, umejenga kiendelezi cha kivinjari chenye manufaa na kujifunza zaidi kuhusu jinsi kivinjari kinavyofanya kazi na jinsi ya kupima utendaji wake.
Hongera, umejenga kiendelezi cha kivinjari chenye manufaa na umejifunza zaidi kuhusu jinsi kivinjari kinavyofanya kazi na jinsi ya kuprofaili utendaji wake.
---
## 🚀 Changamoto
Chunguza baadhi ya tovuti za chanzo huria ambazo zimekuwepo kwa muda mrefu, na, kulingana na historia yao ya GitHub, angalia ikiwa unaweza kubaini jinsi zilivyoboreshwa kwa miaka kwa utendaji, ikiwa zilibadilishwa kabisa. Ni sehemu gani ya maumivu ya kawaida?
Chunguza baadhi ya tovuti za chanzo huria ambazo zimekuwepo kwa muda mrefu, na, kulingana na historia yao ya GitHub, angalia kama unaweza kubaini jinsi zilivyoboreshwa kwa miaka kwa utendaji, ikiwa ziliboreshwa. Ni tatizo gani la kawaida zaidi?
## Jaribio la Baada ya Somo
## Maswali ya Baada ya Somo
[Jaribio la baada ya somo](https://ff-quizzes.netlify.app/web/quiz/28)
[Maswali ya baada ya somo](https://ff-quizzes.netlify.app/web/quiz/28)
## Mapitio na Kujisomea
Fikiria kujisajili kwa [jarida la utendaji](https://perf.email/)
Chunguza baadhi ya njia ambazo vivinjari hupima utendaji wa wavuti kwa kuangalia kupitia vichupo vya utendaji katika zana zao za wavuti. Je, unapata tofauti kubwa yoyote?
Chunguza baadhi ya njia ambazo vivinjari hupima utendaji wa mtandao kwa kuangalia kupitia vichupo vya utendaji katika zana zao za mtandao. Je, unapata tofauti kubwa yoyote?
## Kazi
[Changanua tovuti kwa utendaji](assignment.md)
[Chambua tovuti kwa utendaji](assignment.md)
---
**Kanusho**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
ในสองบทเรียนที่ผ่านมา คุณได้เรียนรู้วิธีสร้างฟอร์มและพื้นที่แสดงข้อมูลที่ดึงมาจาก API ซึ่งเป็นวิธีมาตรฐานในการสร้างเว็บไซต์บนเว็บ คุณยังได้เรียนรู้วิธีจัดการกับการดึงข้อมูลแบบอะซิงโครนัสอีกด้วยตอนนี้ส่วนขยายเบราว์เซอร์ของคุณเกือบจะเสร็จสมบูรณ์แล้ว
ในสองบทเรียนที่ผ่านมาในโมดูลนี้ คุณได้เรียนรู้วิธีสร้างฟอร์มและพื้นที่แสดงผลสำหรับข้อมูลที่ดึงมาจาก API ซึ่งเป็นวิธีมาตรฐานในการสร้างเว็บไซต์บนเว็บ คุณยังได้เรียนรู้วิธีจัดการการดึงข้อมูลแบบอะซิงโครนัส ส่วนขยายเบราว์เซอร์ของคุณเกือบจะเสร็จสมบูรณ์แล้ว
# Proyek Browser Extension Part 3: Alamin ang Tungkol sa Background Tasks at Performance
# Browser Extension Project Part 3: Alamin ang Tungkol sa Background Tasks at Performance
## Pre-Lecture Quiz
@ -15,9 +15,9 @@ CO_OP_TRANSLATOR_METADATA:
### Panimula
Sa huling dalawang aralin ng module na ito, natutunan mo kung paano gumawa ng form at display area para sa data na kinukuha mula sa isang API. Ito ay isang karaniwang paraan ng paglikha ng presensya sa web. Natutunan mo rin kung paano mag-handle ng asynchronous na pagkuha ng data. Malapit nang matapos ang iyong browser extension.
Sa huling dalawang aralin ng module na ito, natutunan mo kung paano gumawa ng form at display area para sa data na kinukuha mula sa isang API. Ito ay isang karaniwang paraan ng paglikha ng presensya sa web. Natutunan mo rin kung paano mag-handle ng asynchronous na pagkuha ng data. Halos tapos na ang iyong browser extension.
Ang natitira ay ang pamamahala ng ilang background tasks, kabilang ang pag-refresh ng kulay ng icon ng extension, kaya magandang pagkakataon ito para pag-usapan kung paano pinamamahalaan ng browser ang ganitong uri ng gawain. Isipin natin ang mga browser tasks na ito sa konteksto ng performance ng iyong web assets habang ginagawa mo ang mga ito.
Ang natitira na lang ay ang pamamahala ng ilang background tasks, kabilang ang pag-refresh ng kulay ng icon ng extension, kaya magandang pagkakataon ito para pag-usapan kung paano pinamamahalaan ng browser ang ganitong uri ng gawain. Isipin natin ang mga browser tasks na ito sa konteksto ng performance ng iyong web assets habang ginagawa mo ang mga ito.
## Mga Pangunahing Kaalaman sa Web Performance
@ -31,13 +31,13 @@ Ang Performance tab ay naglalaman ng Profiling tool. Buksan ang isang website (s
✅ Bisitahin ang [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tungkol sa Performance panel sa Edge
✅ Bisitahin ang [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sa Performance panel sa Edge
> Tip: upang makakuha ng tumpak na pagbasa ng oras ng pagsisimula ng iyong website, i-clear ang cache ng iyong browser
> Tip: upang makakuha ng tumpak na pagbasa ng startup time ng iyong website, i-clear ang cache ng iyong browser
Piliin ang mga elemento ng profile timeline upang mag-zoom in sa mga event na nangyayari habang naglo-load ang iyong pahina.
Kumuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane:
Makakuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane:
✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung may mga bottleneck. Ano ang asset na pinakamabagal mag-load? Ang pinakamabilis?
✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung may mga bottleneck. Ano ang pinakamabagal na asset na naglo-load? Ang pinakamabilis?
## Mga Profiling Checks
@ -53,21 +53,21 @@ Sa pangkalahatan, may ilang "problem areas" na dapat bantayan ng bawat web devel
**Asset sizes**: Ang web ay naging 'mas mabigat', at sa gayon ay mas mabagal, sa nakalipas na ilang taon. Ang ilan sa bigat na ito ay may kinalaman sa paggamit ng mga imahe.
✅ Tingnan ang [Internet Archive](https://httparchive.org/reports/page-weight) para sa isang historical view ng page weight at iba pa.
✅ Tingnan ang [Internet Archive](https://httparchive.org/reports/page-weight) para sa isang historical na pananaw sa page weight at iba pa.
Isang magandang kasanayan ang tiyakin na ang iyong mga imahe ay na-optimize at naihatid sa tamang laki at resolution para sa iyong mga user.
Isang magandang kasanayan ang tiyakin na ang iyong mga imahe ay na-optimize at naihatid sa tamang laki at resolusyon para sa iyong mga user.
**DOM traversals**: Kailangang buuin ng browser ang Document Object Model nito batay sa code na isinulat mo, kaya't para sa magandang performance ng pahina, panatilihing minimal ang iyong mga tag, gamit at inaayos lamang ang kailangan ng pahina. Sa puntong ito, ang sobrang CSS na nauugnay sa isang pahina ay maaaring ma-optimize; ang mga style na kailangang gamitin lamang sa isang pahina ay hindi kailangang isama sa pangunahing style sheet, halimbawa.
**DOM traversals**: Kailangang buuin ng browser ang Document Object Model nito batay sa code na isinulat mo, kaya't nasa interes ng magandang page performance na panatilihing minimal ang iyong mga tag, gamit lamang at inaayos ang kailangan ng pahina. Sa puntong ito, ang sobrang CSS na nauugnay sa isang pahina ay maaaring ma-optimize; ang mga style na kailangang gamitin lamang sa isang pahina ay hindi kailangang isama sa pangunahing style sheet, halimbawa.
**JavaScript**: Ang bawat JavaScript developer ay dapat magbantay para sa 'render-blocking' scripts na kailangang i-load bago ma-traverse at ma-paint ang natitirang bahagi ng DOM sa browser. Isaalang-alang ang paggamit ng `defer` sa iyong inline scripts (tulad ng ginawa sa Terrarium module).
**JavaScript**: Ang bawat JavaScript developer ay dapat magbantay para sa 'render-blocking' scripts na kailangang i-load bago ma-traverse at ma-paint ang natitirang bahagi ng DOM sa browser. Isaalang-alang ang paggamit ng `defer` sa iyong inline scripts (gaya ng ginawa sa Terrarium module).
✅ Subukan ang ilang mga site sa isang [Site Speed Test website](https://www.webpagetest.org/) upang matuto nang higit pa tungkol sa mga karaniwang checks na ginagawa upang matukoy ang performance ng site.
✅ Subukan ang ilang site sa isang [Site Speed Test website](https://www.webpagetest.org/) upang matuto nang higit pa tungkol sa mga karaniwang checks na ginagawa upang matukoy ang performance ng site.
Ngayon na mayroon kang ideya kung paano nire-render ng browser ang mga assets na ipinapadala mo dito, tingnan natin ang huling ilang bagay na kailangan mong gawin upang makumpleto ang iyong extension:
Ngayon na mayroon kang ideya kung paano nire-render ng browser ang mga asset na ipinapadala mo dito, tingnan natin ang huling ilang bagay na kailangan mong gawin upang makumpleto ang iyong extension:
### Gumawa ng Function para Kalkulahin ang Kulay
### Gumawa ng function para mag-calculate ng kulay
Sa `/src/index.js`, magdagdag ng function na tinatawag na `calculateColor()` pagkatapos ng serye ng `const` variables na itinakda mo upang makakuha ng access sa DOM:
Sa `/src/index.js`, magdagdag ng function na tinatawag na `calculateColor()` pagkatapos ng serye ng mga `const` variables na itinakda mo upang makakuha ng access sa DOM:
```JavaScript
function calculateColor(value) {
@ -88,17 +88,17 @@ function calculateColor(value) {
}
```
Ano ang nangyayari dito? Nagpapasa ka ng isang value (ang carbon intensity) mula sa API call na natapos mo sa huling aralin, at pagkatapos ay kinakalkula mo kung gaano kalapit ang value nito sa index na ipinakita sa colors array. Pagkatapos ay ipinapadala mo ang pinakamalapit na color value sa chrome runtime.
Ano ang nangyayari dito? Ipinapasa mo ang isang value (ang carbon intensity) mula sa API call na natapos mo sa huling aralin, at pagkatapos ay kinakalkula mo kung gaano kalapit ang value nito sa index na ipinakita sa colors array. Pagkatapos ay ipinapadala mo ang pinakamalapit na color value sa chrome runtime.
Ang chrome.runtime ay may [API](https://developer.chrome.com/extensions/runtime) na humahawak sa lahat ng uri ng background tasks, at ginagamit ng iyong extension ang mga ito:
Ang chrome.runtime ay may [API](https://developer.chrome.com/extensions/runtime) na humahawak sa lahat ng uri ng background tasks, at ang iyong extension ay ginagamit ito:
> "Gamitin ang chrome.runtime API upang kunin ang background page, magbalik ng mga detalye tungkol sa manifest, at makinig at tumugon sa mga event sa lifecycle ng app o extension. Maaari mo ring gamitin ang API na ito upang i-convert ang relative path ng URLs sa fully-qualified URLs."
> "Gamitin ang chrome.runtime API upang kunin ang background page, magbalik ng mga detalye tungkol sa manifest, at makinig at tumugon sa mga event sa lifecycle ng app o extension. Maaari mo ring gamitin ang API na ito upang i-convert ang relative path ng mga URL sa fully-qualified URLs."
✅ Kung dine-develop mo ang browser extension na ito para sa Edge, maaaring magulat ka na gumagamit ka ng chrome API. Ang mga mas bagong bersyon ng Edge browser ay tumatakbo sa Chromium browser engine, kaya maaari mong gamitin ang mga tool na ito.
✅ Kung ginagawa mo ang browser extension na ito para sa Edge, maaaring magulat ka na gumagamit ka ng chrome API. Ang mga mas bagong bersyon ng Edge browser ay tumatakbo sa Chromium browser engine, kaya maaari mong gamitin ang mga tool na ito.
> Tandaan, kung nais mong i-profile ang isang browser extension, ilunsad ang dev tools mula sa loob ng extension mismo, dahil ito ay sarili nitong hiwalay na browser instance.
### Mag-set ng Default Icon Color
### Mag-set ng default na kulay ng icon
Ngayon, sa `init()` function, itakda ang icon na maging generic green sa simula sa pamamagitan ng muling pagtawag sa chrome's `updateIcon` action:
@ -110,8 +110,7 @@ chrome.runtime.sendMessage({
},
});
```
### Tawagin ang Function, I-execute ang Call
### Tawagin ang function, i-execute ang call
Susunod, tawagin ang function na ginawa mo sa pamamagitan ng pagdaragdag nito sa promise na ibinalik ng C02Signal API:
@ -125,12 +124,12 @@ At sa wakas, sa `/dist/background.js`, magdagdag ng listener para sa mga backgro
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -148,7 +147,7 @@ Sa code na ito, nagdaragdag ka ng listener para sa anumang mga mensahe na papunt
Ngayon, i-rebuild ang iyong extension (`npm run build`), i-refresh at ilunsad ang iyong extension, at panoorin ang pagbabago ng kulay. Panahon na ba para mag-ayos o maghugas ng pinggan? Ngayon alam mo na!
Binabati kita, nakagawa ka ng isang kapaki-pakinabang na browser extension at natutunan mo pa ang tungkol sa kung paano gumagana ang browser at kung paano i-profile ang performance nito.
Binabati kita, nakagawa ka ng isang kapaki-pakinabang na browser extension at natutunan ang higit pa tungkol sa kung paano gumagana ang browser at kung paano i-profile ang performance nito.
---
@ -160,17 +159,17 @@ Suriin ang ilang open source websites na matagal nang umiiral, at, batay sa kani
Isaalang-alang ang pag-subscribe sa isang [performance newsletter](https://perf.email/)
Suriin ang ilan sa mga paraan kung paano sinusukat ng mga browser ang web performance sa pamamagitan ng pagtingin sa performance tabs sa kanilang web tools. May nakita ka bang malalaking pagkakaiba?
## Takdang-Aralin
## Assignment
[Surihin ang isang site para sa performance](assignment.md)
[Analyze a site for performance](assignment.md)
---
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
@ -23,11 +23,11 @@ Geriye, uzantının simgesinin rengini yenilemek gibi bazı arka plan görevleri
> "Web sitesi performansı iki şeyle ilgilidir: sayfanın ne kadar hızlı yüklendiği ve üzerindeki kodun ne kadar hızlı çalıştığı." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Web sitelerinizi her tür cihazda, her tür kullanıcı için ve her tür durumda son derece hızlı hale getirme konusu, tahmin edilebileceği gibi oldukça geniştir. İşte standart bir web projesi veya bir tarayıcı uzantısı oluştururken akılda tutulması gereken bazı noktalar.
Web sitelerinizi her tür cihazda, her tür kullanıcı için ve her tür durumda son derece hızlı hale getirmenin yolları oldukça geniş bir konudur. İşte standart bir web projesi veya bir tarayıcı uzantısı oluştururken akılda tutulması gereken bazı noktalar.
Web sitenizin verimli çalıştığından emin olmak için yapmanız gereken ilk şey, performansı hakkında veri toplamaktır. Bunun için ilk yer, web tarayıcınızın geliştirici araçlarıdır. Edge'de, "Ayarlar ve daha fazlası" düğmesini (tarayıcının sağ üst köşesindeki üç nokta simgesi) seçebilir, ardından Daha Fazla Araç > Geliştirici Araçları'na giderek Performans sekmesini açabilirsiniz. Geliştirici araçlarını açmak için Windows'ta `Ctrl` + `Shift` + `I` veya Mac'te `Option` + `Command` + `I` klavye kısayollarınıda kullanabilirsiniz.
Web sitenizin verimli çalıştığından emin olmak için yapmanız gereken ilk şey, performansı hakkında veri toplamaktır. Bunun için ilk yer, web tarayıcınızın geliştirici araçlarıdır. Edge'de, tarayıcının sağ üst köşesindeki "Ayarlar ve daha fazlası" düğmesini (üç nokta simgesi) seçebilir, ardından Daha Fazla Araç > Geliştirici Araçları'na giderek Performans sekmesini açabilirsiniz. Ayrıca Windows'da `Ctrl` + `Shift` + `I` veya Mac'te `Option` + `Command` + `I` klavye kısayollarını kullanarak geliştirici araçlarını açabilirsiniz.
Performans sekmesi bir Profil oluşturma aracı içerir. Bir web sitesini açın (örneğin [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ve 'Kaydet' düğmesine tıklayın, ardından siteyi yenileyin. Kaydı istediğiniz zaman durdurun ve sitenin 'script', 'render' ve 'paint' rutinlerini görebileceksiniz:
Performans sekmesi bir Profil oluşturma aracı içerir. Bir web sitesini açın (örneğin, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ve 'Kaydet' düğmesine tıklayın, ardından siteyi yenileyin. Kaydı istediğiniz zaman durdurun ve sitenin 'script', 'render' ve 'paint' rutinlerini görebilirsiniz:
✅ Profil oluşturma aracınızı tanıyın! Bu sitede geliştirici araçlarını açın ve herhangi bir darboğaz olup olmadığını kontrol edin. En yavaş yüklenen varlık hangisi? En hızlı olan hangisi?
✅ Profil oluşturucuyu tanıyın! Bu sitede geliştirici araçlarını açın ve herhangi bir darboğaz olup olmadığını kontrol edin. En yavaş yüklenen varlık hangisi? En hızlısı hangisi?
## Profil Oluşturma Kontrolleri
## Profil Kontrolleri
Genel olarak, her web geliştiricisinin bir site oluştururken dikkat etmesi gereken bazı "sorun alanları" vardır. Bu, üretime geçme zamanı geldiğinde hoş olmayan sürprizlerden kaçınmak içindir.
Genel olarak, bir web geliştiricisinin bir site oluştururken üretime geçme zamanı geldiğinde hoş olmayan sürprizlerden kaçınmak içindikkat etmesi gereken bazı "sorun alanları" vardır.
**Varlık boyutları**: Web son birkaç yılda 'ağırlaştı' ve dolayısıyla yavaşladı. Bu ağırlığın bir kısmı görüntülerin kullanımından kaynaklanıyor.
✅ Sayfa ağırlığı ve daha fazlası hakkında tarihsel bir görünüm için [Internet Archive](https://httparchive.org/reports/page-weight) sayfasına göz atın.
Görüntülerinizin optimize edildiğinden ve kullanıcılarınız için doğru boyut ve çözünürlükte sunulduğundan emin olmak iyi bir uygulamadır.
Görüntülerinizin optimize edildiğinden ve kullanıcılarınıza doğru boyut ve çözünürlükte sunulduğundan emin olmak iyi bir uygulamadır.
**DOM geçişleri**: Tarayıcı, yazdığınız koda dayanarak Belge Nesne Modelini (DOM) oluşturmak zorundadır, bu nedenle iyi sayfa performansı için etiketlerinizi minimumda tutmak, yalnızca sayfanın ihtiyaç duyduğu şeyleri kullanmak ve stil vermek önemlidir. Bu noktada, bir sayfayla ilişkili fazla CSS optimize edilebilir; yalnızca bir sayfada kullanılması gereken stiller, örneğin ana stil sayfasına dahil edilmemelidir.
**DOM geçişleri**: Tarayıcı, yazdığınız koda dayanarak Belge Nesne Modelini (DOM) oluşturmak zorundadır, bu nedenle iyi sayfa performansı için etiketlerinizi minimumda tutmak, yalnızca sayfanın ihtiyaç duyduğu şeyleri kullanmak ve stil vermek önemlidir. Bu noktada, bir sayfayla ilişkilendirilen fazla CSS optimize edilebilir; yalnızca bir sayfada kullanılacak stiller, örneğin ana stil sayfasına dahil edilmemelidir.
**JavaScript**: Her JavaScript geliştiricisi, DOM'un geri kalanının taranıp tarayıcıya boyanmasından önce yüklenmesi gereken 'render-blocking' (işlem engelleyici) komut dosyalarına dikkat etmelidir. Inline komut dosyalarınızla`defer` kullanmayı düşünün (Terrarium modülünde olduğu gibi).
**JavaScript**: Her JavaScript geliştiricisi, DOM'un geri kalanının taranıp tarayıcıya boyanmasından önce yüklenmesi gereken 'render-blocking' (render engelleyici) betiklere dikkat etmelidir. Inline betiklerinizle`defer` kullanmayı düşünün (Terrarium modülünde olduğu gibi).
✅ Site performansını belirlemek için yapılan yaygın kontroller hakkında daha fazla bilgi edinmek için [Site Hız Testi web sitesi](https://www.webpagetest.org/) üzerinde bazı siteleri deneyin.
@ -67,7 +67,7 @@ Artık tarayıcının gönderdiğiniz varlıkları nasıl işlediği hakkında b
### Renk Hesaplama Fonksiyonu Oluşturun
`/src/index.js` dosyasında, DOM'a erişim sağlamak için ayarladığınız `const` değişkenler serisinin ardından`calculateColor()` adlı bir fonksiyon ekleyin:
`/src/index.js` dosyasında, DOM'a erişim sağlamak için ayarladığınız `const` değişkenler serisinden sonra`calculateColor()` adlı bir fonksiyon ekleyin:
```JavaScript
function calculateColor(value) {
@ -92,11 +92,11 @@ Burada neler oluyor? Bir önceki derste tamamladığınız API çağrısından b
Chrome.runtime, her türlü arka plan görevini yöneten [bir API](https://developer.chrome.com/extensions/runtime) içerir ve uzantınız bunu kullanıyor:
> "Chrome.runtime API'sini kullanarak arka plan sayfasını alın, manifest hakkında ayrıntıları döndürün ve uygulama veya uzantı yaşam döngüsündeki olayları dinleyin ve yanıt verin. Ayrıca bu API'yi URL'lerin göreceli yolunu tam nitelikli URL'lere dönüştürmek için kullanabilirsiniz."
> "Chrome.runtime API'sini kullanarak arka plan sayfasını alın, manifest hakkında ayrıntıları döndürün ve uygulama veya uzantı yaşam döngüsündeki olayları dinleyin ve yanıtlayın. Ayrıca bu API'yi URL'lerin göreceli yolunu tam nitelikli URL'lere dönüştürmek için kullanabilirsiniz."
✅ Bu tarayıcı uzantısını Edge için geliştiriyorsanız, bir chrome API'si kullandığınıza şaşırabilirsiniz. Yeni Edge tarayıcı sürümleri Chromium tarayıcı motorunda çalıştığı için bu araçlardan yararlanabilirsiniz.
✅ Bu tarayıcı uzantısını Edge için geliştiriyorsanız, bir chrome API'si kullandığınıza şaşırabilirsiniz. Edge'in daha yeni tarayıcı sürümleri Chromium tarayıcı motorunda çalışır, bu nedenle bu araçlardan yararlanabilirsiniz.
> Not: Bir tarayıcı uzantısının profilini oluşturmak istiyorsanız, uzantının kendisinden geliştirici araçlarını başlatın, çünkü bu kendi ayrı tarayıcı örneğidir.
> Not: Bir tarayıcı uzantısını profil oluşturmak istiyorsanız, uzantının kendisinden geliştirici araçlarını başlatın, çünkü bu kendi ayrı tarayıcı örneğidir.
### Varsayılan Simge Rengi Ayarlayın
@ -110,27 +110,26 @@ chrome.runtime.sendMessage({
},
});
```
### Fonksiyonu Çağırın, Çağrıyı Gerçekleştirin
Son olarak, oluşturduğunuz bu fonksiyonu C02Signal API'sinden döndürülen promise'e ekleyerek çağırın:
Son olarak, bir önceki derste tamamladığınız C02Signal API'sinden dönen promise'e bu yeni oluşturduğunuz fonksiyonu ekleyin:
```JavaScript
//let CO2...
calculateColor(CO2);
```
Ve son olarak, `/dist/background.js` dosyasında bu arka plan eylem çağrıları için dinleyiciyi ekleyin:
Ve son olarak, `/dist/background.js` dosyasında bu arka plan eylem çağrılarını dinlemek için bir dinleyici ekleyin:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,7 +141,7 @@ function drawIcon(value) {
}
```
Bu kodda, arka plan görev yöneticisine gelen herhangi bir mesaj için bir dinleyici ekliyorsunuz. Eğer 'updateIcon' olarak adlandırılmışsa, bir sonraki kod Canvas API'sini kullanarak uygun renkte bir simge çizmek için çalıştırılır.
Bu kodda, arka plan görev yöneticisine gelen herhangi bir mesaj için bir dinleyici ekliyorsunuz. Eğer mesaj 'updateIcon' olarak adlandırılmışsa, bir sonraki kod Canvas API'sini kullanarak uygun renkte bir simge çizmek için çalıştırılır.
✅ Canvas API hakkında daha fazla bilgi edinmek için [Uzay Oyunu dersleri](../../6-space-game/2-drawing-to-canvas/README.md) sayfasını ziyaret edin.
@ -152,7 +151,7 @@ Tebrikler, kullanışlı bir tarayıcı uzantısı oluşturdunuz ve tarayıcın
---
## 🚀 Zorluk
## 🚀 Meydan Okuma
Uzun zamandır var olan bazı açık kaynaklı web sitelerini araştırın ve GitHub geçmişlerine dayanarak, yıllar içinde performans için nasıl optimize edildiklerini (eğer optimize edildilerse) belirlemeye çalışın. En yaygın sorun noktası nedir?
@ -162,7 +161,7 @@ Uzun zamandır var olan bazı açık kaynaklı web sitelerini araştırın ve Gi
## Gözden Geçirme ve Kendi Kendine Çalışma
Bir [performans bültenine](https://perf.email/) kaydolmayı düşünün.
Bir [performans bültenine](https://perf.email/) abone olmayı düşünün.
Tarayıcıların web performansını nasıl ölçtüğüne dair bazı yolları araştırmak için web araçlarındaki performans sekmelerine göz atın. Önemli farklılıklar buluyor musunuz?
@ -173,4 +172,4 @@ Tarayıcıların web performansını nasıl ölçtüğüne dair bazı yolları a
---
**Feragatname**:
Bu belge, [Co-op Translator](https://github.com/Azure/co-op-translator) adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belgenin kendi dilindeki hali, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul edilmez.
У двох попередніх уроках цього модуля ви навчилися створювати форму та область відображення для даних, отриманих з API. Це дуже стандартний спосіб створення веб-присутності в інтернеті. Ви навіть навчилися обробляти асинхронне отримання даних. Ваше розширення для браузера майже готове.
У двох попередніх уроках цього модуля ви навчилися створювати форму та область відображення для даних, отриманих з API. Це дуже стандартний спосіб створення веб-присутності. Ви навіть навчилися асинхронно отримувати дані. Ваше розширення для браузера майже готове.
Залишилося впоратися з деякими фоновими завданнями, включаючи оновлення кольору іконки розширення, тому зараз чудовий час поговорити про те, як браузер управляє такими завданнями. Давайте розглянемо ці завдання в контексті продуктивності ваших веб-ресурсів під час їх створення.
Залишилося лише керувати деякими фоновими завданнями, включаючи оновлення кольору іконки розширення. Тож зараз чудовий час поговорити про те, як браузер управляє такими завданнями. Давайте розглянемо ці завдання в контексті продуктивності ваших веб-ресурсів під час їх створення.
## Основи веб-продуктивності
## Основи продуктивності веб-сайтів
> "Продуктивність вебсайту стосується двох речей: як швидко завантажується сторінка і як швидко виконується код на ній." -- [Зак Гроссбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Продуктивність веб-сайту стосується двох речей: як швидко завантажується сторінка і як швидко працює код на ній." -- [Зак Гроссбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Тема про те, як зробити ваші вебсайти надзвичайно швидкими на всіх типах пристроїв, для всіх типів користувачів і в усіх ситуаціях, є, як не дивно, дуже обширною. Ось кілька моментів, які варто враховувати під час створення стандартного вебпроєкту або розширення для браузера.
Тема про те, як зробити ваші веб-сайти надзвичайно швидкими на всіх типах пристроїв, для всіх типів користувачів і в будь-яких ситуаціях, є, як не дивно, дуже обширною. Ось кілька моментів, які варто враховувати під час створення стандартного веб-проєкту або розширення для браузера.
Перше, що вам потрібно зробити, щоб переконатися, що ваш сайт працює ефективно, — це зібрати дані про його продуктивність. Першим місцем для цього є інструменти розробника вашого веббраузера. У Edge ви можете вибрати кнопку "Налаштування та інше" (іконка з трьома крапками у верхньому правому куті браузера), потім перейти до "Додаткові інструменти" > "Інструменти розробника" і відкрити вкладку "Продуктивність". Ви також можете використовувати комбінації клавіш `Ctrl` + `Shift` + `I` на Windows або`Option` + `Command` + `I` на Mac, щоб відкрити інструменти розробника.
Перше, що потрібно зробити, щоб переконатися, що ваш сайт працює ефективно, — це зібрати дані про його продуктивність. Першим місцем для цього є інструменти розробника вашого веб-браузера. У Edge ви можете вибрати кнопку "Налаштування та інше" (іконка з трьома крапками у верхньому правому куті браузера), потім перейти до "Додаткові інструменти" > "Інструменти розробника" і відкрити вкладку "Продуктивність". Ви також можете використовувати комбінації клавіш `Ctrl` + `Shift` + `I` на Windows або`Option` + `Command` + `I` на Mac, щоб відкрити інструменти розробника.
Вкладка "Продуктивність" містить інструмент профілювання. Відкрийте вебсайт (спробуйте, наприклад, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) і натисніть кнопку "Запис", потім оновіть сайт. Зупиніть запис у будь-який момент, і ви зможете побачити процедури, які генеруються для "скрипту", "рендерингу" та "малювання" сайту:
Вкладка "Продуктивність" містить інструмент профілювання. Відкрийте веб-сайт (наприклад, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) і натисніть кнопку "Запис", потім оновіть сайт. Зупиніть запис у будь-який момент, і ви зможете побачити процедури, які генеруються для "скрипту", "рендерингу" та "малювання" сайту:
✅ Відвідайте [Документацію Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) про панель продуктивності в Edge.
✅ Відвідайте [документацію Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) про панель продуктивності в Edge.
> Порада: щоб отримати точні дані про час запуску вашого сайту, очистіть кеш браузера.
@ -49,19 +49,19 @@ CO_OP_TRANSLATOR_METADATA:
## Перевірки профілювання
Загалом, існують деякі "проблемні зони", які кожен веброзробник повинен враховувати під час створення сайту, щоб уникнути неприємних сюрпризів під час розгортання в продакшн.
Загалом, існують деякі "проблемні зони", які кожен веб-розробник повинен враховувати під час створення сайту, щоб уникнути неприємних сюрпризів під час розгортання в продакшн.
**Розміри ресурсів**: Веб став "важчим", а отже, повільнішим за останні кілька років. Частина цієї ваги пов'язана з використанням зображень.
**Розміри ресурсів**: За останні кілька років веб став "важчим", а отже, повільнішим. Частина цієї ваги пов'язана з використанням зображень.
✅ Перегляньте [Архів Інтернету](https://httparchive.org/reports/page-weight) для історичного огляду ваги сторінок та іншого.
Хорошою практикою є забезпечення оптимізації ваших зображень і їх доставки у правильному розмірі та роздільній здатності для ваших користувачів.
**Переміщення DOM**: Браузер має побудувати свою модель об'єктів документа (DOM) на основі коду, який ви пишете, тому в інтересах хорошої продуктивності сторінки слід мінімізувати теги, використовуючи та стилізуючи лише те, що потрібно сторінці. Наприклад, надлишковий CSS, пов'язаний зі сторінкою, може бути оптимізований; стилі, які потрібно використовувати лише на одній сторінці, не потрібно включати до основного стилю.
**Переміщення DOM**: Браузер має побудувати свою модель об'єктів документа (DOM) на основі коду, який ви пишете, тому в інтересах хорошої продуктивності сторінки слід мінімізувати теги, використовуючи та стилізуючи лише те, що потрібно сторінці. Наприклад, надлишкові CSS, пов'язані зі сторінкою, можна оптимізувати; стилі, які потрібно використовувати лише на одній сторінці, не потрібно включати в основний стильовий файл.
**JavaScript**: Кожен розробник JavaScript повинен стежити за скриптами, які блокують рендеринг і мають бути завантажені перед тим, як решта DOM може бути переміщена та намальована в браузері. Розгляньте можливість використання `defer` з вашими вбудованими скриптами (як це зроблено в модулі Terrarium).
**JavaScript**: Кожен розробник JavaScript повинен стежити за скриптами, які блокують рендеринг і мають бути завантажені перед тим, як решта DOM може бути оброблена та намальована в браузері. Розгляньте можливість використання `defer` з вашими вбудованими скриптами (як це зроблено в модулі Terrarium).
✅ Спробуйте деякі сайти на [вебсайті тестування швидкості сайту](https://www.webpagetest.org/), щоб дізнатися більше про загальні перевірки, які виконуються для визначення продуктивності сайту.
✅ Спробуйте деякі сайти на [веб-сайті тестування швидкості](https://www.webpagetest.org/), щоб дізнатися більше про загальні перевірки, які виконуються для визначення продуктивності сайту.
Тепер, коли ви маєте уявлення про те, як браузер рендерить ресурси, які ви йому надсилаєте, давайте розглянемо останні кілька речей, які потрібно зробити, щоб завершити ваше розширення:
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
Що тут відбувається? Ви передаєте значення (інтенсивність вуглецю) з виклику API, який ви завершили в попередньому уроці, а потім обчислюєте, наскільки близьке його значення до індексу, представленого в масиві кольорів. Потім ви надсилаєте це найближче значення кольору через chrome runtime.
Що тут відбувається? Ви передаєте значення (інтенсивність вуглецю) з API-запиту, який ви завершили в попередньому уроці, а потім обчислюєте, наскільки близьке його значення до індексу, представленого в масиві кольорів. Потім ви надсилаєте це найближче значення кольору до chrome runtime.
Chrome.runtime має [API](https://developer.chrome.com/extensions/runtime), який обробляє всі види фонових завдань, і ваше розширення використовує його:
chrome.runtime має [API](https://developer.chrome.com/extensions/runtime), який обробляє всі види фонових завдань, і ваше розширення використовує його:
> "Використовуйте API chrome.runtime, щоб отримати фонову сторінку, повернути деталі про маніфест і слухати та реагувати на події в життєвому циклі програми або розширення. Ви також можете використовувати цей API для перетворення відносного шляху URL-адрес на повністю кваліфіковані URL-адреси."
> "Використовуйте API chrome.runtime, щоб отримати доступ до фонової сторінки, повернути деталі про маніфест і слухати та реагувати на події в життєвому циклі програми або розширення. Ви також можете використовувати цей API для перетворення відносного шляху URL-адрес на повністю кваліфіковані URL-адреси."
✅ Якщо ви розробляєте це розширення для Edge, вас може здивувати, що ви використовуєте API Chrome. Новіші версії браузера Edge працюють на браузерному двигуні Chromium, тому ви можете використовувати ці інструменти.
✅ Якщо ви розробляєте це розширення для Edge, вас може здивувати, що ви використовуєте API chrome. Новіші версії браузера Edge працюють на браузерному двигуні Chromium, тому ви можете використовувати ці інструменти.
> Зверніть увагу, якщо ви хочете профілювати розширення для браузера, запустіть інструменти розробника з самого розширення, оскільки воно є окремим екземпляром браузера.
> Зверніть увагу, якщо ви хочете профілювати розширення для браузера, запустіть інструменти розробника з самого розширення, оскільки воно є окремим браузерним екземпляром.
### Встановіть колір іконки за замовчуванням
Тепер у функції `init()` встановіть іконку на стандартний зелений колір, викликавши дію `updateIcon` Chrome:
Тепер у функції `init()` встановіть іконку на стандартний зелений колір, знову викликавши дію `updateIcon` від chrome:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### Викличте функцію, виконайте виклик
Далі викличте функцію, яку ви щойно створили, додавши її до обіцянки, повернутої API C02Signal:
@ -120,17 +119,17 @@ chrome.runtime.sendMessage({
calculateColor(CO2);
```
І нарешті, у файлі `/dist/background.js` додайте слухач для цих викликів фонових завдань:
І нарешті, у файлі `/dist/background.js` додайте слухач для цих викликів фонових дій:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -142,7 +141,7 @@ function drawIcon(value) {
}
```
У цьому коді ви додаєте слухач для будь-яких повідомлень, які надходять до менеджера фонових завдань. Якщо його назва — 'updateIcon', тоді виконується наступний код для малювання іконки відповідного кольору за допомогою Canvas API.
У цьому коді ви додаєте слухач для будь-яких повідомлень, які надходять до менеджера фонових завдань. Якщо його названо 'updateIcon', тоді наступний код виконується для малювання іконки відповідного кольору за допомогою Canvas API.
✅ Ви дізнаєтеся більше про Canvas API в [уроках про космічну гру](../../6-space-game/2-drawing-to-canvas/README.md).
@ -154,7 +153,7 @@ function drawIcon(value) {
## 🚀 Виклик
Дослідіть деякі вебсайти з відкритим кодом, які існують вже давно, і, ґрунтуючись на їхній історії в GitHub, спробуйте визначити, як вони оптимізувалися протягом років для продуктивності, якщо взагалі оптимізувалися. Яка найпоширеніша проблема?
Дослідіть деякі веб-сайти з відкритим кодом, які існують вже давно, і, ґрунтуючись на їхній історії в GitHub, спробуйте визначити, як вони оптимізувалися протягом років для продуктивності, якщо взагалі оптимізувалися. Яка найпоширеніша проблема?
## Тест після лекції
@ -164,13 +163,13 @@ function drawIcon(value) {
Розгляньте можливість підписки на [розсилку про продуктивність](https://perf.email/).
Дослідіть деякі способи, якими браузери оцінюють продуктивність вебсайтів, переглянувши вкладки продуктивності в їхніх вебінструментах. Чи знайшли ви якісь суттєві відмінності?
Дослідіть деякі способи, якими браузери оцінюють продуктивність веб-сайтів, переглянувши вкладки продуктивності в їхніх веб-інструментах. Чи знайшли ви якісь суттєві відмінності?
## Завдання
[Проаналізуйте сайт на продуктивність](assignment.md)
[Аналізуйте сайт на продуктивність](assignment.md)
---
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
# براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور کارکردگی کے بارے میں جانیں
# براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور کارکردگی کے بارے میں سیکھیں
## لیکچر سے پہلے کا کوئز
@ -15,59 +15,59 @@ CO_OP_TRANSLATOR_METADATA:
### تعارف
اس ماڈیول کے پچھلے دو اسباق میں، آپ نے ایک فارم اور ڈیٹا کے لیے ڈسپلے ایریا بنانا سیکھا جو API سے حاصل کیا گیا تھا۔ یہ ویب پر موجودگی بنانے کا ایک بہت ہی معیاری طریقہ ہے۔ آپ نے ڈیٹا کو غیر متزامن طریقے سے حاصل کرنے کا انتظام کرنا بھی سیکھا۔ آپ کا براؤزر ایکسٹینشن تقریباً مکمل ہو چکا ہے۔
اس ماڈیول کے پچھلے دو اسباق میں، آپ نے ایک فارم اور ڈیٹا کے لیے ڈسپلے ایریا بنانے کا طریقہ سیکھا جو API سے حاصل کیا گیا تھا۔ یہ ویب پر موجودگی بنانے کا ایک بہت ہی معیاری طریقہ ہے۔ آپ نے یہاں تک سیکھا کہ ڈیٹا کو غیر متزامن طریقے سے کیسے حاصل کیا جائے۔ آپ کا براؤزر ایکسٹینشن تقریباً مکمل ہو چکا ہے۔
اب کچھ بیک گراؤنڈ ٹاسکس کو منظم کرنا باقی ہے، جن میں ایکسٹینشن کے آئیکن کا رنگ ریفریش کرنا شامل ہے، تو یہ ایک اچھا وقت ہے کہ براؤزر اس قسم کے کاموں کو کیسے منظم کرتا ہے۔ آئیے ان براؤزر ٹاسکس کے بارے میں سوچتے ہیں جو آپ کے ویب اثاثوں کی کارکردگی کے تناظر میں ہیں جب آپ انہیں بنا رہے ہیں۔
اب کچھ بیک گراؤنڈ ٹاسکس کو منظم کرنا باقی ہے، جن میں ایکسٹینشن کے آئیکن کا رنگ ریفریش کرنا شامل ہے، تو یہ ایک اچھا وقت ہے کہ براؤزر اس قسم کے کاموں کو کیسے منظم کرتا ہے۔ آئیے ان براؤزر ٹاسکس کے بارے میں سوچتے ہیں آپ کے ویب اثاثوں کی کارکردگی کے تناظر میں جب آپ انہیں بناتے ہیں۔
## ویب کارکردگی کی بنیادی باتیں
> "ویب سائٹ کی کارکردگی دو چیزوں کے بارے میں ہے: صفحہ کتنی تیزی سے لوڈ ہوتا ہے، اور اس پر کوڈ کتنی تیزی سے چلتا ہے۔" -- [زیک گروسبرٹ](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "ویب سائٹ کی کارکردگی دو چیزوں کے بارے میں ہے: صفحہ کتنی جلدی لوڈ ہوتا ہے، اور اس پر کوڈ کتنی جلدی چلتا ہے۔" -- [زیک گروسبرٹ](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
ویب سائٹس کو ہر قسم کے آلات، ہر قسم کے صارفین، اور ہر قسم کے حالات میں انتہائی تیز رفتار بنانے کے بارے میں موضوع حیرت انگیز طور پر وسیع ہے۔ یہاں کچھ نکات ہیں جنہیں آپ کو ایک معیاری ویب پروجیکٹ یا براؤزر ایکسٹینشن بناتے وقت ذہن میں رکھنا چاہیے۔
سب سے پہلی چیز جو آپ کو یقینی بنانے کے لیے کرنی چاہیے کہ آپ کی سائٹ مؤثر طریقے سے چل رہی ہے، اس کی کارکردگی کے بارے میں ڈیٹا جمع کرنا ہے۔ اس کا پہلا مقام آپ کے ویب براؤزر کے ڈویلپر ٹولز میں ہے۔ ایج میں، آپ "سیٹنگز اور مزید" بٹن (براؤزر کے اوپر دائیں جانب تین نقطوں کا آئیکن) منتخب کر سکتے ہیں، پھر مزید ٹولز > ڈویلپر ٹولز پر جائیں اور پرفارمنس ٹیب کھولیں۔ آپ ونڈوز پر `Ctrl` + `Shift` + `I` یا میک پر `Option` + `Command` + `I` کی بورڈ شارٹ کٹس استعمال کر کے بھی ڈویلپر ٹولز کھول سکتے ہیں۔
سب سے پہلی چیز جو آپ کو یقینی بنانی چاہیے کہ آپ کی سائٹ مؤثر طریقے سے چل رہی ہے، اس کی کارکردگی کے بارے میں ڈیٹا جمع کرنا ہے۔ اس کے لیے پہلا مقام آپ کے ویب براؤزر کے ڈیولپر ٹولز میں ہے۔ ایج میں، آپ "Settings and more" بٹن (براؤزر کے اوپر دائیں جانب تین نقطوں کا آئیکن) منتخب کر سکتے ہیں، پھر More Tools > Developer Tools پر جا کر Performance ٹیب کھول سکتے ہیں۔ آپ Windows پر `Ctrl` + `Shift` + `I` یا Mac پر `Option` + `Command` + `I` کی بورڈ شارٹ کٹس استعمال کر کے بھی ڈیولپر ٹولز کھول سکتے ہیں۔
پرفارمنس ٹیب میں ایک پروفائلنگ ٹول ہوتا ہے۔ ایک ویب سائٹ کھولیں (مثال کے طور پر [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) اور 'ریکارڈ' بٹن پر کلک کریں، پھر سائٹ کو ریفریش کریں۔ کسی بھی وقت ریکارڈنگ کو روکیں، اور آپ ان روٹینز کو دیکھ سکیں گے جو سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کرنے کے لیے تیار کی گئی ہیں:
Performance ٹیب میں ایک پروفائلنگ ٹول موجود ہے۔ ایک ویب سائٹ کھولیں (مثال کے طور پر، [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) اور 'Record' بٹن پر کلک کریں، پھر سائٹ کو ریفریش کریں۔ کسی بھی وقت ریکارڈنگ کو روکیں، اور آپ ان روٹینز کو دیکھ سکیں گے جو سائٹ کو 'script', 'render', اور 'paint' کرنے کے لیے بنائی گئی ہیں:
✅ [مائیکروسافٹ دستاویزات](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) پر ایج میں پرفارمنس پینل کے بارے میں مزید جانیں
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) پر ایج کے Performance پینل کے بارے میں مزید جانیں۔
> ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں
> ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں۔
پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان واقعات کو زوم کیا جا سکے جو آپ کے صفحہ کے لوڈ ہونے کے دوران ہوتے ہیں۔
پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان ایونٹس پر زوم کریں جو آپ کے صفحے کے لوڈ ہونے کے دوران ہوتے ہیں۔
پروفائل ٹائم لائن کے ایک حصے کو منتخب کر کے اور خلاصہ پین کو دیکھ کر اپنے صفحہ کی کارکردگی کا اسنیپ شاٹ حاصل کریں:
اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں پروفائل ٹائم لائن کے کسی حصے کو منتخب کر کے اور سمری پین کو دیکھ کر:
✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈویلپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟
✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟
## پروفائلنگ چیکس
عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جنہیں ہر ویب ڈویلپر کو سائٹ بناتے وقت دیکھنا چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔
عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جنہیں ہر ویب ڈیولپر کو سائٹ بناتے وقت دیکھنا چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔
**اثاثوں کے سائز**: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گیا ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔
**اثاثوں کے سائز**: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گئی ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔
✅ [انٹرنیٹ آرکائیو](https://httparchive.org/reports/page-weight) کے ذریعے صفحہ کے وزن اور مزید کے تاریخی نظارے کے لیے دیکھیں۔
✅ [Internet Archive](https://httparchive.org/reports/page-weight) کو دیکھیں تاکہ صفحہ کے وزن اور مزید کے تاریخی نظارے حاصل کریں۔
ایک اچھا عمل یہ ہے کہ یہ یقینی بنایا جائے کہ آپ کی تصاویر آپ کے صارفین کے لیے صحیح سائز اور ریزولوشن پر بہتر اور فراہم کی گئی ہیں۔
ایک اچھا عمل یہ ہے کہ یہ یقینی بنایا جائے کہ آپ کی تصاویر کو بہتر بنایا گیا ہے اور آپ کے صارفین کے لیے صحیح سائز اور ریزولوشن پر فراہم کی گئی ہیں۔
**DOM ٹریورسلز**: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا دستاویز آبجیکٹ ماڈل بنانا ہوتا ہے، اس لیے اچھے صفحہ کی کارکردگی کے مفاد میں اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کرنا اور اسٹائل کرنا جو صفحہ کو ضرورت ہے۔ اس نکتے پر، صفحہ سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحہ پر استعمال ہونے کی ضرورت ہے انہیں مثال کے طور پر مین اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے۔
**DOM ٹریورسلز**: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا Document Object Model بنانا ہوتا ہے، اس لیے اچھے صفحے کی کارکردگی کے مفاد میں اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کرنا اور اسٹائل کرنا جو صفحہ کو ضرورت ہے۔ اس نقطہ پر، صفحے سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحے پر استعمال ہونے کی ضرورت ہے، انہیں مرکزی اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے، مثال کے طور پر۔
**جاوا اسکرپٹ**: ہر جاوا اسکرپٹ ڈویلپر کو 'رینڈر بلاکنگ' اسکرپٹس کے لیے دیکھنا چاہیے جنہیں DOM کو ٹریورس اور براؤزر پر پینٹ کرنے سے پہلے لوڈ کرنا ضروری ہے۔ اپنے ان لائن اسکرپٹس کے ساتھ `defer` استعمال کرنے پر غور کریں (جیسا کہ ٹیریریم ماڈیول میں کیا گیا ہے)۔
**جاوا اسکرپٹ**: ہر جاوا اسکرپٹ ڈیولپر کو 'render-blocking' اسکرپٹس کے لیے دیکھنا چاہیے جو DOM کو ٹریورس اور براؤزر پر پینٹ کرنے سے پہلے لوڈ ہونا ضروری ہیں۔ اپنے ان لائن اسکرپٹس کے ساتھ `defer` استعمال کرنے پر غور کریں (جیسا کہ Terrarium ماڈیول میں کیا گیا ہے)۔
✅ سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جانے والے عام چیکس کے بارے میں مزید جاننے کے لیے کچھ سائٹس کو [سائٹ اسپیڈ ٹیسٹ ویب سائٹ](https://www.webpagetest.org/) پر آزمائیں۔
✅ کچھ سائٹس کو [Site Speed Test ویب سائٹ](https://www.webpagetest.org/) پر آزمائیں تاکہ ان عام چیکس کے بارے میں مزید جان سکیں جو سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جاتے ہیں۔
اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے ان آخری چند چیزوں کو دیکھتے ہیں جنہیں آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے:
اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے ان آخری چند چیزوں کو دیکھتے ہیں جو آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے:
### رنگ کا حساب لگانے کے لیے ایک فنکشن بنائیں
`/src/index.js` میں کام کرتے ہوئے، `calculateColor()` نامی ایک فنکشن شامل کریں جو آپ نے DOM تک رسائی حاصل کرنے کے لیے سیٹ کیے گئے `const` متغیرات کی سیریز کے بعد ہو:
`/src/index.js` میں کام کرتے ہوئے، `calculateColor()` نامی ایک فنکشن شامل کریں ان `const` ویریبلز کے سلسلے کے بعد جو آپ نے DOM تک رسائی حاصل کرنے کے لیے سیٹ کیے ہیں:
```JavaScript
function calculateColor(value) {
@ -88,19 +88,19 @@ function calculateColor(value) {
}
```
یہاں کیا ہو رہا ہے؟ آپ ایک قدر (کاربن شدت) پاس کرتے ہیں جو آپ نے پچھلے سبق میں مکمل کیے گئے API کال سے حاصل کی تھی، اور پھر آپ اس کی قدر کو رنگوں کی صف میں پیش کردہ انڈیکس کے قریب ترین حساب لگاتے ہیں۔ پھر آپ اس قریب ترین رنگ کی قدر کو کروم رن ٹائم پر بھیجتے ہیں۔
یہاں کیا ہو رہا ہے؟ آپ ایک ویلیو (کاربن شدت) پاس کرتے ہیں جو آپ نے پچھلے سبق میں مکمل کیے گئے API کال سے حاصل کی تھی، اور پھر آپ حساب لگاتے ہیں کہ اس کی ویلیو رنگوں کی صف میں پیش کردہ انڈیکس کے کتنی قریب ہے۔ پھر آپ اس قریب ترین رنگ کی ویلیو کو کروم رن ٹائم پر بھیجتے ہیں۔
کروم.رن ٹائم میں [ایک API](https://developer.chrome.com/extensions/runtime) ہے جو ہر قسم کے بیک گراؤنڈ ٹاسکس کو ہینڈل کرتا ہے، اور آپ کا ایکسٹینشن اس کا فائدہ اٹھا رہا ہے:
chrome.runtime میں [ایک API](https://developer.chrome.com/extensions/runtime) موجود ہے جو ہر قسم کے بیک گراؤنڈ ٹاسکس کو ہینڈل کرتا ہے، اور آپ کا ایکسٹینشن اس کا فائدہ اٹھا رہا ہے:
> "کروم.رن ٹائم API کا استعمال کریں تاکہ بیک گراؤنڈ صفحہ کو بازیافت کیا جا سکے، مینیفیسٹ کے بارے میں تفصیلات واپس کی جا سکیں، اور ایپ یا ایکسٹینشن لائف سائیکل میں ہونے والے واقعات کے لیے سنیں اور جواب دیں۔ آپ اس API کا استعمال URLs کے رشتہ دار راستے کو مکمل طور پر اہل URLs میں تبدیل کرنے کے لیے بھی کر سکتے ہیں۔"
> "chrome.runtime API کا استعمال کریں تاکہ بیک گراؤنڈ صفحہ حاصل کریں، مینیفیسٹ کے بارے میں تفصیلات واپس کریں، اور ایپ یا ایکسٹینشن لائف سائیکل میں ایونٹس کے لیے سنیں اور جواب دیں۔ آپ اس API کا استعمال URLs کے رشتہ دار راستے کو مکمل طور پر اہل URLs میں تبدیل کرنے کے لیے بھی کر سکتے ہیں۔"
✅ اگر آپ یہ براؤزر ایکسٹینشن ایج کے لیے تیار کر رہے ہیں، تو یہ آپ کو حیران کر سکتا ہے کہ آپ کروم API استعمال کر رہے ہیں۔ ایج براؤزر کے نئے ورژن کرومیم براؤزر انجن پر چلتے ہیں، اس لیے آپ ان ٹولز کا فائدہ اٹھا سکتے ہیں۔
> نوٹ، اگر آپ براؤزر ایکسٹینشن کو پروفائل کرنا چاہتے ہیں، تو اسے خود ایک علیحدہ براؤزر انسٹینس کے طور پر لانچ کریں۔
> نوٹ کریں، اگر آپ براؤزر ایکسٹینشن کو پروفائل کرنا چاہتے ہیں، تو ایکسٹینشن کے اندر سے ڈیولپر ٹولز لانچ کریں، کیونکہ یہ اپنا الگ براؤزر انسٹینس ہے۔
### ایک ڈیفالٹ آئیکن رنگ سیٹ کریں
اب، `init()` فنکشن میں، آئیکن کو شروع کرنے کے لیے عمومی سبز رنگ پر سیٹ کریں، دوبارہ کروم کے `updateIcon` ایکشن کو کال کر کے:
اب، `init()` فنکشن میں، آئیکن کو شروع میں عمومی سبز رنگ پر سیٹ کریں کروم کے `updateIcon` ایکشن کو دوبارہ کال کر کے:
```JavaScript
chrome.runtime.sendMessage({
@ -110,7 +110,6 @@ chrome.runtime.sendMessage({
},
});
```
### فنکشن کو کال کریں، کال کو انجام دیں
اگلا، اس فنکشن کو کال کریں جو آپ نے ابھی بنایا ہے، اسے C02Signal API کے ذریعے واپس کیے گئے وعدے میں شامل کر کے:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -144,17 +143,17 @@ function drawIcon(value) {
اس کوڈ میں، آپ بیک اینڈ ٹاسک مینیجر پر آنے والے کسی بھی پیغام کے لیے سننے والا شامل کر رہے ہیں۔ اگر اسے 'updateIcon' کہا جاتا ہے، تو اگلا کوڈ صحیح رنگ کے آئیکن کو کینوس API کا استعمال کرتے ہوئے ڈرا کرنے کے لیے چلایا جاتا ہے۔
✅ آپ کینوس API کے بارے میں مزید [اسپیس گیم اسباق](../../6-space-game/2-drawing-to-canvas/README.md) میں سیکھیں گے۔
✅ آپ کینوس API کے بارے میں مزید [Space Game اسباق](../../6-space-game/2-drawing-to-canvas/README.md) میں سیکھیں گے۔
اب، اپنے ایکسٹینشن کو دوبارہ بنائیں (`npm run build`)، ریفریش کریں اور اپنے ایکسٹینشن کو لانچ کریں، اور رنگ کی تبدیلی دیکھیں۔ کیا یہ کوئی کام کرنے یا برتن دھونے کا اچھا وقت ہے؟ اب آپ جانتے ہیں!
مبارک ہو، آپ نے ایک مفید براؤزر ایکسٹینشن بنایا ہے اور براؤزر کے کام کرنے کے طریقے اور اس کی کارکردگی کو پروفائل کرنے کے بارے میں مزید سیکھا ہے۔
مبارک ہو، آپ نے ایک مفید براؤزر ایکسٹینشن بنایا اور براؤزر کے کام کرنے کے طریقے اور اس کی کارکردگی کو پروفائل کرنے کے بارے میں مزید سیکھا۔
---
## 🚀 چیلنج
کچھ اوپن سورس ویب سائٹس کی تحقیق کریں جو کافی عرصے سے موجود ہیں، اور ان کے گٹ ہب ہسٹری کی بنیاد پر دیکھیں کہ آیا وہ کارکردگی کے لیے بہتر کی گئی تھیں یا نہیں۔ سب سے عام مسئلہ کیا ہے؟
کچھ اوپن سورس ویب سائٹس کی تحقیق کریں جو کافی عرصہ پہلے سے موجود ہیں، اور ان کے GitHub ہسٹری کی بنیاد پر دیکھیں کہ آیا انہیں کارکردگی کے لیے بہتر بنایا گیا تھا یا نہیں۔ سب سے عام مسئلہ کیا ہے؟
## لیکچر کے بعد کا کوئز
@ -162,9 +161,9 @@ function drawIcon(value) {
## جائزہ اور خود مطالعہ
[کارکردگی نیوز لیٹر](https://perf.email/) کے لیے سائن اپ کرنے پر غور کریں۔
ایک [کارکردگی نیوز لیٹر](https://perf.email/) کے لیے سائن اپ کرنے پر غور کریں۔
اپنے ویب ٹولز میں پرفارمنس ٹیبز کو دیکھ کر براؤزرز ویب کارکردگی کو جانچنے کے کچھ طریقوں کی تحقیق کریں۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟
براؤزرز کے ویب کارکردگی کو جانچنے کے طریقوں کی تحقیق کریں، ان کے ویب ٹولز کے پرفارمنس ٹیبز کو دیکھ کر۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟
# Dự án Tiện ích Trình duyệt Phần 3: Tìm hiểu về Nhiệm vụ Nền và Hiệu suất
# Dự án Tiện ích Mở rộng Trình duyệt Phần 3: Tìm hiểu về Nhiệm vụ Nền và Hiệu suất
## Câu hỏi trước bài giảng
[Câu hỏi trước bài giảng](https://ff-quizzes.netlify.app/web/quiz/27)
[Quiz trước bài giảng](https://ff-quizzes.netlify.app/web/quiz/27)
### Giới thiệu
Trong hai bài học trước của mô-đun này, bạn đã học cách xây dựng một biểu mẫu và khu vực hiển thị dữ liệu được lấy từ API. Đây là một cách rất phổ biến để tạo sự hiện diện trên web. Bạn thậm chí đã học cách xử lý việc lấy dữ liệu một cách bất đồng bộ. Tiện ích trình duyệt của bạn gần như đã hoàn thiện.
Trong hai bài học trước của module này, bạn đã học cách xây dựng một biểu mẫu và khu vực hiển thị dữ liệu được lấy từ API. Đây là một cách rất tiêu chuẩn để tạo sự hiện diện trên web. Bạn thậm chí đã học cách xử lý việc lấy dữ liệu một cách bất đồng bộ. Tiện ích mở rộng trình duyệt của bạn gần như đã hoàn thiện.
Còn lại là quản lý một số nhiệm vụ nền, bao gồm làm mới màu sắc của biểu tượng tiện ích, vì vậy đây là thời điểm tuyệt vời để nói về cách trình duyệt quản lý loại nhiệm vụ này. Hãy suy nghĩ về những nhiệm vụ trình duyệt này trong bối cảnh hiệu suất của các tài sản web của bạn khi bạn xây dựng chúng.
Còn lại là việc quản lý một số nhiệm vụ nền, bao gồm việc làm mới màu sắc của biểu tượng tiện ích mở rộng, vì vậy đây là thời điểm tuyệt vời để nói về cách trình duyệt quản lý loại nhiệm vụ này. Hãy suy nghĩ về những nhiệm vụ trình duyệt này trong bối cảnh hiệu suất của các tài sản web của bạn khi bạn xây dựng chúng.
## Kiến thức cơ bản về Hiệu suất Web
> "Hiệu suất trang web liên quan đến hai điều: tốc độ tải trang và tốc độ chạy mã trên đó." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
> "Hiệu suất trang web liên quan đến hai điều: tốc độ tải trang và tốc độ chạy mã trên trang." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Chủ đề về cách làm cho các trang web của bạn nhanh chóng trên mọi loại thiết bị, cho mọi loại người dùng, trong mọi tình huống, không có gì ngạc nhiên là rất rộng lớn. Dưới đây là một số điểm cần ghi nhớ khi bạn xây dựng một dự án web tiêu chuẩn hoặc một tiện ích trình duyệt.
Chủ đề về cách làm cho các trang web của bạn nhanh chóng trên mọi loại thiết bị, cho mọi loại người dùng, trong mọi tình huống, không có gì ngạc nhiên là rất rộng lớn. Dưới đây là một số điểm cần lưu ý khi bạn xây dựng một dự án web tiêu chuẩn hoặc tiện ích mở rộng trình duyệt.
Điều đầu tiên bạn cần làm để đảm bảo rằng trang web của bạn hoạt động hiệu quả là thu thập dữ liệu về hiệu suất của nó. Nơi đầu tiên để làm điều này là trong công cụ dành cho nhà phát triển của trình duyệt web của bạn. Trong Edge, bạn có thể chọn nút "Cài đặt và hơn thế nữa" (biểu tượng ba chấm ở góc trên bên phải của trình duyệt), sau đó điều hướng đến Công cụ khác > Công cụ dành cho nhà phát triển và mở tab Hiệu suất. Bạn cũng có thể sử dụng phím tắt `Ctrl` + `Shift` + `I` trên Windows hoặc `Option` + `Command` + `I` trên Mac để mở công cụ dành cho nhà phát triển.
Điều đầu tiên bạn cần làm để đảm bảo rằng trang web của bạn hoạt động hiệu quả là thu thập dữ liệu về hiệu suất của nó. Nơi đầu tiên để làm điều này là trong công cụ dành cho nhà phát triển của trình duyệt web của bạn. Trong Edge, bạn có thể chọn nút "Cài đặt và hơn thế nữa" (biểu tượng ba dấu chấm ở góc trên bên phải của trình duyệt), sau đó điều hướng đến Công cụ khác > Công cụ dành cho nhà phát triển và mở tab Hiệu suất. Bạn cũng có thể sử dụng phím tắt `Ctrl` + `Shift` + `I` trên Windows hoặc `Option` + `Command` + `I` trên Mac để mở công cụ dành cho nhà phát triển.
Tab Hiệu suất chứa một công cụ Hồ sơ. Mở một trang web (ví dụ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) và nhấp vào nút 'Ghi', sau đó làm mới trang. Dừng ghi bất kỳ lúc nào, và bạn sẽ có thể xem các quy trình được tạo ra để 'script', 'render', và 'paint' trang web:
Tab Hiệu suất chứa một công cụ Profiling. Mở một trang web (thử, ví dụ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) và nhấp vào nút 'Record', sau đó làm mới trang web. Dừng ghi bất kỳ lúc nào, và bạn sẽ có thể xem các quy trình được tạo ra để 'script', 'render', và 'paint' trang web:
✅ Truy cập [Tài liệu Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) về bảng Hiệu suất trong Edge
> Mẹo: để có được số liệu chính xác về thời gian khởi động trang web của bạn, hãy xóa bộ nhớ cache của trình duyệt
> Mẹo: để có kết quả chính xác về thời gian khởi động của trang web, hãy xóa bộ nhớ cache của trình duyệt
Chọn các phần của dòng thời gian hồ sơ để phóng to các sự kiện xảy ra khi trang của bạn tải.
Chọn các phần của dòng thời gian profile để phóng to các sự kiện xảy ra khi trang của bạn tải.
Lấy ảnh chụp nhanh về hiệu suất của trang bằng cách chọn một phần của dòng thời gian hồ sơ và xem bảng tóm tắt:
Lấy ảnh chụp nhanh về hiệu suất của trang bằng cách chọn một phần của dòng thời gian profile và xem bảng tóm tắt:
✅ Làm quen với công cụ hồ sơ của bạn! Mở công cụ dành cho nhà phát triển trên trang web này và xem có bất kỳ nút thắt cổ chai nào không. Tài sản nào tải chậm nhất? Nhanh nhất?
✅ Làm quen với công cụ profiler của bạn! Mở công cụ dành cho nhà phát triển trên trang web này và xem liệu có bất kỳ nút thắt nào không. Tài sản nào tải chậm nhất? Nhanh nhất?
## Kiểm tra hồ sơ
## Kiểm tra profiling
Nhìn chung, có một số "khu vực vấn đề" mà mọi nhà phát triển web nên chú ý khi xây dựng một trang web để tránh những bất ngờ khó chịu khi triển khai lên môi trường sản xuất.
Nhìn chung, có một số "khu vực vấn đề" mà mọi nhà phát triển web nên chú ý khi xây dựng một trang web để tránh những bất ngờ khó chịu khi đến lúc triển khai sản phẩm.
**Kích thước tài sản**: Web đã trở nên "nặng" hơn, và do đó chậm hơn, trong vài năm qua. Một phần của trọng lượng này liên quan đến việc sử dụng hình ảnh.
**Kích thước tài sản**: Web đã trở nên 'nặng hơn', và do đó chậm hơn, trong vài năm qua. Một phần của trọng lượng này liên quan đến việc sử dụng hình ảnh.
✅ Xem qua [Internet Archive](https://httparchive.org/reports/page-weight) để có cái nhìn lịch sử về trọng lượng trang và nhiều hơn nữa.
✅ Xem qua [Internet Archive](https://httparchive.org/reports/page-weight) để có cái nhìn lịch sử về trọng lượng trang và hơn thế nữa.
Một thực hành tốt là đảm bảo rằng hình ảnh của bạn được tối ưu hóa và được cung cấp ở kích thước và độ phân giải phù hợp cho người dùng của bạn.
Một thực hành tốt là đảm bảo rằng hình ảnh của bạn được tối ưu hóa và được cung cấp với kích thước và độ phân giải phù hợp cho người dùng của bạn.
**Duyệt DOM**: Trình duyệt phải xây dựng Mô hình Đối tượng Tài liệu (DOM) dựa trên mã bạn viết, vì vậy để có hiệu suất trang tốt, hãy giữ các thẻ của bạn ở mức tối thiểu, chỉ sử dụng và định kiểu những gì trang cần. Đến điểm này, CSS dư thừa liên quan đến một trang có thể được tối ưu hóa; các kiểu chỉ cần sử dụng trên một trang không cần phải được bao gồm trong tệp kiểu chính, chẳng hạn.
**Duyệt DOM**: Trình duyệt phải xây dựng Mô hình Đối tượng Tài liệu (DOM) dựa trên mã bạn viết, vì vậy để có hiệu suất trang tốt, hãy giữ các thẻ của bạn ở mức tối thiểu, chỉ sử dụng và định kiểu những gì trang cần. Đến điểm này, CSS dư thừa liên quan đến một trang có thể được tối ưu hóa; các kiểu chỉ cần sử dụng trên một trang không cần phải được bao gồm trong tệp style chính, ví dụ.
**JavaScript**: Mọi nhà phát triển JavaScript nên chú ý đến các script "chặn render" phải được tải trước khi phần còn lại của DOM có thể được duyệt và vẽ lên trình duyệt. Hãy cân nhắc sử dụng `defer` với các script nội tuyến của bạn (như đã làm trong mô-đun Terrarium).
**JavaScript**: Mọi nhà phát triển JavaScript nên chú ý đến các script 'chặn render' phải được tải trước khi phần còn lại của DOM có thể được duyệt và vẽ lên trình duyệt. Hãy cân nhắc sử dụng `defer` với các script nội tuyến của bạn (như đã làm trong module Terrarium).
✅ Thử một số trang web trên [Trang kiểm tra tốc độ trang web](https://www.webpagetest.org/) để tìm hiểu thêm về các kiểm tra phổ biến được thực hiện để xác định hiệu suất trang web.
✅ Thử một số trang web trên một [Trang web Kiểm tra Tốc độ](https://www.webpagetest.org/) để tìm hiểu thêm về các kiểm tra phổ biến được thực hiện để xác định hiệu suất trang web.
Bây giờ bạn đã có ý tưởng về cách trình duyệt render các tài sản bạn gửi đến, hãy xem những điều cuối cùng bạn cần làm để hoàn thành tiện ích của mình:
Bây giờ bạn đã có ý tưởng về cách trình duyệt render các tài sản bạn gửi đến nó, hãy xem những điều cuối cùng bạn cần làm để hoàn thiện tiện ích mở rộng của mình:
### Tạo một hàm để tính toán màu sắc
@ -88,15 +88,15 @@ function calculateColor(value) {
}
```
Điều gì đang xảy ra ở đây? Bạn truyền vào một giá trị (cường độ carbon) từ cuộc gọi API mà bạn đã hoàn thành trong bài học trước, và sau đó bạn tính toán giá trị của nó gần với chỉ số được trình bày trong mảng màu sắc như thế nào. Sau đó, bạn gửi giá trị màu gần nhất đó đến chrome runtime.
Điều gì đang diễn ra ở đây? Bạn truyền vào một giá trị (cường độ carbon) từ API mà bạn đã hoàn thành trong bài học trước, và sau đó bạn tính toán giá trị này gần với chỉ số được trình bày trong mảng màu sắc như thế nào. Sau đó, bạn gửi giá trị màu sắc gần nhất đó đến chrome runtime.
Chrome.runtime có [một API](https://developer.chrome.com/extensions/runtime) xử lý tất cả các loại nhiệm vụ nền, và tiện ích của bạn đang tận dụng điều đó:
Chrome.runtime có [một API](https://developer.chrome.com/extensions/runtime) xử lý tất cả các loại nhiệm vụ nền, và tiện ích mở rộng của bạn đang tận dụng điều này:
> "Sử dụng API chrome.runtime để truy xuất trang nền, trả về chi tiết về manifest, và lắng nghe cũng như phản hồi các sự kiện trong vòng đời của ứng dụng hoặc tiện ích. Bạn cũng có thể sử dụng API này để chuyển đổi đường dẫn tương đối của URL thành URL đầy đủ."
> "Sử dụng API chrome.runtime để truy xuất trang nền, trả về chi tiết về manifest, và lắng nghe cũng như phản hồi các sự kiện trong vòng đời ứng dụng hoặc tiện ích mở rộng. Bạn cũng có thể sử dụng API này để chuyển đổi đường dẫn tương đối của URL thành URL đầy đủ."
✅ Nếu bạn đang phát triển tiện ích trình duyệt này cho Edge, có thể bạn sẽ ngạc nhiên khi thấy rằng bạn đang sử dụng API chrome. Các phiên bản trình duyệt Edge mới hơn chạy trên công cụ trình duyệt Chromium, vì vậy bạn có thể tận dụng các công cụ này.
✅ Nếu bạn đang phát triển tiện ích mở rộng trình duyệt này cho Edge, có thể bạn sẽ ngạc nhiên khi thấy rằng bạn đang sử dụng API của chrome. Các phiên bản trình duyệt Edge mới hơn chạy trên engine trình duyệt Chromium, vì vậy bạn có thể tận dụng các công cụ này.
> Lưu ý, nếu bạn muốn hồ sơ một tiện ích trình duyệt, hãy khởi chạy công cụ dành cho nhà phát triển từ trong chính tiện ích, vì nó là một phiên bản trình duyệt riêng biệt.
> Lưu ý, nếu bạn muốn profiling một tiện ích mở rộng trình duyệt, hãy khởi chạy công cụ dành cho nhà phát triển từ chính tiện ích mở rộng, vì nó là một phiên bản trình duyệt riêng biệt.
### Đặt màu biểu tượng mặc định
@ -110,8 +110,7 @@ chrome.runtime.sendMessage({
},
});
```
### Gọi hàm, thực thi cuộc gọi
### Gọi hàm, thực thi lệnh gọi
Tiếp theo, gọi hàm bạn vừa tạo bằng cách thêm nó vào promise được trả về bởi API C02Signal:
@ -120,17 +119,17 @@ Tiếp theo, gọi hàm bạn vừa tạo bằng cách thêm nó vào promise đ
calculateColor(CO2);
```
Và cuối cùng, trong `/dist/background.js`, thêm trình lắng nghe cho các cuộc gọi hành động nền này:
Và cuối cùng, trong `/dist/background.js`, thêm trình lắng nghe cho các lệnh gọi hành động nền này:
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
@ -144,27 +143,27 @@ function drawIcon(value) {
Trong đoạn mã này, bạn đang thêm một trình lắng nghe cho bất kỳ tin nhắn nào đến trình quản lý nhiệm vụ nền. Nếu nó được gọi là 'updateIcon', thì đoạn mã tiếp theo sẽ được chạy để vẽ một biểu tượng với màu sắc phù hợp bằng cách sử dụng Canvas API.
✅ Bạn sẽ học thêm về Canvas API trong [bài học Trò chơi Không gian](../../6-space-game/2-drawing-to-canvas/README.md).
✅ Bạn sẽ tìm hiểu thêm về Canvas API trong [bài học Trò chơi Không gian](../../6-space-game/2-drawing-to-canvas/README.md).
Bây giờ, xây dựng lại tiện ích của bạn (`npm run build`), làm mới và khởi chạy tiện ích của bạn, và xem màu sắc thay đổi. Có phải là thời điểm tốt để đi làm việc vặt hoặc rửa bát không? Bây giờ bạn đã biết!
Bây giờ, hãy xây dựng lại tiện ích mở rộng của bạn (`npm run build`), làm mới và khởi chạy tiện ích mở rộng, và xem màu sắc thay đổi. Có phải là thời điểm tốt để đi làm việc vặt hoặc rửa bát không? Bây giờ bạn đã biết!
Chúc mừng, bạn đã xây dựng một tiện ích trình duyệt hữu ích và học thêm về cách trình duyệt hoạt động cũng như cách hồ sơ hiệu suất của nó.
Chúc mừng, bạn đã xây dựng một tiện ích mở rộng trình duyệt hữu ích và tìm hiểu thêm về cách trình duyệt hoạt động và cách profiling hiệu suất của nó.
---
## 🚀 Thử thách
Khám phá một số trang web mã nguồn mở đã tồn tại từ lâu, và, dựa trên lịch sử GitHub của chúng, xem liệu bạn có thể xác định cách chúng được tối ưu hóa qua các năm cho hiệu suất hay không. Điểm đau phổ biến nhất là gì?
Khám phá một số trang web mã nguồn mở đã tồn tại từ lâu, và, dựa trên lịch sử GitHub của chúng, xem liệu bạn có thể xác định cách chúng được tối ưu hóa qua các năm cho hiệu suất, nếu có. Điểm đau phổ biến nhất là gì?
## Câu hỏi sau bài giảng
[Câu hỏi sau bài giảng](https://ff-quizzes.netlify.app/web/quiz/28)
[Quiz sau bài giảng](https://ff-quizzes.netlify.app/web/quiz/28)
## Ôn tập & Tự học
Hãy cân nhắc đăng ký một [bản tin về hiệu suất](https://perf.email/)
Khám phá một số cách mà các trình duyệt đánh giá hiệu suất web bằng cách xem qua các tab hiệu suất trong công cụ web của chúng. Bạn có tìm thấy sự khác biệt lớn nào không?
Khám phá một số cách mà trình duyệt đánh giá hiệu suất web bằng cách xem qua các tab hiệu suất trong công cụ web của chúng. Bạn có tìm thấy sự khác biệt lớn nào không?
## Bài tập
@ -173,4 +172,4 @@ Khám phá một số cách mà các trình duyệt đánh giá hiệu suất we
---
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với các thông tin quan trọng, khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn tham khảo chính thức. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp từ con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Lee Stott
2 months ago
committed by
GitHub