From b5747037fb75f5cd3639d26ce172cd66acc6465b Mon Sep 17 00:00:00 2001 From: leestott Date: Fri, 3 Oct 2025 12:37:50 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20Update=20translations=20via=20Co?= =?UTF-8?q?-op=20Translator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../README.md | 75 ++++++------- .../README.md | 69 ++++++------ .../README.md | 87 +++++++------- .../README.md | 78 ++++++------- .../README.md | 81 +++++++------ .../README.md | 69 ++++++------ .../README.md | 102 +++++++++-------- .../README.md | 51 +++++---- .../README.md | 60 +++++----- .../README.md | 55 +++++---- .../README.md | 77 +++++++------ .../README.md | 41 ++++--- .../README.md | 62 +++++----- .../README.md | 90 ++++++++------- .../README.md | 49 ++++---- .../README.md | 91 ++++++++------- .../README.md | 61 +++++----- .../README.md | 62 +++++----- .../README.md | 41 ++++--- .../README.md | 81 +++++++------ .../README.md | 72 ++++++------ .../README.md | 68 ++++++----- .../README.md | 78 +++++++------ .../README.md | 65 ++++++----- .../README.md | 65 ++++++----- .../README.md | 59 +++++----- .../README.md | 106 +++++++++--------- .../README.md | 73 ++++++------ .../README.md | 69 ++++++------ .../README.md | 39 ++++--- .../README.md | 99 ++++++++-------- .../README.md | 85 +++++++------- .../README.md | 61 +++++----- .../README.md | 45 ++++---- .../README.md | 85 +++++++------- .../README.md | 54 +++++---- .../README.md | 63 +++++------ .../README.md | 89 ++++++++------- .../README.md | 56 +++++---- .../README.md | 92 ++++++++------- .../README.md | 86 +++++++------- .../README.md | 61 +++++----- .../README.md | 51 +++++---- .../README.md | 77 +++++++------ .../README.md | 59 +++++----- .../README.md | 71 ++++++------ .../README.md | 81 +++++++------ .../README.md | 57 +++++----- 48 files changed, 1644 insertions(+), 1704 deletions(-) diff --git a/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md index f0b32f5b..5b8e3f4e 100644 --- a/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ # Проект за браузърно разширение, част 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)) и кликнете върху бутона 'Запис', след това обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скрипт', 'рендиране' и 'рисуване' на сайта: ![Edge профайлер](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bg.png) -✅ Посетете [документацията на 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 -> Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си. +> Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си Изберете елементи от времевата линия на профила, за да увеличите събитията, които се случват, докато вашата страница се зарежда. -Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и разгледате панела за обобщение: +Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и погледнете панела за обобщение: ![Edge моментна снимка на профайлер](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bg.png) -Проверете панела "Дневник на събитията", за да видите дали някое събитие е отнело повече от 15 ms: +Проверете панела за дневник на събитията, за да видите дали някое събитие е отнело повече от 15 ms: ![Edge дневник на събитията](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bg.png) -✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви тесни места. Кой е най-бавно зареждащият се ресурс? Най-бързият? +✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви затруднения. Кой е най-бавно зареждащият се ресурс? Най-бързият? ## Проверки за профилиране -Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади при пускането му в продукция. +Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади, когато дойде време за внедряване в продукция. -**Размери на ресурсите**: Уебът стана "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения. +**Размери на ресурсите**: Уебът е станал "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения. -✅ Разгледайте [Интернет архива](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: ```JavaScript //let CO2... @@ -125,12 +124,12 @@ calculateColor(CO2); ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод. \ No newline at end of file +Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод. \ No newline at end of file diff --git a/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md index 49faa120..349d6acd 100644 --- a/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,73 +1,73 @@ # ব্রাউজার এক্সটেনশন প্রকল্প পার্ট ৩: ব্যাকগ্রাউন্ড টাস্ক এবং পারফরম্যান্স সম্পর্কে জানুন -## প্রাক-লেকচার কুইজ +## প্রি-লেকচার কুইজ -[প্রাক-লেকচার কুইজ](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-এ, আপনি "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 প্রোফাইলার](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bn.png) -✅ 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 প্যানেল সম্পর্কে -> টিপ: আপনার ওয়েবসাইটের স্টার্টআপ টাইমের সঠিক রিডিং পেতে, আপনার ব্রাউজারের ক্যাশ পরিষ্কার করুন। +> টিপ: আপনার ওয়েবসাইটের স্টার্টআপ সময়ের সঠিক পরিমাপ পেতে, আপনার ব্রাউজারের ক্যাশ পরিষ্কার করুন -প্রোফাইল টাইমলাইনের উপাদানগুলো নির্বাচন করুন এবং দেখুন আপনার পেজ লোড হওয়ার সময় কী কী ইভেন্ট ঘটে। +প্রোফাইল টাইমলাইনের উপাদান নির্বাচন করে আপনার পৃষ্ঠার লোড হওয়ার সময় ঘটে যাওয়া ইভেন্টগুলোর দিকে জুম করুন। -প্রোফাইল টাইমলাইনের একটি অংশ নির্বাচন করে এবং সারাংশ প্যানটি দেখে আপনার পেজের পারফরম্যান্সের একটি স্ন্যাপশট নিন: +প্রোফাইল টাইমলাইনের একটি অংশ নির্বাচন করে এবং সারাংশ প্যান দেখুন আপনার পৃষ্ঠার পারফরম্যান্সের একটি স্ন্যাপশট পান: ![Edge প্রোফাইলার স্ন্যাপশট](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bn.png) -ইভেন্ট লগ প্যানটি চেক করুন এবং দেখুন কোনো ইভেন্ট ১৫ মিলিসেকেন্ডের বেশি সময় নিয়েছে কিনা: +ইভেন্ট লগ প্যান চেক করুন এবং দেখুন কোনো ইভেন্ট ১৫ মিলিসেকেন্ডের বেশি সময় নিয়েছে কিনা: ![Edge ইভেন্ট লগ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bn.png) -✅ আপনার প্রোফাইলারটি চিনে নিন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বোতলনেক আছে কিনা। সবচেয়ে ধীরগতির লোডিং অ্যাসেট কোনটি? সবচেয়ে দ্রুতগতির কোনটি? +✅ আপনার প্রোফাইলার সম্পর্কে জানুন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বাধা আছে কিনা। সবচেয়ে ধীর লোডিং অ্যাসেট কোনটি? সবচেয়ে দ্রুত কোনটি? ## প্রোফাইলিং চেক -সাধারণভাবে, কিছু "সমস্যাজনক এলাকা" রয়েছে যা প্রতিটি ওয়েব ডেভেলপারকে একটি সাইট তৈরি করার সময় লক্ষ্য রাখা উচিত, যাতে প্রোডাকশনে ডিপ্লয় করার সময় কোনো অপ্রত্যাশিত সমস্যা না হয়। +সাধারণভাবে, কিছু "সমস্যার ক্ষেত্র" রয়েছে যা প্রতিটি ওয়েব ডেভেলপারকে একটি সাইট তৈরি করার সময় নজর রাখা উচিত যাতে প্রোডাকশনে ডিপ্লয় করার সময় কোনো অপ্রত্যাশিত সমস্যা না হয়। -**অ্যাসেট সাইজ**: গত কয়েক বছরে ওয়েব 'ভারী' হয়ে উঠেছে এবং এর ফলে ধীরগতির হয়েছে। এর একটি অংশ চিত্র ব্যবহারের সাথে সম্পর্কিত। +**অ্যাসেট সাইজ**: গত কয়েক বছরে ওয়েব 'ভারী' হয়ে উঠেছে এবং তাই ধীর। এই ওজনের কিছু অংশ ইমেজ ব্যবহারের সাথে সম্পর্কিত। -✅ পেজ ওজন এবং আরও অনেক কিছুর ঐতিহাসিক দৃষ্টিভঙ্গির জন্য [ইন্টারনেট আর্কাইভ](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`-এ এই ব্যাকগ্রাউন্ড অ্যাকশন কলগুলোর জন্য লিসনার যোগ করুন: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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://ff-quizzes.netlify.app/web/quiz/28) -## পর্যালোচনা ও স্ব-অধ্যয়ন +## পর্যালোচনা এবং স্ব-অধ্যয়ন একটি [পারফরম্যান্স নিউজলেটার](https://perf.email/) সাবস্ক্রাইব করার কথা বিবেচনা করুন। -ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানার জন্য তাদের ওয়েব টুলগুলোর পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান? +ব্রাউজারগুলো কীভাবে ওয়েব পারফরম্যান্স পরিমাপ করে তা জানার জন্য তাদের ওয়েব টুলসের পারফরম্যান্স ট্যাবগুলো দেখুন। আপনি কি কোনো বড় পার্থক্য খুঁজে পান? ## অ্যাসাইনমেন্ট @@ -173,4 +172,4 @@ function drawIcon(value) { --- **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না। \ No newline at end of file +এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় লেখা সংস্করণটিকেই প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই। \ No newline at end of file diff --git a/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md index 6c585630..c304e13e 100644 --- a/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,73 +1,73 @@ -# Projeto de Extensão para Navegador Parte 3: Aprenda sobre Tarefas em Segundo Plano e Desempenho +# Projeto de Extensão de Navegador Parte 3: Aprenda sobre Tarefas em Segundo Plano e Desempenho -## Questionário Pré-Aula +## Quiz Pré-Aula -[Questionário pré-aula](https://ff-quizzes.netlify.app/web/quiz/27) +[Quiz pré-aula](https://ff-quizzes.netlify.app/web/quiz/27) ### Introdução -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: -![Perfilador do Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.br.png) +![Profiler do Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.br.png) ✅ 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: -![Instantâneo do perfilador do Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.br.png) +![Instantâneo do profiler do Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.br.png) -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: ![Log de eventos do Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.br.png) -✅ 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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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? -## Questionário Pós-Aula +## Quiz Pós-Aula -[Questionário pós-aula](https://ff-quizzes.netlify.app/web/quiz/28) +[Quiz pós-aula](https://ff-quizzes.netlify.app/web/quiz/28) ## Revisão e Autoestudo -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/cs/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/cs/5-browser-extension/3-background-tasks-and-performance/README.md index 38affabb..422f5006 100644 --- a/translations/cs/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/cs/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,73 +1,73 @@ # 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: ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.cs.png) -✅ 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: ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.cs.png) -Zkontrolujte panel protokolu událostí, abyste zjistili, zda některá událost trvala déle než 15 ms: +Zkontrolujte panel Log událostí, abyste zjistili, zda některá událost trvala déle než 15 ms: ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.cs.png) -✅ 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í: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +**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. \ No newline at end of file diff --git a/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md index 1a078182..e6f1d351 100644 --- a/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,43 +1,43 @@ -# 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: ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.da.png) -✅ 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: ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.da.png) @@ -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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/de/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/de/5-browser-extension/3-background-tasks-and-performance/README.md index 9e64ca55..344d11f8 100644 --- a/translations/de/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/de/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,13 +1,13 @@ -# 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': -![Edge-Profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.de.png) +![Edge Profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.de.png) -✅ 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: -![Edge-Profiler-Momentaufnahme](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.de.png) +![Edge Profiler Momentaufnahme](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.de.png) -Überprüfe das Ereignisprotokoll, um zu sehen, ob ein Ereignis länger als 15 ms gedauert hat: +Überprüfen Sie das Ereignisprotokoll, um zu sehen, ob ein Ereignis länger als 15 ms gedauert hat: -![Edge-Ereignisprotokoll](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.de.png) +![Edge Ereignisprotokoll](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.de.png) -✅ 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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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) --- diff --git a/translations/el/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/el/5-browser-extension/3-background-tasks-and-performance/README.md index c7f051e7..96279be4 100644 --- a/translations/el/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/el/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 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: ![Perfilador de Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.es.png) @@ -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: ![Instantánea del perfilador de Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.es.png) @@ -45,11 +45,11 @@ Revisa el panel de Registro de Eventos para ver si algún evento tomó más de 1 ![Registro de eventos de Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.es.png) -✅ ¡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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/fa/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/fa/5-browser-extension/3-background-tasks-and-performance/README.md index c47500f0..8b72af8a 100644 --- a/translations/fa/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/fa/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 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 ✅ Tutustu [Microsoftin dokumentaatioon](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) Edgen Suorituskyky-paneelista. -> Vinkki: saadaksesi tarkat lukemat verkkosivustosi käynnistysajasta, tyhjennä selaimesi välimuisti. +> 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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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(); @@ -164,7 +163,7 @@ Tutki joitakin avoimen lähdekoodin verkkosivustoja, jotka ovat olleet olemassa Harkitse [suorituskykyuutiskirjeen](https://perf.email/) tilaamista. -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ä. \ No newline at end of file +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ä. \ No newline at end of file diff --git a/translations/fr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/fr/5-browser-extension/3-background-tasks-and-performance/README.md index 2e167404..bbc6e304 100644 --- a/translations/fr/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/fr/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,13 +1,13 @@ -# 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 : ![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.fr.png) -✅ 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é : -![Snapshot profiler Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fr.png) +![Aperçu du profiler Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.fr.png) Vérifiez le panneau du journal des événements pour voir si un événement a pris plus de 15 ms : ![Journal des événements Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.fr.png) -✅ 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 : ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/he/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/he/5-browser-extension/3-background-tasks-and-performance/README.md index 2c0b26c9..737edc78 100644 --- a/translations/he/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/he/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,41 +1,41 @@ # פרויקט הרחבת דפדפן חלק 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', ואז רעננו את האתר. עצרו את ההקלטה בכל זמן, ותוכלו לראות את השגרות שנוצרות ל'סקריפט', 'רינדור' ו'ציור' של האתר: -![פרופילר של Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.he.png) +![פרופילר Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.he.png) ✅ בקרו ב-[תיעוד של 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`, הוסיפו מאזין לקריאות פעולות הרקע הללו: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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) -## סקירה ולמידה עצמית +## סקירה ולימוד עצמי שקלו להירשם ל-[ניוזלטר ביצועים](https://perf.email/) -חקור כמה מהדרכים שבהן דפדפנים מודדים ביצועי רשת על ידי עיון בלשוניות הביצועים בכלי הרשת שלהם. האם מצאתם הבדלים משמעותיים? +חקור כמה מהדרכים שבהן דפדפנים מודדים ביצועי רשת על ידי הסתכלות דרך לשוניות הביצועים בכלי הרשת שלהם. האם מצאתם הבדלים משמעותיים? ## משימה -[נתחו אתר מבחינת ביצועים](assignment.md) +[נתחו אתר לביצועים](assignment.md) --- **כתב ויתור**: -מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה. \ No newline at end of file +מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. אנו לא נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה. \ No newline at end of file diff --git a/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md index efcb4b91..61a91906 100644 --- a/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 瀏覽器擴展項目第3部分：了解背景任務與效能 +# 瀏覽器擴展項目第三部分：了解背景任務和性能 ## 課前測驗 @@ -15,59 +15,59 @@ CO_OP_TRANSLATOR_METADATA: ### 簡介 -在這個模組的前兩節課中，你學會了如何建立一個表單以及用於顯示從 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)），然後點擊「記錄」按鈕，刷新網站。隨時停止記錄，你將能看到生成的例程，包括「腳本」、「渲染」和「繪製」網站： ![Edge 分析工具](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.hk.png) -✅ 查看 [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 性能面板的內容 -> 提示：為了獲得網站啟動時間的準確讀數，請清除瀏覽器的快取 +> 提示：為了獲得網站啟動時間的準確讀數，請清除瀏覽器的緩存 -選擇剖析時間軸中的元素，放大頁面加載過程中的事件。 +選擇性能時間線的元素，放大頁面加載時發生的事件。 -通過選擇剖析時間軸的一部分並查看摘要面板，獲取頁面效能的快照： +通過選擇性能時間線的一部分並查看摘要窗格，獲取頁面性能的快照： ![Edge 分析工具快照](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.hk.png) -檢查事件日誌面板，看看是否有任何事件超過了 15 毫秒： +檢查事件日誌窗格，查看是否有任何事件超過了 15 毫秒： ![Edge 事件日誌](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.hk.png) -✅ 熟悉你的分析工具！打開此網站的開發者工具，看看是否有任何瓶頸。哪個資產加載最慢？哪個最快？ +✅ 熟悉你的分析工具！打開本網站的開發者工具，看看是否有任何瓶頸。哪個資產加載最慢？哪個最快？ -## 剖析檢查 +## 分析檢查 -通常，為了避免在部署到生產環境時出現意外，每個網頁開發者都應該注意一些「問題區域」。 +通常，為了避免在部署到生產環境時出現意外問題，每個網絡開發者都應該注意一些「問題區域」。 -**資產大小**：過去幾年來，網頁變得越來越「重」，因此也變得更慢。部分原因是圖片的使用。 +**資產大小**：過去幾年，網絡變得「更重」，因此也更慢。其中一些重量與使用圖片有關。 -✅ 查看 [Internet Archive](https://httparchive.org/reports/page-weight) 以獲取頁面重量的歷史視圖及更多資訊。 +✅ 查看 [Internet Archive](https://httparchive.org/reports/page-weight) 以了解頁面重量的歷史視圖及更多信息。 -一個好的做法是確保圖片已經過優化，並以適合用戶的大小和解析度交付。 +一個好的做法是確保你的圖片已經過優化，並以適合用戶的大小和分辨率交付。 -**DOM 遍歷**：瀏覽器需要根據你編寫的程式碼構建其文件物件模型（DOM），因此為了良好的頁面效能，應保持標籤的最小化，只使用和樣式化頁面所需的內容。例如，僅用於某一頁面的樣式不需要包含在主樣式表中。 +**DOM 遍歷**：瀏覽器需要根據你編寫的代碼構建其文檔對象模型，因此為了良好的頁面性能，應保持標籤的最小化，只使用和樣式化頁面所需的內容。基於此，與頁面相關的多餘 CSS 可以進行優化；僅需在某一頁面使用的樣式不需要包含在主樣式表中。 -**JavaScript**：每個 JavaScript 開發者都應該注意「渲染阻塞」腳本，這些腳本必須在 DOM 被遍歷和繪製到瀏覽器之前加載。考慮對內聯腳本使用 `defer`（如在 Terrarium 模組中所示）。 +**JavaScript**：每個 JavaScript 開發者都應注意「渲染阻塞」腳本，這些腳本必須在 DOM 遍歷和繪製到瀏覽器之前加載。考慮在內聯腳本中使用 `defer`（如在 Terrarium 模組中所做）。 -✅ 在 [網站速度測試網站](https://www.webpagetest.org/) 上嘗試一些網站，了解更多關於網站效能檢查的常見方法。 +✅ 在 [網站速度測試網站](https://www.webpagetest.org/) 上嘗試一些網站，了解用於確定網站性能的常見檢查。 -現在你已經了解了瀏覽器如何渲染你發送的資產，讓我們來看看完成擴展所需的最後幾件事： +現在你已經了解瀏覽器如何渲染你發送的資產，讓我們來看看完成擴展所需的最後幾件事： -### 建立一個計算顏色的函數 +### 創建計算顏色的函數 -在 `/src/index.js` 中，於你設置的一系列 `const` 變數之後，新增一個名為 `calculateColor()` 的函數，以獲取 DOM 的訪問權限： +在 `/src/index.js` 中，添加一個名為 `calculateColor()` 的函數，放在你設置的用於訪問 DOM 的一系列 `const` 變量之後： ```JavaScript function calculateColor(value) { @@ -88,15 +88,15 @@ 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 來檢索背景頁面、返回有關 manifest 的詳細資訊，並監聽和響應應用或擴展生命週期中的事件。你還可以使用此 API 將 URL 的相對路徑轉換為完全限定的 URL。」 +> 「使用 chrome.runtime API 獲取背景頁面，返回有關清單的詳細信息，並監聽和響應應用或擴展生命周期中的事件。你還可以使用此 API 將 URL 的相對路徑轉換為完全限定的 URL。」 -✅ 如果你正在為 Edge 開發這個瀏覽器擴展，可能會驚訝於你正在使用 chrome API。新版 Edge 瀏覽器基於 Chromium 瀏覽器引擎，因此你可以利用這些工具。 +✅ 如果你正在為 Edge 開發此瀏覽器擴展，可能會驚訝於你正在使用 chrome API。新版 Edge 瀏覽器基於 Chromium 瀏覽器引擎，因此你可以利用這些工具。 -> 注意，如果你想剖析瀏覽器擴展，請從擴展本身內部啟動開發者工具，因為它是一個獨立的瀏覽器實例。 +> 注意，如果你想分析瀏覽器擴展，請從擴展本身內部啟動開發者工具，因為它是獨立的瀏覽器實例。 ### 設置默認圖標顏色 @@ -110,27 +110,26 @@ chrome.runtime.sendMessage({ }, }); ``` - ### 調用函數並執行調用 -接下來，將你剛剛創建的函數添加到 C02Signal API 返回的 promise 中： +接下來，通過將其添加到 C02Signal API 返回的 promise 中，調用你剛剛創建的函數： ```JavaScript //let CO2... calculateColor(CO2); ``` -最後，在 `/dist/background.js` 中，為這些背景操作調用新增監聽器： +最後，在 `/dist/background.js` 中，為這些背景操作調用添加監聽器： ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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'，則接下來的程式碼將運行，使用 Canvas API 繪製適當顏色的圖標。 +在此代碼中，你為任何發送到後端任務管理器的消息添加了一個監聽器。如果消息名為 'updateIcon'，則接下來的代碼將使用 Canvas API 繪製適當顏色的圖標。 -✅ 你將在 [太空遊戲課程](../../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`），刷新並啟動你的擴展，觀察顏色變化。是時候去跑腿或洗碗了嗎？現在你知道了！ -恭喜你，你已經構建了一個實用的瀏覽器擴展，並學到了更多關於瀏覽器的工作原理以及如何剖析其效能的知識。 +恭喜你，你已經構建了一個有用的瀏覽器擴展，並且更深入地了解了瀏覽器的工作原理以及如何分析其性能。 --- ## 🚀 挑戰 -調查一些已經存在很長時間的開源網站，根據它們的 GitHub 歷史，看看它們是否在效能方面進行了優化。如果有，找出最常見的痛點是什麼？ +調查一些已存在很久的開源網站，根據其 GitHub 歷史，看看它們是否在多年來進行了性能優化。如果有，最常見的痛點是什麼？ ## 課後測驗 @@ -162,15 +161,15 @@ function drawIcon(value) { ## 回顧與自學 -考慮訂閱一份 [效能新聞簡報](https://perf.email/) +考慮訂閱一份 [性能新聞簡報](https://perf.email/) -調查瀏覽器如何通過其網頁工具中的效能標籤來評估網頁效能。你是否發現了任何主要差異？ +調查瀏覽器通過其網絡工具中的性能選項卡來衡量網絡性能的一些方式。你是否發現了任何主要差異？ ## 作業 -[分析一個網站的效能](assignment.md) +[分析網站性能](assignment.md) --- **免責聲明**： -此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。 \ No newline at end of file +本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。 \ No newline at end of file diff --git a/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md index f7af86d6..e9d6889e 100644 --- a/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# Proyek Ekstensi Browser Bagian 3: Pelajari Tentang Tugas Latar Belakang dan Performa +# Proyek Ekstensi Browser Bagian 3: Pelajari Tugas Latar Belakang dan Performa -## Kuis Sebelum Pelajaran +## Kuis Pra-Pelajaran -[Kuis sebelum pelajaran](https://ff-quizzes.netlify.app/web/quiz/27) +[Kuis pra-pelajaran](https://ff-quizzes.netlify.app/web/quiz/27) -### Pengantar +### Pendahuluan 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: -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.id.png) +![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.id.png) ✅ 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: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.id.png) +![Snapshot Profiler Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.id.png) Periksa panel Log Peristiwa untuk melihat apakah ada peristiwa yang memakan waktu lebih dari 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.id.png) +![Log Peristiwa Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.id.png) ✅ 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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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) +[Kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/quiz/28) ## Tinjauan & Studi Mandiri @@ -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/it/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/it/5-browser-extension/3-background-tasks-and-performance/README.md index 0bc3e33a..f1b817f0 100644 --- a/translations/it/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/it/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,69 +1,69 @@ -# Progetto Estensione Browser Parte 3: Scopri le Attività in Background e le Prestazioni +# Progetto Estensione Browser Parte 3: Scopri i Task in Background e le Prestazioni -## Quiz Pre-Lettura +## Quiz Pre-Lezione -[Quiz pre-lettura](https://ff-quizzes.netlify.app/web/quiz/27) +[Quiz pre-lezione](https://ff-quizzes.netlify.app/web/quiz/27) ### Introduzione -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: -![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.it.png) +![Profiler di Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.it.png) -✅ 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: -![Snapshot profiler Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.it.png) +![Snapshot del profiler di Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.it.png) -Controlla il pannello del registro eventi per vedere se qualche evento ha impiegato più di 15 ms: +Controlla il pannello Event Log per vedere se qualche evento ha impiegato più di 15 ms: -![Registro eventi Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.it.png) +![Log eventi di Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.it.png) -✅ 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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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? -## Quiz Post-Lettura +## Quiz Post-Lezione -[Quiz post-lettura](https://ff-quizzes.netlify.app/web/quiz/28) +[Quiz post-lezione](https://ff-quizzes.netlify.app/web/quiz/28) ## Revisione e Studio Autonomo -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md index 4a12cd86..63f2191d 100644 --- a/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ # Naršyklės plėtinio projektas 3 dalis: Sužinokite apie fonines užduotis ir našumą -## Klausimynas prieš paskaitą +## Prieš paskaitą – testas -[Klausimynas prieš paskaitą](https://ff-quizzes.netlify.app/web/quiz/27) +[Prieš paskaitą – testas](https://ff-quizzes.netlify.app/web/quiz/27) ### Įvadas -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: ![Edge profiliavimo įrankis](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.lt.png) -✅ Apsilankykite [Microsoft dokumentacijoje](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) apie Edge našumo panelę. +✅ Apsilankykite [Microsoft dokumentacijoje](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) apie „Edge“ našumo panelę. > Patarimas: norėdami gauti tikslius svetainės paleidimo laiko duomenis, išvalykite naršyklės talpyklą. Pasirinkite profilio laiko juostos elementus, kad priartintumėte įvykius, vykstančius puslapio įkėlimo metu. -Gaukite savo puslapio našumo momentinę nuotrauką pasirinkdami profilio laiko juostos dalį ir peržiūrėdami santraukos skydelį: +Gaukite savo puslapio našumo momentinę nuotrauką, pasirinkdami profilio laiko juostos dalį ir peržiūrėdami santraukos skydelį: -![Edge profilio momentinė nuotrauka](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.lt.png) +![Edge profiliavimo momentinė nuotrauka](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.lt.png) Patikrinkite įvykių žurnalo skydelį, kad pamatytumėte, ar kuris nors įvykis užtruko ilgiau nei 15 ms: ![Edge įvykių žurnalas](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.lt.png) -✅ 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: ```JavaScript //let CO2... @@ -125,12 +124,12 @@ Ir galiausiai, faile `/dist/background.js`, pridėkite klausytoją šiems fonini ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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ą. @@ -154,17 +152,17 @@ Sveikiname, jūs sukūrėte naudingą naršyklės plėtinį ir sužinojote daugi ## 🚀 Iššūkis -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) +[Po paskaitos – testas](https://ff-quizzes.netlify.app/web/quiz/28) ## Apžvalga ir savarankiškas mokymasis -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. \ No newline at end of file +Š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. \ No newline at end of file diff --git a/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md index abc96804..47b5aa6b 100644 --- a/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 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 ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ms.png) -✅ 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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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 [Kuiz pasca-kuliah](https://ff-quizzes.netlify.app/web/quiz/28) -## Kajian & Pembelajaran Kendiri +## Kajian Semula & Kajian Kendiri -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md index b313fa0a..15328e5a 100644 --- a/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,73 +1,73 @@ # Browser Extension Project Part 3: Background Tasks နှင့် Performance ကိုလေ့လာပါ -## မိန့်ခွန်းမတင်မီ စစ်ဆေးမှု +## Pre-Lecture Quiz -[မိန့်ခွန်းမတင်မီ စစ်ဆေးမှု](https://ff-quizzes.netlify.app/web/quiz/27) +[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/27) -### နိဒါန်း +### အကျဉ်းချုပ် -ဒီ module ရဲ့ နောက်ဆုံးအတန်းနှစ်ခုမှာ API ကနေ data ကို ရယူပြီး ဖောင်နှင့် ပြသမှုဧရိယာကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်လေ့လာခဲ့ပါတယ်။ ဒါဟာ web ပေါ်မှာ web presence တစ်ခုကို ဖန်တီးတဲ့ အခြေခံနည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ သင် asynchronous data fetching ကို handle ဘယ်လိုလုပ်ရမယ်ဆိုတာတောင်လေ့လာခဲ့ပါတယ်။ သင့် browser extension ဟာ အနည်းငယ်ပဲ ကျန်တော့ပြီး ပြီးစီးတော့မယ်ဖြစ်ပါတယ်။ +ဒီ module ရဲ့ နောက်ဆုံးသော သင်ခန်းစာနှစ်ခုမှာ API ကနေ ဒေတာကို ရယူပြီး ဖောင်နှင့် ပြသရာကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်လေ့လာခဲ့ပါတယ်။ ဒါဟာ အင်တာနက်ပေါ်မှာ ဝက်ဘ်ဆိုဒ်တစ်ခုကို ဖန်တီးတဲ့ အခြေခံနည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ ဒါ့အပြင် ဒေတာကို asynchronous နည်းလမ်းနဲ့ fetch လုပ်တဲ့အခါ ဘယ်လိုကိုင်တွယ်ရမယ်ဆိုတာကိုလည်း သင်လေ့လာခဲ့ပါတယ်။ သင့် browser extension ဟာ အနီးကပ်ပြီးစီးသွားပါပြီ။ -အခုတော့ background tasks တချို့ကို စီမံခန့်ခွဲဖို့လိုအပ်ပါတယ်၊ အထူးသဖြင့် extension ရဲ့ icon အရောင်ကို refresh လုပ်တာပါ။ ဒါကြောင့် browser က ဒီလို tasks တွေကို ဘယ်လိုစီမံတယ်ဆိုတာကို ပြောဖို့ အချိန်ကောင်းတစ်ခုဖြစ်ပါတယ်။ သင့်ရဲ့ web assets တွေကို တည်ဆောက်နေစဉ်မှာ ဒီ browser tasks တွေကို performance ရဲ့ အရပ်ကနေ စဉ်းစားကြည့်ရအောင်။ +အခုတော့ background tasks တချို့ကို စီမံခန့်ခွဲဖို့လိုအပ်ပါတယ်၊ အထူးသဖြင့် extension ရဲ့ icon အရောင်ကို refresh လုပ်တာပါ။ ဒါကြောင့် browser က ဒီလို tasks တွေကို ဘယ်လိုစီမံခန့်ခွဲတယ်ဆိုတာကို ဆွေးနွေးဖို့ အချိန်ကောင်းတစ်ခုဖြစ်ပါတယ်။ သင့် web assets တွေကို တည်ဆောက်တဲ့အခါ performance ရဲ့ context မှာ browser tasks တွေကို စဉ်းစားကြည့်ရအောင်။ ## Web Performance အခြေခံ -> "Website performance ဆိုတာ နှစ်ခုပါပဲ - စာမျက်နှာဘယ်လောက်မြန်မြန် load တယ်၊ နဲ့ အဲ့ဒီမှာရှိတဲ့ code ဘယ်လောက်မြန်မြန် run တယ်။" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) +> "Website performance ဆိုတာ နှစ်ခုပဲရှိတယ် - စာမျက်နှာကို ဘယ်လောက်မြန်မြန် load လုပ်နိုင်တယ်၊ အဲဒီမှာရှိတဲ့ code ကို ဘယ်လောက်မြန်မြန် run လုပ်နိုင်တယ်ဆိုတာပဲ။" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) -Website တွေကို အမျိုးမျိုးသော device တွေ၊ user တွေ၊ နဲ့ အခြေအနေတွေမှာ အလွန်မြန်ဆန်အောင်လုပ်ပေးဖို့နည်းလမ်းတွေဟာ အလွန်ကျယ်ပြန့်ပါတယ်။ သင် browser extension တစ်ခုဖြစ်စေ၊ standard web project တစ်ခုဖြစ်စေ တည်ဆောက်နေစဉ်မှာ သတိထားရမယ့်အချက်တချို့ကို ဒီမှာဖော်ပြထားပါတယ်။ +Website တွေကို အမျိုးမျိုးသော device တွေ၊ user တွေ၊ situation တွေမှာ အလွန်မြန်ဆန်စွာ run လုပ်နိုင်အောင် ဘယ်လိုလုပ်ရမယ်ဆိုတာဟာ အလွန်ကျယ်ပြန့်တဲ့ ခေါင်းစဉ်တစ်ခုဖြစ်ပါတယ်။ သင့် browser extension သို့မဟုတ် ဝက်ဘ် project တစ်ခုကို တည်ဆောက်တဲ့အခါ သတိထားစရာအချက်အချို့ကို အောက်မှာဖော်ပြထားပါတယ်။ -သင့် site ကို ထိရောက်စွာ run နိုင်အောင်လုပ်ဖို့ ပထမဆုံး လိုအပ်တာက performance data ကို စုဆောင်းဖို့ပါ။ ဒီအချက်ကို သင့် web browser ရဲ့ developer tools မှာ စတင်စစ်ဆေးနိုင်ပါတယ်။ Edge browser မှာ "Settings and more" button (browser ရဲ့ အပေါ်ယံညာဘက်ထောင့်မှာရှိတဲ့ သုံးစင်း icon) ကိုရွေးပြီး More Tools > Developer Tools ကိုသွားပြီး Performance tab ကိုဖွင့်ပါ။ Windows မှာ `Ctrl` + `Shift` + `I` သို့မဟုတ် Mac မှာ `Option` + `Command` + `I` ကို အသုံးပြုပြီး developer tools ကိုဖွင့်နိုင်ပါတယ်။ +သင့် site ကို ထိရောက်စွာ run လုပ်နိုင်အောင်လုပ်ဖို့ ပထမဆုံး လိုအပ်တာက performance data ကို စုဆောင်းရပါမယ်။ ဒီအချက်အလက်တွေကို ရယူဖို့ ပထမဆုံးနေရာက သင့် web browser ရဲ့ developer tools ဖြစ်ပါတယ်။ Edge browser မှာ "Settings and more" button (browser ရဲ့ အပေါ်ယာဘက်မှာရှိတဲ့ သုံးချက် icon) ကိုရွေးပြီး More Tools > Developer Tools ကိုသွားပြီး Performance tab ကိုဖွင့်ပါ။ Windows မှာ `Ctrl` + `Shift` + `I` သို့မဟုတ် Mac မှာ `Option` + `Command` + `I` ကို အသုံးပြုပြီး developer tools ကိုဖွင့်နိုင်ပါတယ်။ -Performance tab မှာ Profiling tool တစ်ခုပါဝင်ပါတယ်။ Website တစ်ခုကိုဖွင့်ပါ (ဥပမာ [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon))၊ 'Record' button ကိုနှိပ်ပြီး site ကို refresh လုပ်ပါ။ အချိန်မရွေး recording ကိုရပ်လိုက်ပါ၊ သင် 'script', 'render', နဲ့ 'paint' လုပ်တဲ့ routines တွေကိုကြည့်နိုင်ပါလိမ့်မယ်။ +Performance tab မှာ Profiling tool ပါဝင်ပါတယ်။ Website တစ်ခုကိုဖွင့်ပါ (ဥပမာ [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon))၊ 'Record' button ကိုနှိပ်ပြီး site ကို refresh လုပ်ပါ။ Record ကို မည်သည့်အချိန်တွင်မဆို ရပ်နိုင်ပြီး 'script', 'render', 'paint' routines တွေကို ကြည့်နိုင်ပါမယ်။ ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.my.png) -✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) မှာ Edge ရဲ့ Performance panel ကိုလေ့လာပါ။ +✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ကိုဖွင့်ပြီး Edge ရဲ့ Performance panel ကိုလေ့လာပါ။ -> အကြံပြုချက် - သင့် website ရဲ့ startup time ကို တိကျစွာဖော်ပြဖို့ browser ရဲ့ cache ကို ရှင်းလင်းပါ။ +> အကြံပြုချက်: သင့် website ရဲ့ startup time ကို တိကျစွာဖော်ပြဖို့ browser ရဲ့ cache ကို ရှင်းလင်းပါ။ -Profile timeline ရဲ့ အစိတ်အပိုင်းတွေကိုရွေးပြီး သင့်စာမျက်နှာ load လုပ်နေစဉ်ဖြစ်ပျက်တဲ့ အဖြစ်အပျက်တွေကို zoom in လုပ်ကြည့်ပါ။ +Profile timeline ရဲ့ element တွေကိုရွေးပြီး page load ဖြစ်တဲ့အချိန်မှာ ဖြစ်ပျက်တဲ့ event တွေကို zoom လုပ်ကြည့်ပါ။ -Profile timeline ရဲ့ အစိတ်အပိုင်းတစ်ခုကိုရွေးပြီး summary pane မှာ သင့်စာမျက်နှာ performance ရဲ့ snapshot ကိုကြည့်ပါ။ +Profile timeline ရဲ့ အပိုင်းတစ်ခုကိုရွေးပြီး summary pane မှာ page performance ရဲ့ snapshot ကိုကြည့်ပါ။ ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.my.png) -Event Log pane ကိုစစ်ဆေးပြီး 15 ms ထက်ပိုကြာတဲ့ event တစ်ခုခုရှိမရှိကြည့်ပါ။ +Event Log pane ကိုစစ်ဆေးပြီး event တစ်ခုခု 15 ms ထက်ပိုကြာနေမလားကြည့်ပါ။ ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.my.png) -✅ သင့် profiler ကိုနားလည်ပါ! ဒီ site ရဲ့ developer tools ကိုဖွင့်ပြီး bottlenecks ရှိမရှိကြည့်ပါ။ ဘယ် asset က အမြန်ဆုံး load လုပ်သလဲ? ဘယ် asset က အနှေးဆုံးလဲ? +✅ Profiler ကိုနားလည်ပါ! ဒီ site ရဲ့ developer tools ကိုဖွင့်ပြီး bottleneck တွေရှိမရှိစစ်ဆေးပါ။ အမြန်ဆုံး load လုပ်တဲ့ asset က ဘာလဲ? အနှေးဆုံးက ဘာလဲ? -## Profiling စစ်ဆေးမှုများ +## Profiling checks -ယေဘူယျအားဖြင့် site တစ်ခုကို production မှာ deploy လုပ်ဖို့အချိန်ရောက်တဲ့အခါ အဆိုးရွားဆုံးအံ့ဩစရာတွေကိုရှောင်ရှားဖို့အတွက် web developer တစ်ဦးအနေနဲ့ သတိထားရမယ့် "ပြဿနာဧရိယာ" တချို့ရှိပါတယ်။ +အထွေထွေအားဖြင့် site တစ်ခုကို production မှာ deploy လုပ်တဲ့အခါ အဆင်မပြေတဲ့အရာတွေမဖြစ်စေရန် web developer တစ်ဦးအနေနဲ့ သတိထားရမယ့် "problem areas" တွေရှိပါတယ်။ -**Asset sizes**: Web ဟာ မကြာသေးခင်ကတည်းက 'ပိုလေး'လာပြီး အနှေးလာပါတယ်။ ဒီအလေးတစ်ခုမှာ images တွေကို အသုံးပြုမှုနဲ့ဆက်စပ်ပါတယ်။ +**Asset sizes**: အခုနှစ်တွေမှာ web ဟာ "လေး"လာပြီး အနှေးလာပါတယ်။ အဲဒီအလေးချိန်ရဲ့ အချို့က images တွေကို အသုံးပြုတာနဲ့ ဆက်စပ်ပါတယ်။ -✅ [Internet Archive](https://httparchive.org/reports/page-weight) ကိုကြည့်ပြီး page weight ရဲ့ သမိုင်းကြောင်းနဲ့ပိုမိုသိရှိပါ။ +✅ [Internet Archive](https://httparchive.org/reports/page-weight) ကိုကြည့်ပြီး page weight ရဲ့ သမိုင်းကြောင်းကိုလေ့လာပါ။ -သင့် images တွေကို optimize လုပ်ပြီး သင့် user တွေအတွက် size နဲ့ resolution မှန်ကန်တဲ့အတိုင်းပေးပို့တာက လုပ်ဆောင်သင့်တဲ့အရာတစ်ခုဖြစ်ပါတယ်။ +အကောင်းဆုံးနည်းလမ်းက သင့် images တွေကို optimize လုပ်ပြီး user တွေကို သင့်တော်တဲ့ size နဲ့ resolution နဲ့ပေးပို့ပါ။ -**DOM traversals**: Browser ဟာ သင့်ရေးထားတဲ့ code အပေါ်မူတည်ပြီး Document Object Model ကို တည်ဆောက်ရပါတယ်။ ဒါကြောင့် သင့်စာမျက်နှာ performance ကိုကောင်းမွန်အောင်လုပ်ဖို့ tags တွေကို အနည်းဆုံးထားပြီး စာမျက်နှာအတွက်လိုအပ်တာပဲ အသုံးပြုနဲ့ style လုပ်ပါ။ ဥပမာအားဖြင့် တစ်ခုတည်းသောစာမျက်နှာမှာသာအသုံးပြုမယ့် styles တွေကို main style sheet မှာထည့်စရာမလိုပါဘူး။ +**DOM traversals**: Browser ဟာ သင့်ရေးထားတဲ့ code အပေါ်မူတည်ပြီး Document Object Model ကို တည်ဆောက်ရပါတယ်။ ဒါကြောင့် page performance ကိုကောင်းမွန်စေဖို့ tags တွေကို လိုအပ်သလောက်သာအသုံးပြုပါ။ အဲဒီအချက်နဲ့ပတ်သက်ပြီး page တစ်ခုမှာသာအသုံးပြုရမယ့် styles တွေကို main style sheet မှာထည့်စရာမလိုပါဘူး။ -**JavaScript**: JavaScript developer တစ်ဦးအနေနဲ့ 'render-blocking' scripts တွေကို သတိထားရပါမယ်။ အဲ့ဒီ scripts တွေဟာ DOM ကို traverse နဲ့ paint လုပ်ဖို့မတိုင်ခင် load လုပ်ဖို့လိုအပ်ပါတယ်။ `defer` ကို inline scripts တွေမှာအသုံးပြုဖို့စဉ်းစားပါ (Terrarium module မှာလုပ်သလို)။ +**JavaScript**: JavaScript developer တစ်ဦးအနေနဲ့ 'render-blocking' scripts တွေကို သတိထားရပါမယ်။ အဲဒီ scripts တွေကို DOM ကို traverse လုပ်ပြီး browser မှာ paint လုပ်မယ့်အခါ load လုပ်ရပါမယ်။ `defer` ကို inline scripts တွေမှာအသုံးပြုပါ (Terrarium module မှာလုပ်ထားသလို)။ -✅ [Site Speed Test website](https://www.webpagetest.org/) မှာ site performance ကိုစစ်ဆေးတဲ့အခါ သာမန်စစ်ဆေးမှုတွေကိုလေ့လာပါ။ +✅ [Site Speed Test website](https://www.webpagetest.org/) မှာ ဝက်ဘ်ဆိုဒ်တစ်ချို့ကိုစမ်းကြည့်ပြီး site performance ကိုသတ်မှတ်ဖို့ လုပ်ရတဲ့ common checks တွေကိုလေ့လာပါ။ -Browser က သင့်ပေးပို့တဲ့ assets တွေကို ဘယ်လို render လုပ်တယ်ဆိုတာကို နားလည်ပြီးပြီဆိုရင် သင့် extension ကိုပြီးစီးဖို့လိုအပ်တဲ့ အနောက်ဆုံးအချက်အချို့ကိုကြည့်ရအောင်: +Browser ဟာ သင့်ပေးပို့တဲ့ assets တွေကို render လုပ်တဲ့နည်းလမ်းကို နားလည်ပြီးရင် extension ကိုပြီးစီးဖို့ လုပ်ရမယ့်အရာတွေကိုကြည့်ရအောင်: -### အရောင်တွက်ချက်ဖို့ function တစ်ခုဖန်တီးပါ +### Color ကိုတွက်ချက်ဖို့ function တစ်ခုဖန်တီးပါ -`/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 ကိုပို့ပါတယ်။ -Chrome.runtime မှာ background tasks အမျိုးမျိုးကို handle လုပ်တဲ့ [API](https://developer.chrome.com/extensions/runtime) ရှိပါတယ်၊ သင့် extension က အဲ့ဒီ API ကိုအသုံးပြုနေပါတယ်။ +chrome.runtime မှာ background tasks အမျိုးမျိုးကို handle လုပ်တဲ့ [API](https://developer.chrome.com/extensions/runtime) ရှိပါတယ်၊ သင့် extension က ဒီ API ကိုအသုံးပြုပါတယ်: -> "Chrome.runtime API ကို background page ကို retrieve လုပ်ဖို့၊ manifest အကြောင်းအရာတွေကိုပြန်ပေးဖို့၊ နဲ့ app သို့မဟုတ် extension lifecycle မှာဖြစ်ပျက်တဲ့ events တွေကိုနားထောင်ပြီး တုံ့ပြန်ဖို့အသုံးပြုပါ။ ဒီ API ကို relative path URLs တွေကို fully-qualified URLs တွေပြောင်းဖို့လည်းအသုံးပြုနိုင်ပါတယ်။" +> "chrome.runtime API ကို အသုံးပြုပြီး background page ကို retrieve လုပ်ပါ၊ manifest ရဲ့ details တွေကို return လုပ်ပါ၊ app သို့မဟုတ် extension lifecycle မှာဖြစ်ပျက်တဲ့ events တွေကို နားထောင်ပြီး တုံ့ပြန်ပါ။ URL တွေကို fully-qualified URLs အဖြစ်ပြောင်းဖို့လည်း ဒီ API ကိုအသုံးပြုနိုင်ပါတယ်။" -✅ သင် Edge အတွက် browser extension တစ်ခုကို develop လုပ်နေတယ်ဆိုရင် chrome API ကိုအသုံးပြုနေတာအံ့ဩစရာဖြစ်နိုင်ပါတယ်။ Edge ရဲ့ နောက်ဆုံး browser versions တွေဟာ Chromium browser engine ပေါ်မှာ run လုပ်တာကြောင့် ဒီ tools တွေကိုအသုံးပြုနိုင်ပါတယ်။ +✅ Edge အတွက် browser extension ကို develop လုပ်နေရင် chrome API ကိုအသုံးပြုနေရတာအံ့ဩစရာဖြစ်နိုင်ပါတယ်။ Edge ရဲ့ နောက်ဆုံး browser version တွေဟာ Chromium browser engine ပေါ်မှာ run လုပ်တာကြောင့် ဒီ tools တွေကိုအသုံးပြုနိုင်ပါတယ်။ -> မှတ်ချက် - browser extension တစ်ခုကို profile လုပ်ချင်တယ်ဆိုရင် extension ကိုယ်တိုင်ရဲ့ dev tools မှာဖွင့်ပြီးစစ်ဆေးပါ၊ အဲ့ဒါဟာ သီးခြား browser instance တစ်ခုဖြစ်ပါတယ်။ +> မှတ်ချက် - browser extension ကို profile လုပ်ချင်ရင် extension ကိုယ်တိုင်ရဲ့ dev tools ကိုဖွင့်ပါ၊ အဲဒါဟာ browser instance သီးသန့်တစ်ခုဖြစ်ပါတယ်။ ### Default icon color ကိုသတ်မှတ်ပါ -အခုတော့ `init()` function မှာ chrome ရဲ့ `updateIcon` action ကိုခေါ်ပြီး generic green အဖြစ် icon ကိုစတင်သတ်မှတ်ပါ။ +အခုတော့ `init()` function မှာ icon ကို generic green အဖြစ်စတင်သတ်မှတ်ပါ၊ chrome ရဲ့ `updateIcon` action ကိုပြန်ခေါ်ပါ: ```JavaScript chrome.runtime.sendMessage({ @@ -110,27 +110,26 @@ chrome.runtime.sendMessage({ }, }); ``` - ### Function ကိုခေါ်ပြီး call ကို execute လုပ်ပါ -နောက်ဆုံးမှာ သင်ဖန်တီးထားတဲ့ function ကို C02Signal API က promise ပြန်ပေးတဲ့နေရာမှာထည့်ပါ။ +နောက်ဆုံးတော့ သင်ဖန်တီးထားတဲ့ function ကို C02Signal API က promise return လုပ်တဲ့နေရာမှာခေါ်ပါ: ```JavaScript //let CO2... calculateColor(CO2); ``` -နောက်ဆုံးမှာ `/dist/background.js` မှာ background action calls တွေကိုနားထောင်ဖို့ listener တစ်ခုထည့်ပါ။ +နောက်ဆုံးမှာ `/dist/background.js` မှာ background action calls တွေကိုနားထောင်ဖို့ listener ကိုထည့်ပါ: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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); } ``` +ဒီ code မှာ backend task manager ကို message တစ်ခုခုလာရောက်တဲ့အခါ listener ကိုထည့်ထားပါတယ်။ 'updateIcon' လို့ခေါ်ရင်တော့ Canvas API ကိုအသုံးပြုပြီး သင့်အရောင်နဲ့ icon ကို draw လုပ်တဲ့ code ကို run လုပ်ပါတယ်။ -ဒီ code မှာ backend task manager ကိုလာတဲ့ messages တွေအားလုံးအတွက် listener တစ်ခုထည့်ထားပါတယ်။ 'updateIcon' လို့ခေါ်ရင်တော့ Canvas API ကိုအသုံးပြုပြီး သင့်ရဲ့ icon ကိုမှန်ကန်တဲ့အရောင်နဲ့ဆွဲဆောင်ဖို့ code ကို run လုပ်ပါတယ်။ - -✅ [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md) မှာ Canvas API အကြောင်းပိုမိုလေ့လာနိုင်ပါမယ်။ +✅ Canvas API ကို [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md) မှာပိုမိုလေ့လာနိုင်ပါမယ်။ -အခုတော့ သင့် extension ကိုပြန်တည်ဆောက်ပါ (`npm run build`), refresh လုပ်ပြီး extension ကိုဖွင့်ပါ၊ အရောင်ပြောင်းတာကိုကြည့်ပါ။ အခုတော့ errands သွားလုပ်ဖို့ သို့မဟုတ် ပန်းကန်ဆေးဖို့အချိန်ကောင်းလား? အခုတော့သိပြီနော်! +အခုတော့ သင့် extension ကိုပြန်တည်ဆောက်ပါ (`npm run build`), refresh လုပ်ပြီး extension ကိုဖွင့်ပါ၊ အရောင်ပြောင်းလဲမှုကိုကြည့်ပါ။ အခုတော့ errands သွားလုပ်ဖို့ သို့မဟုတ် ပန်းကန်ဆေးဖို့အချိန်ကောင်းလား? အခုတော့သိပါပြီ! -သင်အသုံးဝင်တဲ့ browser extension တစ်ခုကိုတည်ဆောက်ပြီး browser ဘယ်လိုအလုပ်လုပ်တယ်ဆိုတာနဲ့ performance ကိုဘယ်လို profile လုပ်ရမယ်ဆိုတာကိုလေ့လာပြီးပါပြီ။ +ဂုဏ်ယူပါတယ်၊ သင့် browser extension ကိုအသုံးဝင်တဲ့အဆင့်တစ်ခုအထိတည်ဆောက်ပြီး browser ရဲ့လုပ်ဆောင်ပုံနဲ့ performance ကို profile လုပ်နည်းကိုပိုမိုနားလည်သွားပါပြီ။ --- -## 🚀 စိန်ခေါ်မှု +## 🚀 Challenge -အရင်ကတည်ရှိခဲ့တဲ့ open source websites တချို့ကိုစူးစမ်းပြီး၊ GitHub history အပေါ်မူတည်ပြီး performance အတွက် ဘယ်လို optimize လုပ်ခဲ့တယ်ဆိုတာရှာဖွေကြည့်ပါ။ အများဆုံး pain point ကဘာလဲ? +အချိန်ကြာရှည်တည်ရှိနေတဲ့ open source websites တချို့ကိုစစ်ဆေးပြီး၊ GitHub history အပေါ်မူတည်ပြီး performance အတွက် optimization လုပ်ခဲ့တာရှိမရှိစစ်ဆေးပါ။ အများဆုံး pain point ကဘာလဲ? -## မိန့်ခွန်းပြီးနောက် စစ်ဆေးမှု +## Post-Lecture Quiz -[မိန့်ခွန်းပြီးနောက် စစ်ဆေးမှု](https://ff-quizzes.netlify.app/web/quiz/28) +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28) -## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း +## Review & Self Study -[performance newsletter](https://perf.email/) တစ်ခုအတွက် စာရင်းသွင်းစဉ်းစားပါ။ +[performance newsletter](https://perf.email/) မှာ sign up လုပ်ဖို့စဉ်းစားပါ။ -Browser တွေက web performance ကိုဘယ်လိုတိုင်းတာတယ်ဆိုတာကို သူတို့ရဲ့ web tools ရဲ့ performance tabs တွေကိုကြည့်ပြီးစူးစမ်းပါ။ အဓိကကွာခြားချက်တစ်ခုခုတွေတွေ့ရလား? +Browser တွေက web performance ကိုဘယ်လိုအကဲဖြတ်တယ်ဆိုတာကို web tools ရဲ့ performance tabs တွေကိုကြည့်ပြီးလေ့လာပါ။ အဓိကကွာခြားချက်တွေရှိလား? -## အိမ်စာ +## Assignment -[Site performance ကိုခွဲခြမ်းစိတ်ဖြာပါ](assignment.md) +[Analyze a site for performance](assignment.md) --- **အကြောင်းကြားချက်**: -ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှု ဝန်ဆောင်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ \ No newline at end of file +ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ \ No newline at end of file diff --git a/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md index bf800c48..43baa7c5 100644 --- a/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,13 +1,13 @@ -# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनबारे जान्नुहोस् +# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनको बारेमा जान्नुहोस् ## प्रि-लेक्चर क्विज @@ -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' बटन क्लिक गर्नुहोस्, त्यसपछि साइटलाई रिफ्रेस गर्नुहोस्। कुनै पनि समयमा रेकर्डिङ रोक्नुहोस्, र तपाईंले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्न उत्पन्न भएका रुटिनहरू देख्न सक्नुहुन्छ: ![Edge प्रोफाइलर](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ne.png) -✅ [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) हेर्नुहोस्। > टिप: तपाईंको वेबसाइटको स्टार्टअप समयको सही रिडिङ प्राप्त गर्नको लागि, तपाईंको ब्राउजरको क्यास खाली गर्नुहोस्। -प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्। +प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर तपाईंको पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्। प्रोफाइल टाइमलाइनको कुनै भाग चयन गरेर र समरी प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्: ![Edge प्रोफाइलर स्न्यापशट](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ne.png) -Event Log प्यान जाँच गरेर हेर्नुहोस् कि कुनै घटना १५ मिलिसेकेन्डभन्दा बढी समय लिएको छ कि छैन: +Event Log प्यान जाँच गर्नुहोस् कि कुनै घटना १५ मिलिसेकेन्डभन्दा बढी समय लिएको छ कि छैन: ![Edge इभेन्ट लग](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ne.png) -✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र हेर्नुहोस् कि कुनै बोटलनेक छ कि छैन। सबैभन्दा ढिलो लोड हुने सम्पत्ति कुन हो? सबैभन्दा छिटो? +✅ तपाईंको प्रोफाइलरलाई राम्रोसँग चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै बोटलनेक छ कि छैन हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति कुन हो? सबैभन्दा छिटो? ## प्रोफाइलिङ जाँचहरू -सामान्यतया, केही "समस्या क्षेत्रहरू" छन् जसलाई प्रत्येक वेब डेभलपरले साइट निर्माण गर्दा ध्यान दिनुपर्छ ताकि उत्पादनमा डिप्लोय गर्ने समय अप्रिय आश्चर्यहरूबाट बच्न सकियोस्। +सामान्यतया, केही "समस्या क्षेत्रहरू" छन् जुन प्रत्येक वेब डेभलपरले साइट निर्माण गर्दा ध्यान दिनुपर्छ ताकि उत्पादनमा डिप्लोय गर्ने समय अप्रिय आश्चर्यहरूबाट बच्न सकियोस्। -**एसेट साइजहरू**: पछिल्ला केही वर्षहरूमा वेब 'भारी' भएको छ, र यसैले ढिलो पनि। यस तौलको केही भाग छविहरूको प्रयोगसँग सम्बन्धित छ। +**एसेट साइजहरू**: पछिल्ला केही वर्षहरूमा वेब 'भारी' भएको छ, र त्यसैले ढिलो पनि। यस तौलको केही भाग छविहरूको प्रयोगसँग सम्बन्धित छ। -✅ [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 द्वारा फर्काइएको प्रॉमिसमा यो फङ्सनलाई कल गर्नुहोस्: @@ -125,12 +124,12 @@ calculateColor(CO2); ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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://ff-quizzes.netlify.app/web/quiz/28) -## समीक्षा र आत्म अध्ययन +## समीक्षा र आत्म-अध्ययन [प्रदर्शन न्यूजलेटर](https://perf.email/) को लागि साइन अप गर्ने विचार गर्नुहोस्। -वेब टूल्सका प्रदर्शन ट्याबहरू हेरेर ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरू अन्वेषण गर्नुहोस्। के तपाईंले कुनै प्रमुख भिन्नता पाउनुभयो? +वेब टूल्सका प्रदर्शन ट्याबहरू हेरेर ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरूको अनुसन्धान गर्नुहोस्। के तपाईंले कुनै ठूला भिन्नता पाउनुभयो? ## असाइनमेन्ट @@ -173,4 +172,4 @@ function drawIcon(value) { --- **अस्वीकरण**: -यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। \ No newline at end of file +यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरी अनुवाद गरिएको हो। हामी यथासम्भव शुद्धताको लागि प्रयास गर्छौं, तर कृपया जानकार रहनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छन्। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्त्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। \ No newline at end of file diff --git a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md index 8fc0a0f7..208c5725 100644 --- a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,37 +1,37 @@ # Browserextensieproject Deel 3: Leer over Achtergrondtaken en Prestaties -## Quiz vóór de les +## Pre-Lecture Quiz -[Quiz vóór de les](https://ff-quizzes.netlify.app/web/quiz/27) +[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/27) ### Introductie -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': ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.nl.png) -✅ 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 ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.nl.png) -Controleer het gebeurtenislogboekpaneel om te zien of een gebeurtenis langer dan 15 ms duurde: +Controleer het Event Log-paneel om te zien of een gebeurtenis langer dan 15 ms duurde: ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.nl.png) -✅ 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 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. 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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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) +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28) -## Herziening & Zelfstudie +## Review & Zelfstudie -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md index 2062a1c3..09d03393 100644 --- a/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,13 +1,13 @@ -# 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: ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.no.png) @@ -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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md index 1c0e4460..9b4a0419 100644 --- a/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,73 +1,73 @@ # ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 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/) +> "ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੇਜ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਚਲਦਾ ਹੈ।" -- [Zack Grossbart](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' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ ਸਾਈਟ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ। ਕਿਸੇ ਵੀ ਸਮੇਂ ਰਿਕਾਰਡਿੰਗ ਨੂੰ ਰੋਕੋ, ਅਤੇ ਤੁਸੀਂ ਉਹ ਰੂਟੀਨ ਦੇਖ ਸਕਦੇ ਹੋ ਜੋ ਸਾਈਟ ਨੂੰ 'script', 'render', ਅਤੇ 'paint' ਕਰਨ ਲਈ ਬਣਾਈ ਗਈਆਂ ਹਨ: +Performance ਟੈਬ ਵਿੱਚ ਇੱਕ ਪ੍ਰੋਫਾਈਲਿੰਗ ਟੂਲ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਵੈੱਬਸਾਈਟ ਖੋਲ੍ਹੋ (ਉਦਾਹਰਨ ਲਈ, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ਅਤੇ 'Record' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ ਸਾਈਟ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ। ਰਿਕਾਰਡਿੰਗ ਨੂੰ ਕਿਸੇ ਵੀ ਸਮੇਂ ਰੋਕੋ, ਅਤੇ ਤੁਸੀਂ ਉਹ ਰੂਟੀਨ ਦੇਖ ਸਕੋਗੇ ਜੋ 'script', 'render', ਅਤੇ 'paint' ਸਾਈਟ ਲਈ ਬਣਾਈ ਗਈਆਂ ਹਨ: ![Edge ਪ੍ਰੋਫਾਈਲਰ](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.pa.png) -✅ Edge ਵਿੱਚ Performance ਪੈਨਲ ਬਾਰੇ [Microsoft Documentation](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) 'ਤੇ Edge ਵਿੱਚ Performance ਪੈਨਲ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ। -> ਸੁਝਾਅ: ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸਟਾਰਟਅਪ ਸਮੇਂ ਦਾ ਸਹੀ ਪੜ੍ਹਨ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਕੈਸ਼ ਸਾਫ਼ ਕਰੋ। +> ਸੁਝਾਅ: ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸ਼ੁਰੂਆਤੀ ਸਮੇਂ ਦੀ ਸਹੀ ਪੜਤਾਲ ਕਰਨ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਕੈਸ਼ ਸਾਫ਼ ਕਰੋ। -ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ ਤਾਂ ਜੋ ਉਹ ਘਟਨਾਵਾਂ ਦੇਖ ਸਕੋ ਜੋ ਤੁਹਾਡੀ ਪੰਨੇ ਦੇ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਹੁੰਦੀਆਂ ਹਨ। +ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ ਤਾਂ ਜੋ ਉਹ ਘਟਨਾਵਾਂ ਜ਼ੂਮ ਕੀਤੀਆਂ ਜਾ ਸਕਣ ਜੋ ਤੁਹਾਡਾ ਪੇਜ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਹੁੰਦੀਆਂ ਹਨ। -ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਦੇਖ ਕੇ ਆਪਣੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਸਨੈਪਸ਼ਾਟ ਲਵੋ: +ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਦੇਖ ਕੇ ਆਪਣੇ ਪੇਜ ਦੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਦੀ ਇੱਕ ਝਲਕ ਪ੍ਰਾਪਤ ਕਰੋ: ![Edge ਪ੍ਰੋਫਾਈਲਰ ਸਨੈਪਸ਼ਾਟ](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.pa.png) -Event Log ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਦੇਖ ਸਕੋ ਕਿ ਕੀ ਕੋਈ ਘਟਨਾ 15 ਮਿ.ਸੇ. ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ: +Event Log ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਦੇਖਿਆ ਜਾ ਸਕੇ ਕਿ ਕੀ ਕੋਈ ਘਟਨਾ 15 ਮਿ.ਸੇ. ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ: -![Edge Event Log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.pa.png) +![Edge ਇਵੈਂਟ ਲੌਗ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.pa.png) -✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜਾਣੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਵੇਖੋ ਕਿ ਕੀ ਕੋਈ ਬੋਤਲ-ਨੈਕ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼? +✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜਾਣੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਦੇਖੋ ਕਿ ਕੀ ਕੋਈ ਬੋਤਲ-ਗਰਦਨ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼? ## ਪ੍ਰੋਫਾਈਲਿੰਗ ਚੈੱਕ -ਆਮ ਤੌਰ 'ਤੇ, ਕੁਝ "ਸਮੱਸਿਆ ਵਾਲੇ ਖੇਤਰ" ਹੁੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਹਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਨੂੰ ਸਾਈਟ ਬਣਾਉਣ ਦੌਰਾਨ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਪ੍ਰੋਡਕਸ਼ਨ 'ਤੇ ਡਿਪਲੌਇ ਕਰਨ ਦੇ ਸਮੇਂ ਕੋਈ ਅਣਹੋਣੀ ਤੋਂ ਬਚ ਸਕੇ। +ਆਮ ਤੌਰ 'ਤੇ, ਕੁਝ "ਸਮੱਸਿਆ ਵਾਲੇ ਖੇਤਰ" ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਹਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਨੂੰ ਸਾਈਟ ਬਣਾਉਣ ਦੌਰਾਨ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਪ੍ਰੋਡਕਸ਼ਨ ਵਿੱਚ ਡਿਪਲੌਇ ਕਰਨ ਦੇ ਸਮੇਂ ਨੁਕਸਾਨਦਾਇਕ ਅਚੰਭੇ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ। -**ਐਸੈਟ ਸਾਈਜ਼**: ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਵੈੱਬ 'ਭਾਰੀ' ਹੋ ਗਿਆ ਹੈ, ਅਤੇ ਇਸ ਲਈ ਹੌਲਾ। ਇਸ ਭਾਰ ਦਾ ਕੁਝ ਹਿੱਸਾ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। +**ਐਸੈਟ ਸਾਈਜ਼**: ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਵੈੱਬ 'ਭਾਰੀ' ਹੋ ਗਿਆ ਹੈ, ਅਤੇ ਇਸ ਲਈ ਹੌਲਾ। ਇਸ ਭਾਰ ਦਾ ਕੁਝ ਹਿੱਸਾ ਚਿੱਤਰਾਂ ਦੇ ਉਪਯੋਗ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। -✅ [Internet Archive](https://httparchive.org/reports/page-weight) 'ਤੇ ਪੰਨਾ ਭਾਰ ਅਤੇ ਹੋਰ ਬਾਰੇ ਇਤਿਹਾਸਕ ਦ੍ਰਿਸ਼ਟੀ ਦੇਖੋ। +✅ [Internet Archive](https://httparchive.org/reports/page-weight) 'ਤੇ ਪੇਜ ਵਜ਼ਨ ਅਤੇ ਹੋਰ ਬਾਰੇ ਇਤਿਹਾਸਕ ਦ੍ਰਿਸ਼ਟੀ ਲਈ ਦੇਖੋ। -ਇੱਕ ਵਧੀਆ ਅਭਿਆਸ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸਹੀ ਆਕਾਰ ਅਤੇ ਰਿਜ਼ੋਲਿਊਸ਼ਨ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ। +ਇੱਕ ਚੰਗੀ ਅਭਿਆਸ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸਹੀ ਆਕਾਰ ਅਤੇ ਰਿਜ਼ੋਲੂਸ਼ਨ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ। -**DOM Traversals**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ Document Object Model ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਹਿੱਤ ਵਿੱਚ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਸਿਰਫ ਉਹੀ ਵਰਤਣਾ ਅਤੇ ਸਟਾਈਲ ਕਰਨਾ ਜੋ ਪੰਨੇ ਨੂੰ ਲੋੜ ਹੈ। ਇਸ ਬਿੰਦੂ ਤੱਕ, ਪੰਨੇ ਨਾਲ ਸੰਬੰਧਿਤ ਵਾਧੂ CSS ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਉਹ ਸਟਾਈਲ ਜੋ ਸਿਰਫ ਇੱਕ ਪੰਨੇ 'ਤੇ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ, ਉਹ ਮੁੱਖ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਉਦਾਹਰਨ ਲਈ। +**DOM Traversals**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ Document Object Model ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੀ ਪੇਜ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਦੇ ਹਿੱਤ ਵਿੱਚ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਣਾ ਚੰਗਾ ਹੈ, ਸਿਰਫ਼ ਉਹਨਾਂ ਨੂੰ ਵਰਤਣਾ ਅਤੇ ਸਟਾਈਲ ਕਰਨਾ ਜੋ ਪੇਜ ਨੂੰ ਲੋੜੀਂਦੇ ਹਨ। ਇਸ ਬਿੰਦੂ ਤੱਕ, ਪੇਜ ਨਾਲ ਸੰਬੰਧਿਤ ਵਾਧੂ CSS ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਉਹ ਸਟਾਈਲ ਜੋ ਸਿਰਫ਼ ਇੱਕ ਪੇਜ 'ਤੇ ਵਰਤੀਆਂ ਜਾਣੀਆਂ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਮੁੱਖ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ, ਉਦਾਹਰਨ ਲਈ। -**JavaScript**: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'render-blocking' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਟ੍ਰੈਵਰਸ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ inline ਸਕ੍ਰਿਪਟਾਂ ਨਾਲ `defer` ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸੋਚੋ (ਜਿਵੇਂ Terrarium ਮੋਡਿਊਲ ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ)। +**JavaScript**: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'render-blocking' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਟ੍ਰੈਵਰਸ ਅਤੇ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ inline ਸਕ੍ਰਿਪਟਾਂ ਨਾਲ `defer` ਵਰਤਣ ਬਾਰੇ ਸੋਚੋ (ਜਿਵੇਂ Terrarium ਮੌਡਿਊਲ ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ)। -✅ ਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਆਮ ਚੈੱਕਾਂ ਬਾਰੇ ਹੋਰ ਜਾਣਨ ਲਈ ਕੁਝ ਸਾਈਟਾਂ ਨੂੰ [Site Speed Test website](https://www.webpagetest.org/) 'ਤੇ ਅਜ਼ਮਾਓ। +✅ [Site Speed Test website](https://www.webpagetest.org/) 'ਤੇ ਕੁਝ ਸਾਈਟਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਸਿੱਖਿਆ ਜਾ ਸਕੇ ਕਿ ਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀ ਆਮ ਚੈੱਕ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। -ਹੁਣ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਭੇਜੇ ਗਏ ਐਸੈਟਾਂ ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਆਓ ਉਹ ਅੰਤਿਮ ਕੁਝ ਚੀਜ਼ਾਂ ਦੇਖੀਏ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰਾ ਕਰਨ ਲਈ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: +ਹੁਣ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਉਹ ਐਸੈਟਸ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਇਸ ਨੂੰ ਭੇਜਦੇ ਹੋ, ਆਓ ਉਹ ਆਖਰੀ ਕੁਝ ਚੀਜ਼ਾਂ ਦੇਖੀਏ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰਾ ਕਰਨ ਲਈ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ: -### ਰੰਗ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਬਣਾਓ +### ਰੰਗ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ -`/src/index.js` ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੈਟ ਕੀਤੇ `const` ਵੈਰੀਏਬਲਾਂ ਦੀ ਲੜੀ ਤੋਂ ਬਾਅਦ `calculateColor()` ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ: +`/src/index.js` ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹੋਏ, `calculateColor()` ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਸ਼੍ਰੇਣੀ ਦੇ `const` ਵੈਰੀਏਬਲਾਂ ਦੇ ਬਾਅਦ ਸ਼ਾਮਲ ਕਰੋ ਜੋ DOM ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ: ```JavaScript function calculateColor(value) { @@ -88,19 +88,19 @@ function calculateColor(value) { } ``` -ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਤੁਸੀਂ API ਕਾਲ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਕਾਰਬਨ ਇੰਟੈਂਸਿਟੀ ਦੇ ਮੁੱਲ ਨੂੰ ਪਾਸ ਕਰਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਪੂਰਾ ਕੀਤਾ ਸੀ, ਅਤੇ ਫਿਰ ਤੁਸੀਂ ਗਣਨਾ ਕਰਦੇ ਹੋ ਕਿ ਇਸਦਾ ਮੁੱਲ colors array ਵਿੱਚ ਪੇਸ਼ ਕੀਤੇ ਇੰਡੈਕਸ ਦੇ ਕਿੰਨਾ ਨੇੜੇ ਹੈ। ਫਿਰ ਤੁਸੀਂ ਉਸ ਸਭ ਤੋਂ ਨੇੜੇ ਰੰਗ ਦੇ ਮੁੱਲ ਨੂੰ chrome runtime ਵਿੱਚ ਭੇਜਦੇ ਹੋ। +ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਤੁਸੀਂ API ਕਾਲ ਤੋਂ (ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਪੂਰਾ ਕੀਤਾ) ਇੱਕ ਮੁੱਲ (ਕਾਰਬਨ ਇੰਟੈਂਸਿਟੀ) ਪਾਸ ਕਰਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਤੁਸੀਂ ਗਣਨਾ ਕਰਦੇ ਹੋ ਕਿ ਇਸ ਦਾ ਮੁੱਲ colors array ਵਿੱਚ ਪੇਸ਼ ਕੀਤੇ ਇੰਡੈਕਸ ਦੇ ਕਿੰਨਾ ਨੇੜੇ ਹੈ। ਫਿਰ ਤੁਸੀਂ chrome runtime ਨੂੰ ਉਹ ਸਭ ਤੋਂ ਨੇੜੇ ਰੰਗ ਦਾ ਮੁੱਲ ਭੇਜਦੇ ਹੋ। -chrome.runtime ਵਿੱਚ [API](https://developer.chrome.com/extensions/runtime) ਹੈ ਜੋ ਹਰ ਕਿਸਮ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇਸਨੂੰ ਲੈਵਰੇਜ ਕਰ ਰਿਹਾ ਹੈ: +chrome.runtime ਵਿੱਚ [API](https://developer.chrome.com/extensions/runtime) ਹੈ ਜੋ ਹਰ ਕਿਸਮ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇਸ ਨੂੰ ਲੈਵਰੇਜ ਕਰ ਰਿਹਾ ਹੈ: -> "chrome.runtime API ਦੀ ਵਰਤੋਂ ਬੈਕਗ੍ਰਾਊਂਡ ਪੰਨਾ ਪ੍ਰਾਪਤ ਕਰਨ, manifest ਦੇ ਵੇਰਵੇ ਵਾਪਸ ਕਰਨ, ਅਤੇ ਐਪ ਜਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲਾਈਫਸਾਈਕਲ ਵਿੱਚ ਘਟਨਾਵਾਂ ਲਈ ਸੁਣਨ ਅਤੇ ਜਵਾਬ ਦੇਣ ਲਈ ਕਰੋ। ਤੁਸੀਂ ਇਸ API ਦੀ ਵਰਤੋਂ URLs ਦੇ ਰਿਸ਼ਤੇਦਾਰ ਪਾਥ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਯੋਗ URLs ਵਿੱਚ ਬਦਲਣ ਲਈ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।" +> "chrome.runtime API ਨੂੰ ਬੈਕਗ੍ਰਾਊਂਡ ਪੇਜ ਪ੍ਰਾਪਤ ਕਰਨ, ਮੈਨਿਫੈਸਟ ਬਾਰੇ ਵੇਰਵੇ ਵਾਪਸ ਕਰਨ, ਅਤੇ ਐਪ ਜਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲਾਈਫਸਾਈਕਲ ਵਿੱਚ ਘਟਨਾਵਾਂ ਲਈ ਸੁਣਨ ਅਤੇ ਜਵਾਬ ਦੇਣ ਲਈ ਵਰਤੋ। ਤੁਸੀਂ ਇਸ API ਨੂੰ URLs ਦੇ ਰਿਲੇਟਿਵ ਪਾਥ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਯੋਗ URLs ਵਿੱਚ ਰੂਪਾਂਤਰਿਤ ਕਰਨ ਲਈ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ।" -✅ ਜੇ ਤੁਸੀਂ 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 ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੇ ਪ੍ਰੋਮਿਸ ਵਿੱਚ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ: +ਅਗਲੇ, ਉਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ ਜੋ ਤੁਸੀਂ ਹੁਣੇ ਬਣਾਇਆ ਹੈ CO2Signal API ਦੁਆਰਾ ਵਾਪਸ ਕੀਤੇ ਗਏ promise ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਕੇ: ```JavaScript //let CO2... calculateColor(CO2); ``` -ਅਤੇ ਅੰਤ ਵਿੱਚ, `/dist/background.js` ਵਿੱਚ, ਇਹਨਾਂ ਬੈਕਗ੍ਰਾਊਂਡ ਐਕਸ਼ਨ ਕਾਲਾਂ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰੋ: +ਅਤੇ ਆਖਰਕਾਰ, `/dist/background.js` ਵਿੱਚ, ਇਹਨਾਂ ਬੈਕਗ੍ਰਾਊਂਡ ਐਕਸ਼ਨ ਕਾਲਾਂ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰੋ: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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) { } ``` -ਇਸ ਕੋਡ ਵਿੱਚ, ਤੁਸੀਂ ਬੈਕਐਂਡ ਟਾਸਕ ਮੈਨੇਜਰ ਵਿੱਚ ਆਉਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਸੁਨੇਹੇ ਲਈ ਸੁਣਨ ਵਾਲਾ ਸ਼ਾਮਲ ਕਰ ਰਹੇ ਹੋ। ਜੇ ਇਸਨੂੰ '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://ff-quizzes.netlify.app/web/quiz/28) +[ਪੋਸਟ-ਵਿਆਖਿਆਨ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/28) -## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ +## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ ਇੱਕ [ਪ੍ਰਦਰਸ਼ਨ ਨਿਊਜ਼ਲੈਟਰ](https://perf.email/) ਲਈ ਸਾਈਨ ਅਪ ਕਰਨ ਬਾਰੇ ਸੋਚੋ। -ਵੈੱਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬਾਂ ਦੇਖ ਕੇ ਬ੍ਰਾਊਜ਼ਰ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕੇ ਦੀ ਜਾਂਚ ਕਰੋ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ? +ਬ੍ਰਾਊਜ਼ਰਾਂ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕਿਆਂ ਦੀ ਜਾਂਚ ਕਰੋ ਜਿਵੇਂ ਕਿ ਉਨ੍ਹਾਂ ਦੇ ਵੈੱਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬਾਂ ਦੇਖ ਕੇ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ? ## ਅਸਾਈਨਮੈਂਟ -[ਸਾਈਟ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ](assignment.md) +[ਸਾਈਟ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ](assignment.md) --- -**ਅਸਵੀਕਰਤੀ**: -ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੌਜੂਦ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਪ੍ਰਮਾਣਿਕ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੇ ਪ੍ਰਯੋਗ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। \ No newline at end of file +**ਅਸਵੀਕਰਤਾ**: +ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀਅਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦਸਤਾਵੇਜ਼ ਦੇ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਲਿਖੇ ਗ੍ਰੰਥ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। \ No newline at end of file diff --git a/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md index ab644120..da5d656d 100644 --- a/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,33 +1,33 @@ -# 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: ![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.pl.png) @@ -35,37 +35,37 @@ Karta Wydajność zawiera narzędzie do profilowania. Otwórz stronę internetow > Wskazówka: aby uzyskać dokładny odczyt czasu uruchamiania Twojej strony, wyczyść pamięć podręczną przeglądarki. -Wybierz elementy osi czasu profilu, aby przybliżyć zdarzenia, które mają miejsce podczas ładowania Twojej strony. +Wybierz elementy osi czasu profilu, aby przybliżyć zdarzenia, które mają miejsce podczas ładowania strony. Uzyskaj migawkę wydajności swojej strony, wybierając część osi czasu profilu i patrząc na panel podsumowania: ![Migawka profilera Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.pl.png) -Sprawdź panel Dziennika Zdarzeń, aby zobaczyć, czy jakieś zdarzenie trwało dłużej niż 15 ms: +Sprawdź panel Dziennik zdarzeń, aby zobaczyć, czy jakieś zdarzenie trwało dłużej niż 15 ms: ![Dziennik zdarzeń Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.pl.png) -✅ 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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md index 4661be2b..b4d169c9 100644 --- a/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 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: ![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ro.png) ✅ 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 ![Jurnal de evenimente Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ro.png) -✅ 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: @@ -125,12 +124,12 @@ calculateColor(CO2); ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/ru/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ru/5-browser-extension/3-background-tasks-and-performance/README.md index 7163fe84..755b2218 100644 --- a/translations/ru/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ru/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,41 +1,41 @@ # Проект расширения для браузера, часть 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)) и нажмите кнопку "Запись", затем обновите сайт. Остановите запись в любое время, и вы сможете увидеть процессы, которые выполняются для "скрипта", "рендеринга" и "рисования" сайта: ![Профайлер Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ru.png) -✅ Посетите [документацию 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: ![Журнал событий Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ru.png) -✅ Познакомьтесь с вашим профайлером! Откройте инструменты разработчика на этом сайте и проверьте, есть ли узкие места. Какой ресурс загружается дольше всего? Быстрее всего? +✅ Ознакомьтесь с профайлером! Откройте инструменты разработчика на этом сайте и проверьте, есть ли узкие места. Какой ресурс загружается медленнее всего? Быстрее всего? ## Проверки профилирования В целом, есть несколько "проблемных зон", за которыми каждый веб-разработчик должен следить при создании сайта, чтобы избежать неприятных сюрпризов при развертывании в продакшн. -**Размеры ресурсов**: За последние годы веб стал "тяжелее" и, соответственно, медленнее. Часть этого веса связана с использованием изображений. +**Размеры ресурсов**: Веб стал "тяжелее", а значит, медленнее за последние несколько лет. Часть этого веса связана с использованием изображений. -✅ Изучите [Архив Интернета](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`, добавьте слушатель для этих вызовов фоновых задач: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода. \ No newline at end of file +Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода. \ No newline at end of file diff --git a/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md index 8ac472dd..ed2c872c 100644 --- a/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# Пројекат за проширење прегледача, део 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' сајта: -![Edge профајлер](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sr.png) +![Edge профилер](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sr.png) -✅ Посетите [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-у -> Савет: да бисте добили тачно очитавање времена покретања вашег сајта, обришите кеш вашег прегледача. +> Савет: да бисте добили тачно очитавање времена покретања вашег сајта, очистите кеш вашег прегледача Изаберите елементе временске линије профила да бисте зумирали догађаје који се дешавају док се ваша страница учитава. -Добијте снимак перформанси ваше странице тако што ћете изабрати део временске линије профила и погледати резиме панела: +Добијте снимак перформанси ваше странице тако што ћете изабрати део временске линије профила и погледати панел са резимеом: -![Edge снимак профајлера](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sr.png) +![Edge снимак профилера](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sr.png) -Проверите панел Дневник догађаја да видите да ли је неки догађај трајао дуже од 15 ms: +Проверите панел са логом догађаја да видите да ли је неки догађај трајао дуже од 15 ms: -![Edge дневник догађаја](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sr.png) +![Edge лог догађаја](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sr.png) -✅ Упознајте свој профајлер! Отворите алате за програмере на овом сајту и проверите да ли постоје уска грла. Који је ресурс са најспоријим учитавањем? Најбржим? +✅ Упознајте свој профилер! Отворите алатке за програмере на овом сајту и видите да ли постоје уска грла. Који је ресурс са најспоријим учитавањем? Најбржим? ## Провере профилисања -Генерално, постоје неке „проблематичне области“ које сваки веб програмер треба да прати приликом изградње сајта како би избегао непријатна изненађења када дође време за пуштање у продукцију. +Уопштено, постоје неке "проблематичне области" које сваки веб програмер треба да прати приликом изградње сајта како би избегао непријатна изненађења када дође време за пуштање у продукцију. -**Величине ресурса**: Веб је постао „тежи“, а самим тим и спорији, током последњих неколико година. Део ове тежине има везе са употребом слика. +**Величине ресурса**: Веб је постао 'тежи', а самим тим и спорији, током последњих неколико година. Део те тежине има везе са употребом слика. -✅ Прегледајте [Интернет архиву](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`, додајте слушач за ове позадинске позиве акција: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода. \ No newline at end of file +Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода. \ No newline at end of file diff --git a/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md index a8acdf26..f48366d4 100644 --- a/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,23 +1,23 @@ -# Projekt för webbläsartillägg del 3: Lär dig om bakgrundsuppgifter och prestanda +# Webbläsartilläggsprojekt Del 3: Lär dig om bakgrundsuppgifter och prestanda -## Quiz före föreläsningen +## Förhandsquiz -[Quiz före föreläsningen](https://ff-quizzes.netlify.app/web/quiz/27) +[Förhandsquiz](https://ff-quizzes.netlify.app/web/quiz/27) ### Introduktion -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: ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sv.png) -✅ 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 ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sv.png) -✅ 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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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) +[Efterföreläsningsquiz](https://ff-quizzes.netlify.app/web/quiz/28) ## Granskning & Självstudier Ö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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md index 60579a55..5c6cd30b 100644 --- a/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,73 +1,73 @@ # 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: -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sw.png) +![Profaili ya Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.sw.png) -✅ 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: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sw.png) +![Muhtasari wa profaili ya Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.sw.png) -Angalia jopo la Ingizo la Matukio ili kuona kama kuna tukio lolote lililochukua zaidi ya 15 ms: +Angalia paneli ya Kumbukumbu ya Matukio ili kuona kama kuna tukio lolote lililochukua zaidi ya ms 15: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sw.png) +![Kumbukumbu ya matukio ya Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.sw.png) -✅ 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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md index 3bc07150..c9d3e104 100644 --- a/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 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 ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.tl.png) -✅ 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: ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.tl.png) @@ -45,7 +45,7 @@ Suriin ang Event Log pane upang makita kung may anumang event na tumagal ng higi ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.tl.png) -✅ 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 ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28) -## Review at Pag-aaral sa Sarili +## Review & Self Study 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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md index 5f8923db..641ee053 100644 --- a/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 瀏覽器擴充功能專案第三部分：了解背景任務與效能 +# 瀏覽器擴充功能專案第 3 部分：了解背景任務與效能 ## 課前測驗 @@ -15,59 +15,59 @@ CO_OP_TRANSLATOR_METADATA: ### 簡介 -在本模組的前兩節課中，你學到了如何建立表單以及顯示從 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)），然後點擊「記錄」按鈕，接著刷新網站。隨時停止記錄，您將能看到生成的例程，包括「腳本」、「渲染」和「繪製」網站的過程： ![Edge 分析工具](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.tw.png) -✅ 參考 [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 中效能面板的內容 > 提示：為了獲得網站啟動時間的準確讀數，請清除瀏覽器的快取 -選擇分析時間軸的元素，放大頁面載入過程中的事件。 +選擇分析時間軸的元素，放大頁面載入時發生的事件。 -透過選擇分析時間軸的一部分並查看摘要面板，獲取頁面效能的快照： +透過選擇分析時間軸的一部分並查看摘要窗格，獲取頁面效能的快照： ![Edge 分析工具快照](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.tw.png) -檢查事件日誌面板，查看是否有任何事件超過 15 毫秒： +檢查事件日誌窗格，查看是否有任何事件超過 15 毫秒： ![Edge 事件日誌](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.tw.png) -✅ 熟悉你的分析工具！在此網站上打開開發者工具，看看是否有任何瓶頸。哪個資產載入最慢？哪個最快？ +✅ 熟悉您的分析工具！打開此網站的開發者工具，看看是否有任何瓶頸。哪個資產載入最慢？哪個最快？ ## 分析檢查 -一般來說，為了避免在部署到生產環境時出現意外，每位網頁開發者都應該注意一些常見的「問題區域」。 +一般來說，為了避免在部署到生產環境時出現意外，每位網頁開發者都應該注意一些「問題區域」。 -**資產大小**：過去幾年，網頁變得「更重」，因此也更慢。部分原因是圖片的使用。 +**資產大小**：過去幾年，網頁變得「更重」，因此也更慢。其中一些重量與使用圖片有關。 -✅ 查看 [Internet Archive](https://httparchive.org/reports/page-weight) 了解頁面重量的歷史視圖及更多資訊。 +✅ 查看 [Internet Archive](https://httparchive.org/reports/page-weight) 以了解頁面重量的歷史視圖及更多資訊。 -一個好的做法是確保圖片已被優化，並以適合使用者的大小和解析度交付。 +一個好的做法是確保您的圖片已經過最佳化，並以適合使用者的大小和解析度交付。 -**DOM 遍歷**：瀏覽器需要根據你編寫的程式碼建立其文件物件模型（DOM），因此為了良好的頁面效能，應保持標籤的最小化，只使用和樣式化頁面所需的內容。舉例來說，僅需在某一頁使用的樣式不需要包含在主樣式表中。 +**DOM 遍歷**：瀏覽器必須根據您撰寫的程式碼建立其文件物件模型（DOM），因此為了良好的頁面效能，應保持標籤的最小化，只使用和樣式化頁面所需的內容。基於此點，與頁面相關的多餘 CSS 可以進行最佳化；僅需在某一頁面使用的樣式不需要包含在主樣式表中。 -**JavaScript**：每位 JavaScript 開發者都應注意「渲染阻塞」腳本，這些腳本必須在 DOM 被遍歷和繪製到瀏覽器之前載入。考慮在內嵌腳本中使用 `defer`（如在 Terrarium 模組中所示）。 +**JavaScript**：每位 JavaScript 開發者都應注意「渲染阻塞」腳本，這些腳本必須在 DOM 被遍歷並繪製到瀏覽器之前載入。考慮在內嵌腳本中使用 `defer`（如在 Terrarium 模組中所示）。 ✅ 在 [網站速度測試網站](https://www.webpagetest.org/) 上嘗試一些網站，了解用於判斷網站效能的常見檢查。 -現在你已經了解瀏覽器如何渲染你提供的資產，讓我們來看看完成擴充功能所需的最後幾個步驟： +現在您已經了解瀏覽器如何渲染您傳送的資產，讓我們來看看完成擴充功能所需的最後幾件事： ### 建立計算顏色的函數 -在 `/src/index.js` 中，於你設置的 `const` 變數系列之後新增一個名為 `calculateColor()` 的函數，以獲取 DOM 的訪問權限： +在 `/src/index.js` 中，於您設置的一系列 `const` 變數之後新增一個名為 `calculateColor()` 的函數，以便訪問 DOM： ```JavaScript function calculateColor(value) { @@ -88,17 +88,17 @@ 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 來檢索背景頁面、返回有關 manifest 的詳細資訊，並監聽和響應應用程式或擴充功能生命週期中的事件。您還可以使用此 API 將 URL 的相對路徑轉換為完全限定的 URL。」 -✅ 如果你正在為 Edge 開發此瀏覽器擴充功能，可能會驚訝於你正在使用 chrome API。新版 Edge 瀏覽器基於 Chromium 瀏覽器引擎，因此你可以利用這些工具。 +✅ 如果您正在為 Edge 開發此瀏覽器擴充功能，可能會驚訝於您正在使用 chrome API。新版 Edge 瀏覽器基於 Chromium 瀏覽器引擎，因此您可以利用這些工具。 -> 注意，如果你想分析瀏覽器擴充功能，請從擴充功能本身啟動開發者工具，因為它是獨立的瀏覽器實例。 +> 注意，如果您想分析瀏覽器擴充功能，請從擴充功能本身內部啟動開發者工具，因為它是獨立的瀏覽器實例。 -### 設置預設圖示顏色 +### 設定預設圖示顏色 現在，在 `init()` 函數中，透過再次調用 chrome 的 `updateIcon` 操作，將圖示設置為預設的綠色： @@ -110,10 +110,9 @@ chrome.runtime.sendMessage({ }, }); ``` - ### 呼叫函數並執行呼叫 -接下來，透過將其新增到 C02Signal API 返回的 promise 中，呼叫你剛剛建立的函數： +接下來，透過將其新增到 C02Signal API 返回的 promise 中，呼叫您剛剛建立的函數： ```JavaScript //let CO2... @@ -125,12 +124,12 @@ calculateColor(CO2); ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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'，則執行接下來的程式碼，使用 Canvas API 繪製適當顏色的圖示。 +在此程式碼中，您新增了一個監聽器，用於監聽傳送到後端任務管理器的任何訊息。如果訊息名為 'updateIcon'，則執行接下來的程式碼以使用 Canvas API 繪製適當顏色的圖示。 -✅ 你將在 [太空遊戲課程](../../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`），刷新並啟動您的擴充功能，並觀察顏色變化。是時候去跑腿或洗碗了嗎？現在您知道了！ -恭喜你，你已經建立了一個實用的瀏覽器擴充功能，並且更深入了解瀏覽器的運作方式以及如何分析其效能。 +恭喜您，您已經建立了一個實用的瀏覽器擴充功能，並且更深入了解瀏覽器的運作方式以及如何分析其效能。 --- ## 🚀 挑戰 -調查一些已存在多年的開源網站，根據其 GitHub 歷史，看看是否能判斷它們在效能方面的優化過程。如果有的話，最常見的痛點是什麼？ +調查一些已存在很久的開源網站，並根據其 GitHub 歷史記錄，看看是否能判斷它們在效能方面的最佳化過程。如果有的話，最常見的痛點是什麼？ ## 課後測驗 @@ -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) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。 \ No newline at end of file +本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。 \ No newline at end of file diff --git a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md index 93f4c3d7..9edabd70 100644 --- a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# براؤزر ایکسٹینشن پروجیکٹ حصہ 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' کرنے کے لیے بنائی گئی ہیں: ![ایج پروفائلر](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ur.png) -✅ [مائیکروسافٹ دستاویزات](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 پینل کے بارے میں مزید جانیں۔ -> ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں +> ٹپ: اپنی ویب سائٹ کے اسٹارٹ اپ وقت کی درست ریڈنگ حاصل کرنے کے لیے، اپنے براؤزر کا کیش صاف کریں۔ -پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان واقعات کو زوم کیا جا سکے جو آپ کے صفحہ کے لوڈ ہونے کے دوران ہوتے ہیں۔ +پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان ایونٹس پر زوم کریں جو آپ کے صفحے کے لوڈ ہونے کے دوران ہوتے ہیں۔ -پروفائل ٹائم لائن کے ایک حصے کو منتخب کر کے اور خلاصہ پین کو دیکھ کر اپنے صفحہ کی کارکردگی کا اسنیپ شاٹ حاصل کریں: +اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں پروفائل ٹائم لائن کے کسی حصے کو منتخب کر کے اور سمری پین کو دیکھ کر: ![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ur.png) -ایونٹ لاگ پین کو چیک کریں تاکہ یہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے: +ایونٹ لاگ پین کو چیک کریں تاکہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے: ![ایج ایونٹ لاگ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ur.png) -✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈویلپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟ +✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ آیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟ ## پروفائلنگ چیکس -عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جنہیں ہر ویب ڈویلپر کو سائٹ بناتے وقت دیکھنا چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔ +عام طور پر، کچھ "مسئلہ والے علاقے" ہیں جنہیں ہر ویب ڈیولپر کو سائٹ بناتے وقت دیکھنا چاہیے تاکہ پروڈکشن میں تعیناتی کے وقت ناخوشگوار حیرتوں سے بچا جا سکے۔ -**اثاثوں کے سائز**: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گیا ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔ +**اثاثوں کے سائز**: ویب پچھلے چند سالوں میں 'بھاری' اور اس طرح سست ہو گئی ہے۔ اس وزن کا کچھ حصہ تصاویر کے استعمال سے متعلق ہے۔ -✅ [انٹرنیٹ آرکائیو](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 کے ذریعے واپس کیے گئے وعدے میں شامل کر کے: @@ -125,12 +124,12 @@ calculateColor(CO2); ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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/) کے لیے سائن اپ کرنے پر غور کریں۔ -اپنے ویب ٹولز میں پرفارمنس ٹیبز کو دیکھ کر براؤزرز ویب کارکردگی کو جانچنے کے کچھ طریقوں کی تحقیق کریں۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟ +براؤزرز کے ویب کارکردگی کو جانچنے کے طریقوں کی تحقیق کریں، ان کے ویب ٹولز کے پرفارمنس ٹیبز کو دیکھ کر۔ کیا آپ کو کوئی بڑا فرق نظر آتا ہے؟ ## اسائنمنٹ diff --git a/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md index 69392685..a661725c 100644 --- a/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,69 +1,69 @@ -# 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: ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.vi.png) ✅ 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: ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.vi.png) -Kiểm tra bảng Nhật ký Sự kiện để xem có sự kiện nào mất hơn 15 ms không: +Kiểm tra bảng Nhật ký Sự kiện để xem liệu có sự kiện nào mất hơn 15 ms: ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.vi.png) -✅ 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: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { - chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); //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. \ No newline at end of file +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. \ No newline at end of file diff --git a/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md index a8dfa509..9308e206 100644 --- a/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@