|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "49b58721a71cfda824e2f3e1f46908c6",
|
|
|
"translation_date": "2025-08-29T11:48:14+00:00",
|
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
|
|
|
"language_code": "bg"
|
|
|
}
|
|
|
-->
|
|
|
# Проект за браузърно разширение, част 3: Научете за фоновите задачи и производителността
|
|
|
|
|
|
## Тест преди лекцията
|
|
|
|
|
|
[Тест преди лекцията](https://ff-quizzes.netlify.app/web/quiz/27)
|
|
|
|
|
|
### Въведение
|
|
|
|
|
|
В последните две уроци от този модул научихте как да създадете форма и зона за показване на данни, извлечени от API. Това е много стандартен начин за създаване на уеб присъствие. Дори научихте как да обработвате асинхронно извличане на данни. Вашето браузърно разширение е почти завършено.
|
|
|
|
|
|
Остава да управлявате някои фонови задачи, включително обновяване на цвета на иконата на разширението, така че това е чудесен момент да обсъдим как браузърът управлява този тип задачи. Нека разгледаме тези задачи в контекста на производителността на вашите уеб ресурси, докато ги изграждате.
|
|
|
|
|
|
## Основи на уеб производителността
|
|
|
|
|
|
> "Производителността на уебсайта се свежда до две неща: колко бързо се зарежда страницата и колко бързо работи кодът на нея." -- [Зак Гросбарт](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
|
|
|
|
|
Темата за това как да направите вашите уебсайтове изключително бързи на всякакви устройства, за всякакви потребители и във всякакви ситуации е, разбираемо, обширна. Ето някои точки, които да имате предвид, докато изграждате стандартен уеб проект или браузърно разширение.
|
|
|
|
|
|
Първото нещо, което трябва да направите, за да се уверите, че вашият сайт работи ефективно, е да съберете данни за неговата производителност. Първото място за това са инструментите за разработчици на вашия уеб браузър. В Edge можете да изберете бутона "Настройки и още" (иконата с трите точки в горния десен ъгъл на браузъра), след това да отидете на Още инструменти > Инструменти за разработчици и да отворите раздела "Производителност". Можете също да използвате клавишните комбинации `Ctrl` + `Shift` + `I` на Windows или `Option` + `Command` + `I` на Mac, за да отворите инструментите за разработчици.
|
|
|
|
|
|
Разделът "Производителност" съдържа инструмент за профилиране. Отворете уебсайт (например [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) и кликнете върху бутона "Запис", след което обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скриптиране', 'рендиране' и 'рисуване' на сайта:
|
|
|
|
|
|
|
|
|
|
|
|
✅ Посетете [документацията на Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) за раздела "Производителност" в Edge.
|
|
|
|
|
|
> Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си.
|
|
|
|
|
|
Изберете елементи от времевата линия на профила, за да увеличите събитията, които се случват, докато вашата страница се зарежда.
|
|
|
|
|
|
Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и разгледате панела за обобщение:
|
|
|
|
|
|
|
|
|
|
|
|
Проверете панела "Дневник на събитията", за да видите дали някое събитие е отнело повече от 15 ms:
|
|
|
|
|
|
|
|
|
|
|
|
✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви тесни места. Кой е най-бавно зареждащият се ресурс? Най-бързият?
|
|
|
|
|
|
## Проверки за профилиране
|
|
|
|
|
|
Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади при пускането му в продукция.
|
|
|
|
|
|
**Размери на ресурсите**: Уебът стана "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения.
|
|
|
|
|
|
✅ Разгледайте [Интернет архива](https://httparchive.org/reports/page-weight) за исторически преглед на теглото на страниците и още.
|
|
|
|
|
|
Добра практика е да се уверите, че вашите изображения са оптимизирани и доставени в правилния размер и резолюция за вашите потребители.
|
|
|
|
|
|
**Обхождане на DOM**: Браузърът трябва да изгради своя модел на документния обект (DOM) въз основа на кода, който пишете, така че е в интерес на добрата производителност на страницата да поддържате таговете минимални, като използвате и стилизирате само това, което страницата изисква. Например, излишният CSS, свързан със страницата, може да бъде оптимизиран; стилове, които трябва да се използват само на една страница, не е необходимо да бъдат включени в основния стилов файл.
|
|
|
|
|
|
**JavaScript**: Всеки JavaScript разработчик трябва да следи за "скриптове, блокиращи рендирането", които трябва да бъдат заредени, преди останалата част от DOM да може да бъде обходена и нарисувана в браузъра. Помислете за използването на `defer` с вашите вградени скриптове (както е направено в модула Terrarium).
|
|
|
|
|
|
✅ Изпробвайте някои сайтове на [уебсайт за тестване на скорост](https://www.webpagetest.org/), за да научите повече за общите проверки, които се извършват за определяне на производителността на сайта.
|
|
|
|
|
|
Сега, когато имате представа как браузърът рендира ресурсите, които му изпращате, нека разгледаме последните няколко неща, които трябва да направите, за да завършите вашето разширение:
|
|
|
|
|
|
### Създайте функция за изчисляване на цвета
|
|
|
|
|
|
Работейки в `/src/index.js`, добавете функция, наречена `calculateColor()` след серията от `const` променливи, които зададохте, за да получите достъп до DOM:
|
|
|
|
|
|
```JavaScript
|
|
|
function calculateColor(value) {
|
|
|
let co2Scale = [0, 150, 600, 750, 800];
|
|
|
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
|
|
|
|
|
let closestNum = co2Scale.sort((a, b) => {
|
|
|
return Math.abs(a - value) - Math.abs(b - value);
|
|
|
})[0];
|
|
|
console.log(value + ' is closest to ' + closestNum);
|
|
|
let num = (element) => element > closestNum;
|
|
|
let scaleIndex = co2Scale.findIndex(num);
|
|
|
|
|
|
let closestColor = colors[scaleIndex];
|
|
|
console.log(scaleIndex, closestColor);
|
|
|
|
|
|
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Какво се случва тук? Подавате стойност (интензивността на въглерода) от API извикването, което завършихте в последния урок, и след това изчислявате колко близка е нейната стойност до индекса, представен в масива с цветове. След това изпращате тази най-близка цветова стойност към chrome runtime.
|
|
|
|
|
|
Chrome.runtime има [API](https://developer.chrome.com/extensions/runtime), което обработва всякакви фонови задачи, и вашето разширение използва това:
|
|
|
|
|
|
> "Използвайте chrome.runtime API, за да извлечете фоновата страница, да върнете подробности за манифеста и да слушате и отговаряте на събития в жизнения цикъл на приложението или разширението. Можете също така да използвате този API, за да конвертирате относителния път на URL адресите в напълно квалифицирани URL адреси."
|
|
|
|
|
|
✅ Ако разработвате това браузърно разширение за Edge, може да ви изненада, че използвате chrome API. По-новите версии на браузъра Edge работят на браузърния енджин Chromium, така че можете да използвате тези инструменти.
|
|
|
|
|
|
> Забележка: ако искате да профилирате браузърно разширение, стартирайте инструментите за разработчици от самото разширение, тъй като то е отделен браузърен екземпляр.
|
|
|
|
|
|
### Задайте цвят по подразбиране за иконата
|
|
|
|
|
|
Сега, във функцията `init()`, задайте иконата да бъде обикновено зелена в началото, като отново извикате действието `updateIcon` на chrome:
|
|
|
|
|
|
```JavaScript
|
|
|
chrome.runtime.sendMessage({
|
|
|
action: 'updateIcon',
|
|
|
value: {
|
|
|
color: 'green',
|
|
|
},
|
|
|
});
|
|
|
```
|
|
|
|
|
|
### Извикайте функцията, изпълнете извикването
|
|
|
|
|
|
След това извикайте функцията, която току-що създадохте, като я добавите към обещанието, върнато от C02Signal API:
|
|
|
|
|
|
```JavaScript
|
|
|
//let CO2...
|
|
|
calculateColor(CO2);
|
|
|
```
|
|
|
|
|
|
И накрая, в `/dist/background.js`, добавете слушател за тези извиквания на фонови действия:
|
|
|
|
|
|
```JavaScript
|
|
|
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
|
|
if (msg.action === 'updateIcon') {
|
|
|
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
|
|
}
|
|
|
});
|
|
|
//borrowed from energy lollipop extension, nice feature!
|
|
|
function drawIcon(value) {
|
|
|
let canvas = document.createElement('canvas');
|
|
|
let context = canvas.getContext('2d');
|
|
|
|
|
|
context.beginPath();
|
|
|
context.fillStyle = value.color;
|
|
|
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
|
|
context.fill();
|
|
|
|
|
|
return context.getImageData(50, 50, 100, 100);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
В този код добавяте слушател за всякакви съобщения, идващи към мениджъра на фонови задачи. Ако се нарича 'updateIcon', следващият код се изпълнява, за да нарисува икона с правилния цвят, използвайки Canvas API.
|
|
|
|
|
|
✅ Ще научите повече за Canvas API в [уроците за космическата игра](../../6-space-game/2-drawing-to-canvas/README.md).
|
|
|
|
|
|
Сега, изградете отново вашето разширение (`npm run build`), обновете и стартирайте вашето разширение и наблюдавайте как цветът се променя. Добър момент ли е да излезете за малко или да измиете чиниите? Сега знаете!
|
|
|
|
|
|
Поздравления, създадохте полезно браузърно разширение и научихте повече за това как работи браузърът и как да профилирате неговата производителност.
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 Предизвикателство
|
|
|
|
|
|
Разгледайте някои уебсайтове с отворен код, които съществуват отдавна, и въз основа на тяхната история в GitHub, вижте дали можете да определите как са били оптимизирани през годините за производителност, ако изобщо. Кой е най-често срещаният проблем?
|
|
|
|
|
|
## Тест след лекцията
|
|
|
|
|
|
[Тест след лекцията](https://ff-quizzes.netlify.app/web/quiz/28)
|
|
|
|
|
|
## Преглед и самостоятелно обучение
|
|
|
|
|
|
Помислете за абониране за [бюлетин за производителност](https://perf.email/).
|
|
|
|
|
|
Разгледайте някои от начините, по които браузърите оценяват уеб производителността, като разгледате разделите за производителност в техните уеб инструменти. Намирате ли някакви съществени разлики?
|
|
|
|
|
|
## Задание
|
|
|
|
|
|
[Анализирайте сайт за производителност](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**Отказ от отговорност**:
|
|
|
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод. |
