26 KiB

Raw Blame History Unescape Escape

Пројекат проширења за претраживач, део 3: Сазнајте више о позадинским задацима и перформансама

Да ли сте се икада запитали шта чини да нека проширења за претраживач буду брза и одзивна, док друга делују споро? Тајна лежи у ономе што се дешава иза кулиса. Док корисници кликћу по интерфејсу вашег проширења, постоји читав свет позадинских процеса који тихо управљају преузимањем података, ажурирањем икона и системским ресурсима.

Ово је наша последња лекција у серији о проширењима за претраживач, и учинићемо да ваш пратилац угљеничног отиска ради глатко. Додаћете динамичка ажурирања икона и научити како да уочите проблеме са перформансама пре него што постану проблеми. То је као подешавање тркачког аутомобила - мале оптимизације могу направити огромну разлику у томе како све функционише.

Када завршимо, имаћете углачано проширење и разумети принципе перформанси који раздвајају добре веб апликације од одличних. Хајде да заронимо у свет оптимизације претраживача.

Квиз пре предавања

Увод

У претходним лекцијама, направили сте форму, повезали је са API-јем и савладали асинхроно преузимање података. Ваше проширење лепо добија свој облик.

Сада треба да додамо завршне детаље - као што је промена боје иконе проширења на основу података о угљенику. Ово ме подсећа на то како је NASA морала да оптимизује сваки систем на свемирском броду Apollo. Нису могли да приуште било какво губљење циклуса или меморије јер су животи зависили од перформанси. Иако наше проширење за претраживач није баш толико критично, исти принципи важе - ефикасан код ствара боље корисничко искуство.

Основе веб перформанси

Када ваш код ради ефикасно, људи могу осетити разлику. Знате онај тренутак када се страница учита тренутно или анимација тече глатко? То су добре перформансе на делу.

Перформансе нису само питање брзине - ради се о стварању веб искустава која делују природно, а не тромо и фрустрирајуће. У раним данима рачунарства, Grace Hopper је чувала наносекунду (комад жице дугачак око један метар) на свом столу како би показала колико далеко светлост путује у једној милијардити секунди. То је био њен начин да објасни зашто је сваки микросекунд важан у рачунарству. Хајде да истражимо алате за детективе који вам помажу да схватите шта успорава ствари.

"Перформансе веб странице се односе на две ствари: колико брзо се страница учитава и колико брзо код на њој ради." -- Zack Grossbart

Тема о томе како учинити ваше веб странице изузетно брзим на свим врстама уређаја, за све врсте корисника, у свим врстама ситуација, није изненађујуће обимна. Ево неких тачака које треба имати на уму док градите стандардни веб пројекат или проширење за претраживач.

Први корак у оптимизацији ваше странице је разумевање онога што се заправо дешава "испод хаубе". Срећом, ваш претраживач долази са моћним алатима за детективе који су уграђени.

Да бисте отворили Developer Tools у Edge-у, кликните на три тачке у горњем десном углу, а затим идите на More Tools > Developer Tools. Или користите пречицу на тастатури: Ctrl + Shift + I на Windows-у или Option + Command + I на Mac-у. Када сте тамо, кликните на картицу Performance - ту ћете вршити своје истраживање.

Ево вашег детективског алата за перформансе:

Отворите Developer Tools (користићете их стално као програмер!)
Идите на картицу Performance - замислите је као ваш фитнес трацкер за веб апликације
Притисните дугме Record и посматрајте вашу страницу у акцији
Проучите резултате да бисте уочили шта успорава ствари

Хајде да пробамо ово. Отворите неку веб страницу (Microsoft.com добро функционише за ово) и кликните на дугме 'Record'. Сада освежите страницу и посматрајте како профајлер снима све што се дешава. Када зауставите снимање, видећете детаљан преглед како претраживач 'скриптује', 'рендерује' и 'црта' страницу. Ово ме подсећа на то како контролни центар прати сваки систем током лансирања ракете - добијате податке у реалном времену о томе шта се тачно дешава и када.

✅ Microsoft документација има много више детаља ако желите да дубље истражите.

Савет: Очистите кеш претраживача пре тестирања да бисте видели како ваша страница ради за посетиоце који је први пут посећују - обично је то прилично другачије од поновних посета!

Изаберите елементе временске линије профила да бисте зумирали догађаје који се дешавају док се ваша страница учитава.

Добијте снимак перформанси ваше странице тако што ћете изабрати део временске линије профила и погледати панел са резимеом:

Проверите панел Event Log да видите да ли је неки догађај трајао дуже од 15 ms:

✅ Упознајте свој профајлер! Отворите алатке за програмере на овој страници и видите да ли постоје неке уске грла. Који је ресурс најспорији за учитавање? Који је најбржи?

На шта обратити пажњу приликом профајлирања

Покретање профајлера је само почетак - права вештина је знати шта вам те шарене табеле заправо говоре. Не брините, ускоро ћете се навићи да их читате. Искусни програмери су научили да уоче знаке упозорења пре него што постану потпуни проблеми.

Хајде да разговарамо о уобичајеним осумњиченима - проблемима са перформансама који имају тенденцију да се увуку у веб пројекте. Као што је Marie Curie морала пажљиво да прати нивое радијације у својој лабораторији, ми морамо пазити на одређене обрасце који указују на проблеме у настајању. Рано откривање ових проблема ће вам уштедети (и вашим корисницима) много фрустрација.

Величине ресурса: Веб странице постају све "тежи" током година, а велики део те додатне тежине долази од слика. Као да смо почели да пакујемо све више и више у наше дигиталне кофере.

✅ Погледајте Internet Archive да видите како су величине страница расле током времена - прилично је откривајуће.

Ево како да оптимизујете своје ресурсе:

Компресујте те слике! Модерни формати као што је WebP могу значајно смањити величину датотека
Сервирајте праву величину слике за сваки уређај - нема потребе да шаљете огромне слике за десктоп на телефоне
Минимизујте ваш CSS и JavaScript - сваки бајт је важан
Користите лењо учитавање тако да се слике преузимају само када корисници заправо дођу до њих

DOM обиласци: Претраживач мора да изгради свој Document Object Model на основу кода који пишете, па је у интересу добрих перформанси странице да држите своје тагове минималним, користећи и стилизујући само оно што страница захтева. На пример, вишак CSS-а повезаног са страницом може бити оптимизован; стилови који треба да се користе само на једној страници не морају бити укључени у главни стилски лист.

Кључне стратегије за оптимизацију DOM-а:

Смањите број HTML елемената и нивоа угњежђивања
Уклоните неискоришћена CSS правила и ефикасно консолидујте стилске листове
Организујте CSS да учитава само оно што је потребно за сваку страницу
Структурирајте HTML семантички за боље парсирање претраживача

JavaScript: Сваки JavaScript програмер треба да пази на скрипте које блокирају рендеровање и које морају бити учитане пре него што остатак DOM-а може бити обрађен и приказан у претраживачу. Размислите о коришћењу defer са вашим уграђеним скриптама (као што је урађено у модулу Terrarium).

Модерне технике оптимизације JavaScript-а:

Користите атрибут defer за учитавање скрипти након парсирања DOM-а
Примените раздвајање кода за учитавање само неопходног JavaScript-а
Користите лењо учитавање за нефункционалне функције
Минимизујте употребу тешких библиотека и оквира кад год је то могуће

✅ Испробајте неке странице на Site Speed Test веб страници да бисте сазнали више о уобичајеним проверама које се обављају ради утврђивања перформанси странице.

Сада када имате идеју о томе како претраживач рендерује ресурсе које му шаљете, хајде да погледамо последње ствари које треба да урадите да бисте завршили своје проширење:

Направите функцију за израчунавање боје

Сада ћемо направити функцију која претвара нумеричке податке у значајне боје. Замислите то као систем семафора - зелено за чисту енергију, црвено за високу угљеничну интензивност.

Ова функција ће узети CO2 податке из нашег API-ја и одредити која боја најбоље представља утицај на животну средину. Слично је томе како научници користе боје у топлотним мапама за визуализацију сложених образаца података - од температура океана до формирања звезда. Додајмо ово у /src/index.js, одмах након оних const променљивих које смо раније поставили:

function calculateColor(value) {
	// Define CO2 intensity scale (grams per kWh)
	const co2Scale = [0, 150, 600, 750, 800];
	// Corresponding colors from green (clean) to dark brown (high carbon)
	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	// Find the closest scale value to our input
	const closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	
	console.log(`${value} is closest to ${closestNum}`);
	
	// Find the index for color mapping
	const num = (element) => element > closestNum;
	const scaleIndex = co2Scale.findIndex(num);

	const closestColor = colors[scaleIndex];
	console.log(scaleIndex, closestColor);

	// Send color update message to background script
	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}

Хајде да разложимо ову паметну малу функцију:

Поставља два низа - један за нивое CO2, други за боје (зелено = чисто, браон = прљаво!)
Проналази најближе подударање са нашим стварним CO2 вредностима користећи паметно сортирање низа
Проналази одговарајућу боју користећи метод findIndex()
Шаље поруку Chrome-овом позадинском скрипту са изабраном бојом
Користи шаблонске литерале (оне обрнуте наводнике) за чистије форматирање стринга
Организује све са const декларацијама

chrome.runtime API је као нервни систем вашег проширења - он управља свом комуникацијом и задацима иза кулиса:

"Користите chrome.runtime API за преузимање позадинске странице, враћање детаља о манифесту и слушање и реаговање на догађаје у животном циклусу апликације или проширења. Такође можете користити овај API за конвертовање релативне путање URL-ова у потпуно квалификоване URL-ове."

Зашто је Chrome Runtime API тако користан:

Омогућава различитим деловима вашег проширења да комуницирају једни са другима
Управља позадинским радом без замрзавања корисничког интерфејса
Руководи догађајима животног циклуса вашег проширења
Олакшава размену порука између скрипти

✅ Ако развијате ово проширење за Edge, можда ће вас изненадити да користите Chrome API. Новије верзије Edge претраживача раде на Chromium претраживачком мотору, тако да можете искористити ове алате.

Савет: Ако желите да профајлирате проширење за претраживач, покрените алатке за програмере из самог проширења, јер је оно свој засебан претраживачки инстанц. Ово вам даје приступ специфичним метрикама перформанси проширења.

Поставите подразумевану боју иконе

Пре него што почнемо са преузимањем стварних података, хајде да дамо нашем проширењу почетну тачку. Нико не воли да гледа празну или покварену икону. Почећемо са зеленом бојом како би корисници знали да проширење ради од тренутка када га инсталирају.

У вашој init() функцији, хајде да поставимо ту подразумевану зелену икону:

chrome.runtime.sendMessage({
	action: 'updateIcon',
	value: {
		color: 'green',
	},
});

Шта ова иницијализација постиже:

Поставља неутралну зелену боју као подразумевано стање
Обезбеђује тренутну визуелну повратну информацију када се проширење учита
Успоставља образац комуникације са позадинском скриптом
Осигурава да корисници виде функционално проширење пре него што се подаци учитају

Позовите функцију, извршите позив

Сада хајде да све повежемо тако да када стигну свежи CO2 подаци, ваша икона аутоматски ажурира одговарајућу боју. То је као повезивање последњег круга у електронском уређају - одједном сви појединачни делови раде као један систем.

Додајте ову линију одмах након што добијете CO2 податке из API-ја:

// After retrieving CO2 data from the API
// let CO2 = data.data[0].intensity.actual;
calculateColor(CO2);

Шта ова интеграција постиже:

Повезује ток података из API-ја са системом визуелних индикатора
Покреће ажурирања икона аутоматски када стигну нови подаци
Обезбеђује визуелну повратну информацију у реалном времену на основу тренутне угљеничне интензивности
Одржава раздвајање одговорности између преузимања података и логике приказа

И на крају, у /dist/background.js, додајте слушаоца за ове позадинске акције:

// Listen for messages from the content script
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === 'updateIcon') {
		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
	}
});

// Draw dynamic icon using Canvas API
// Borrowed from energy lollipop extension - nice feature!
function drawIcon(value) {
	// Create an offscreen canvas for better performance
	const canvas = new OffscreenCanvas(200, 200);
	const context = canvas.getContext('2d');

	// Draw a colored circle representing carbon intensity
	context.beginPath();
	context.fillStyle = value.color;
	context.arc(100, 100, 50, 0, 2 * Math.PI);
	context.fill();

	// Return the image data for the browser icon
	return context.getImageData(50, 50, 100, 100);
}

Шта ова позадинска скрипта ради:

Слуша поруке из ваше главне скрипте (ка Ево занимљиве детективске мисије: изаберите неколико веб-сајтова отвореног кода који постоје годинама (попут Википедије, GitHub-а или Stack Overflow-а) и истражите њихову историју измена. Можете ли уочити где су направили побољшања у перформансама? Који проблеми су се стално појављивали?

Ваш приступ истраживању:

Претражите поруке измена за речи као што су "оптимизуј," "перформансе," или "брже"
Потражите обрасце - да ли стално решавају исте типове проблема?
Идентификујте уобичајене узроке који успоравају веб-сајтове
Поделите оно што откријете - други програмери уче из примера из стварног света

Квиз након предавања

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

Размислите о пријављивању на билтен о перформансама

Истражите неке од начина на које претраживачи процењују веб перформансе тако што ћете прегледати картице за перформансе у њиховим веб алатима. Да ли налазите неке значајне разлике?

Задатак

Анализирајте сајт за перформансе

Одрицање од одговорности:
Овај документ је преведен помоћу услуге за превођење вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

26 KiB Raw Blame History Unescape Escape