History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Unescape Escape

Проект за браузърно разширение, част 3: Научете за фонови задачи и производителност

Тест преди лекцията

Въведение

В последните два урока от този модул научихте как да създадете форма и зона за показване на данни, извлечени от API. Това е много стандартен начин за създаване на уеб присъствие. Дори научихте как да обработвате асинхронно извличане на данни. Вашето браузърно разширение е почти завършено.

Остава да управлявате някои фонови задачи, включително обновяване на цвета на иконата на разширението, така че това е чудесен момент да обсъдим как браузърът управлява този тип задачи. Нека разгледаме тези задачи в контекста на производителността на вашите уеб ресурси, докато ги изграждате.

Основи на уеб производителността

"Производителността на уебсайта се свежда до две неща: колко бързо се зарежда страницата и колко бързо работи кодът на нея." -- Зак Гросбарт

Темата за това как да направите вашите уебсайтове изключително бързи на всякакви устройства, за всякакви потребители и в различни ситуации, е, разбира се, обширна. Ето някои точки, които да имате предвид, докато изграждате стандартен уеб проект или браузърно разширение.

Първото нещо, което трябва да направите, за да се уверите, че вашият сайт работи ефективно, е да съберете данни за неговата производителност. Първото място, където можете да направите това, е в инструментите за разработчици на вашия уеб браузър. В Edge можете да изберете бутона "Настройки и още" (иконата с три точки в горния десен ъгъл на браузъра), след това да отидете на Още инструменти > Инструменти за разработчици и да отворите раздела "Производителност". Можете също да използвате клавишните комбинации Ctrl + Shift + I на Windows или Option + Command + I на Mac, за да отворите инструментите за разработчици.

Разделът "Производителност" съдържа инструмент за профилиране. Отворете уебсайт (например https://www.microsoft.com) и кликнете върху бутона "Запис", след което обновете сайта. Спрете записа по всяко време и ще можете да видите рутините, които се генерират за 'скрипт', 'рендиране' и 'рисуване' на сайта:

✅ Посетете документацията на Microsoft за панела "Производителност" в Edge.

Съвет: за да получите точни данни за времето за стартиране на вашия сайт, изчистете кеша на браузъра си.

Изберете елементи от времевата линия на профила, за да увеличите събитията, които се случват, докато страницата ви се зарежда.

Получете моментна снимка на производителността на вашата страница, като изберете част от времевата линия на профила и разгледате панела със сумарни данни:

Проверете панела "Дневник на събитията", за да видите дали някое събитие е отнело повече от 15 ms:

✅ Запознайте се с вашия инструмент за профилиране! Отворете инструментите за разработчици на този сайт и вижте дали има някакви тесни места. Кой е най-бавно зареждащият се ресурс? А най-бързият?

Проверки при профилиране

Като цяло, има някои "проблемни области", които всеки уеб разработчик трябва да следи, когато изгражда сайт, за да избегне неприятни изненади при внедряване в продукция.

Размери на ресурсите: Уебът стана "по-тежък" и съответно по-бавен през последните години. Част от това тегло се дължи на използването на изображения.

✅ Разгледайте Интернет архива за исторически преглед на теглото на страниците и още.

Добра практика е да се уверите, че изображенията ви са оптимизирани и доставени в правилния размер и резолюция за вашите потребители.

Обхождане на DOM: Браузърът трябва да изгради своя Document Object Model въз основа на кода, който пишете, така че в интерес на добрата производителност на страницата е да поддържате таговете минимални, като използвате и стилизирате само това, което е необходимо. Например, излишният 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.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 в уроците за космическата игра.

Сега, изградете отново вашето разширение (npm run build), обновете и стартирайте разширението си и наблюдавайте как цветът се променя. Добър момент ли е да излезете за малко или да измиете чиниите? Сега знаете!

Поздравления, създадохте полезно браузърно разширение и научихте повече за това как работи браузърът и как да профилирате неговата производителност.

🚀 Предизвикателство

Разгледайте някои отворени уебсайтове, които съществуват отдавна, и въз основа на тяхната история в GitHub, вижте дали можете да определите как са били оптимизирани през годините за производителност, ако изобщо са били. Коя е най-честата проблемна точка?

Тест след лекцията

Преглед и самостоятелно обучение

Обмислете да се абонирате за бюлетин за производителност.

Разгледайте някои от начините, по които браузърите оценяват уеб производителността, като прегледате разделите за производителност в техните уеб инструменти. Откривате ли някакви съществени разлики?

Задание

Анализирайте сайт за производителност

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

README.md Unescape Escape