17 KiB
Проект за браузърно разширение, част 3: Научете за фоновите задачи и производителността
Предварителен тест
Въведение
В последните два урока от този модул научихте как да създадете форма и зона за показване на данни, извлечени от API. Това е много стандартен начин за създаване на уеб присъствие в интернет. Дори научихте как да обработвате асинхронно извличане на данни. Вашето браузърно разширение е почти готово.
Остава да управлявате някои фонови задачи, включително обновяване на цвета на иконата на разширението, така че това е чудесен момент да поговорим за това как браузърът управлява този вид задачи. Нека разгледаме тези задачи в контекста на производителността на вашите уеб ресурси, докато ги изграждате.
Основи на уеб производителността
"Производителността на уебсайта се отнася до две неща: колко бързо се зарежда страницата и колко бързо работи кодът на нея." -- Зак Гросбарт
Темата за това как да направите вашите уебсайтове изключително бързи на всякакви устройства, за всякакви потребители и в всякакви ситуации, е, разбира се, обширна. Ето някои точки, които трябва да имате предвид, докато изграждате стандартен уеб проект или браузърно разширение.
Първото нещо, което трябва да направите, за да гарантирате, че вашият сайт работи ефективно, е да съберете данни за неговата производителност. Първото място за това е инструментите за разработчици на вашия уеб браузър. В Edge можете да изберете бутона "Настройки и още" (иконата с три точки в горния десен ъгъл на браузъра), след това да навигирате до Още инструменти > Инструменти за разработчици и да отворите раздела Производителност. Можете също да използвате клавишните комбинации Ctrl + Shift + I на Windows или Option + Command + I на Mac, за да отворите инструментите за разработчици.
Разделът Производителност съдържа инструмент за профилиране. Отворете уебсайт (например https://www.microsoft.com) и кликнете върху бутона 'Запис', след това обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скрипт', 'рендиране' и 'рисуване' на сайта:
✅ Посетете Microsoft документацията за панела Производителност в Edge
Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си
Изберете елементи от времевата линия на профила, за да увеличите събитията, които се случват, докато вашата страница се зарежда.
Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и погледнете панела за обобщение:
Проверете панела за дневник на събитията, за да видите дали някое събитие е отнело повече от 15 ms:
✅ Опознайте вашия профайлер! Отворете инструментите за разработчици на този сайт и вижте дали има някакви затруднения. Кой е най-бавно зареждащият се ресурс? Най-бързият?
Проверки за профилиране
Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади, когато дойде време за внедряване в продукция.
Размери на ресурсите: Уебът е станал "по-тежък" и следователно по-бавен през последните години. Част от тази тежест се дължи на използването на изображения.
✅ Разгледайте Интернет архива за исторически поглед върху теглото на страниците и още.
Добра практика е да се уверите, че вашите изображения са оптимизирани и доставени в правилния размер и резолюция за вашите потребители.
DOM обходи: Браузърът трябва да изгради своя модел на обектите на документа (DOM) въз основа на кода, който пишете, така че е в интерес на добрата производителност на страницата да поддържате вашите тагове минимални, използвайки и стилизирайки само това, което страницата изисква. В тази връзка, излишният CSS, свързан със страницата, може да бъде оптимизиран; стилове, които трябва да се използват само на една страница, не е необходимо да бъдат включени в основния стилов файл, например.
JavaScript: Всеки JavaScript разработчик трябва да следи за скриптове, които блокират рендирането и трябва да бъдат заредени преди останалата част от DOM да може да бъде обходена и нарисувана в браузъра. Помислете за използване на defer с вашите вътрешни скриптове (както е направено в модула Terrarium).
✅ Опитайте някои сайтове на уебсайт за тест на скоростта на сайта, за да научите повече за общите проверки, които се правят за определяне на производителността на сайта.
Сега, когато имате представа как браузърът рендира ресурсите, които му изпращате, нека разгледаме последните няколко неща, които трябва да направите, за да завършите вашето разширение:
Създайте функция за изчисляване на цвета
Работейки в /src/index.js, добавете функция, наречена calculateColor() след серията от const променливи, които сте задали, за да получите достъп до DOM:
function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
let closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(value + ' is closest to ' + closestNum);
let num = (element) => element > closestNum;
let scaleIndex = co2Scale.findIndex(num);
let closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
Какво се случва тук? Вие подавате стойност (интензивността на въглерода) от API извикването, което завършихте в последния урок, и след това изчислявате колко близка е нейната стойност до индекса, представен в масива с цветове. След това изпращате тази най-близка цветова стойност към chrome runtime.
Chrome.runtime има API, който обработва всякакви фонови задачи, и вашето разширение го използва:
"Използвайте chrome.runtime API, за да извлечете фоновата страница, да върнете подробности за манифеста и да слушате и отговаряте на събития в жизнения цикъл на приложението или разширението. Можете също така да използвате този API, за да конвертирате относителния път на URL адресите в напълно квалифицирани URL адреси."
✅ Ако разработвате това браузърно разширение за Edge, може да ви изненада, че използвате chrome API. Новите версии на браузъра Edge работят на браузърния двигател Chromium, така че можете да използвате тези инструменти.
Забележка: ако искате да профилирате браузърно разширение, стартирайте инструментите за разработчици от самото разширение, тъй като то е отделен браузърен екземпляр.
Задайте цвят по подразбиране за иконата
Сега, във функцията init(), задайте иконата да бъде общо зелена в началото, като отново извикате действието updateIcon на chrome:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
Извикайте функцията, изпълнете извикването
След това извикайте функцията, която току-що създадохте, като я добавите към обещанието, върнато от API за C02Signal:
//let CO2...
calculateColor(CO2);
И накрая, в /dist/background.js, добавете слушател за тези извиквания на фонови действия:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = new OffscreenCanvas(200, 200);
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}
В този код добавяте слушател за всякакви съобщения, идващи към мениджъра на фонови задачи. Ако е наречен 'updateIcon', тогава следващият код се изпълнява, за да нарисува икона с правилния цвят, използвайки Canvas API.
✅ Ще научите повече за Canvas API в уроците за космическата игра.
Сега, изградете отново вашето разширение (npm run build), обновете и стартирайте вашето разширение и наблюдавайте промяната на цвета. Добър момент ли е да направите някоя задача или да измиете съдовете? Сега знаете!
Поздравления, създадохте полезно браузърно разширение и научихте повече за това как работи браузърът и как да профилирате неговата производителност.
🚀 Предизвикателство
Разгледайте някои уебсайтове с отворен код, които съществуват отдавна, и въз основа на тяхната история в GitHub, вижте дали можете да определите как са били оптимизирани през годините за производителност, ако изобщо. Кой е най-често срещаният проблем?
Тест след лекцията
Преглед и самостоятелно обучение
Обмислете да се абонирате за бюлетин за производителност
Разгледайте някои от начините, по които браузърите оценяват уеб производителността, като прегледате разделите за производителност в техните уеб инструменти. Намирате ли някакви значителни разлики?
Задание
Анализирайте сайт за производителност
Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.