Web-Dev-For-Beginners/translations/cs/5-browser-extension/3-background-tasks-and-performance

Projekt rozšíření pro prohlížeč, část 3: Naučte se o úlohách na pozadí a výkonu

Přemýšleli jste někdy, proč některá rozšíření pro prohlížeče působí svižně a pohotově, zatímco jiná jsou pomalá? Tajemství spočívá v tom, co se děje v zákulisí. Zatímco uživatelé klikají na rozhraní vašeho rozšíření, na pozadí probíhá celá řada procesů, které tiše spravují načítání dat, aktualizace ikon a systémové zdroje.

Toto je naše poslední lekce v sérii o rozšířeních pro prohlížeče a naučíme vás, jak zajistit hladký chod vašeho sledovače uhlíkové stopy. Přidáte dynamické aktualizace ikon a naučíte se, jak odhalit problémy s výkonem dříve, než se stanou skutečným problémem. Je to jako ladění závodního auta – malé optimalizace mohou mít obrovský vliv na to, jak vše funguje.

Až skončíme, budete mít vyleštěné rozšíření a pochopíte principy výkonu, které odlišují dobré webové aplikace od těch skvělých. Pojďme se ponořit do světa optimalizace prohlížečů.

Kvíz před lekcí

Kvíz před lekcí

Úvod

V našich předchozích lekcích jste vytvořili formulář, připojili ho k API a zvládli asynchronní načítání dat. Vaše rozšíření se pěkně formuje.

Teď je čas přidat poslední úpravy – například změnu barvy ikony rozšíření na základě uhlíkových dat. Připomíná mi to, jak NASA musela optimalizovat každý systém na kosmické lodi Apollo. Nemohli si dovolit žádné zbytečné cykly nebo paměť, protože na výkonu závisely životy. I když naše rozšíření pro prohlížeč není tak kritické, platí stejné principy – efektivní kód vytváří lepší uživatelské zážitky.

Základy výkonu webu

Když váš kód běží efektivně, lidé to mohou skutečně cítit. Znáte ten okamžik, kdy se stránka načte okamžitě nebo animace plynule probíhá? To je práce dobrého výkonu.

Výkon není jen o rychlosti – jde o vytváření webových zážitků, které působí přirozeně, místo aby byly těžkopádné a frustrující. V raných dobách výpočetní techniky si Grace Hopper slavně nechávala na stole nanosekundu (kus drátu asi 30 cm dlouhý), aby ukázala, jak daleko světlo urazí za jednu miliardtinu sekundy. Byla to její způsob, jak vysvětlit, proč na každé mikrosekundě v počítačích záleží. Pojďme prozkoumat nástroje, které vám pomohou zjistit, co zpomaluje věci.

"Výkon webových stránek je o dvou věcech: jak rychle se stránka načte a jak rychle na ní běží kód." -- Zack Grossbart

Téma, jak udělat vaše webové stránky bleskově rychlé na všech typech zařízení, pro všechny typy uživatelů, 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í pro prohlížeč.

Prvním krokem k optimalizaci vašeho webu je pochopení toho, co se skutečně děje pod povrchem. Naštěstí váš prohlížeč má výkonné nástroje pro detekci problémů přímo zabudované.

Chcete-li otevřít Nástroje pro vývojáře v Edge, klikněte na tři tečky v pravém horním rohu, poté přejděte na Další nástroje > Nástroje pro vývojáře. Nebo použijte klávesovou zkratku: Ctrl + Shift + I na Windows nebo Option + Command + I na Macu. Jakmile jste tam, klikněte na kartu Výkon – zde budete provádět své vyšetřování.

Vaše detektivní sada pro výkon:

• Otevřete Nástroje pro vývojáře (budete je jako vývojář používat neustále!)
• Přejděte na kartu Výkon – přemýšlejte o ní jako o fitness trackeru vašeho webového projektu
• Stiskněte tlačítko Záznam a sledujte svou stránku v akci
• Studujte výsledky, abyste zjistili, co věci zpomaluje

Vyzkoušejte to. Otevřete webovou stránku (Microsoft.com funguje dobře) a klikněte na tlačítko 'Záznam'. Nyní stránku obnovte a sledujte, jak profiler zachycuje vše, co se děje. Když zastavíte záznam, uvidíte podrobný rozpis toho, jak prohlížeč 'skriptuje', 'vykresluje' a 'maluje' stránku. Připomíná mi to, jak řídící středisko monitoruje každý systém během startu rakety – získáte data v reálném čase o tom, co se děje a kdy.

✅ Microsoft Dokumentace má spoustu dalších podrobností, pokud se chcete ponořit hlouběji.

Tip: Před testováním vymažte mezipaměť prohlížeče, abyste viděli, jak vaše stránka funguje pro návštěvníky poprvé – obvykle je to dost odlišné od opakovaných návštěv!

Vyberte prvky časové osy profilu, abyste přiblížili události, které se dějí během načítání stránky.

Získejte snímek výkonu vaší stránky výběrem části časové osy profilu a pohledem na souhrnný panel:

Zkontrolujte panel protokolu událostí, zda některá událost trvala déle než 15 ms:

✅ Seznamte se s profilerem! Otevřete nástroje pro vývojáře na této stránce a zjistěte, zda existují nějaké úzká místa. Jaký je nejpomaleji načítající se prvek? Nejrychlejší?

Na co se zaměřit při profilování

Spuštění profileru je jen začátek – skutečná dovednost spočívá v tom, vědět, co vám ty barevné grafy vlastně říkají. Nebojte se, naučíte se je číst. Zkušení vývojáři se naučili rozpoznat varovné signály dříve, než se z nich stanou plnohodnotné problémy.

Pojďme si povědět o obvyklých podezřelých – problémech s výkonem, které se často vkrádají do webových projektů. Stejně jako Marie Curie musela pečlivě sledovat úroveň radiace ve své laboratoři, musíme sledovat určité vzory, které naznačují, že se blíží problémy. Jejich včasné odhalení vám (a vašim uživatelům) ušetří spoustu frustrace.

Velikosti souborů: Webové stránky se v průběhu let staly "těžšími" a velká část této přidané váhy pochází z obrázků. Je to, jako bychom do našich digitálních kufrů cpali stále více a více.

✅ Podívejte se na Internet Archive, abyste viděli, jak se velikosti stránek v průběhu času zvětšily – je to docela poučné.

Jak udržet vaše soubory optimalizované:

• Komprimujte obrázky! Moderní formáty jako WebP mohou dramaticky snížit velikost souborů
• Posílejte správnou velikost obrázku pro každé zařízení – není třeba posílat obrovské obrázky pro desktop na telefony
• Minimalizujte váš CSS a JavaScript – každý bajt se počítá
• Používejte lazy loading, aby se obrázky stahovaly pouze tehdy, když uživatelé skutečně k nim posunou stránku

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 na minimu a používat a stylovat pouze to, co stránka potřebuje. Například nadbyteč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.

Klíčové strategie pro optimalizaci DOM:

• Minimalizujte počet HTML prvků a úrovní zanoření
• Odstraňte nepoužívané CSS pravidla a efektivně konsolidujte stylové soubory
• Organizujte CSS tak, aby se načítalo pouze to, co je potřeba pro každou stránku
• Strukturovat HTML semanticky pro lepší zpracování prohlížečem

JavaScript: Každý vývojář JavaScriptu by měl sledovat 'render-blocking' skripty, 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).

Moderní techniky optimalizace JavaScriptu:

• Používá atribut defer pro načítání skriptů po zpracování DOM
• Implementuje rozdělení kódu pro načítání pouze potřebného JavaScriptu
• Aplikuje lazy loading pro neklíčové funkce
• Minimalizuje použití těžkých knihoven a frameworků, pokud je to možné

✅ Vyzkoušejte některé stránky na webu pro testování rychlosti stránek, abyste se dozvěděli více o běžných kontrolách, které se provádějí pro určení výkonu stránky.

Nyní, když máte představu o tom, jak prohlížeč vykresluje soubory, které mu posíláte, podívejme se na posledních pár věcí, které musíte udělat, abyste dokončili své rozšíření:

Vytvořte funkci pro výpočet barvy

Nyní vytvoříme funkci, která převede číselná data na smysluplné barvy. Přemýšlejte o tom jako o systému semaforu – zelená pro čistou energii, červená pro vysokou uhlíkovou intenzitu.

Tato funkce vezme data o CO2 z našeho API a určí, která barva nejlépe reprezentuje dopad na životní prostředí. Je to podobné tomu, jak vědci používají barevné kódování v tepelných mapách k vizualizaci složitých datových vzorců – od teplot oceánů po formování hvězd. Přidejme to do /src/index.js, hned za ty const proměnné, které jsme nastavili dříve:

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 } });
}

Rozbor této chytré malé funkce:

• Nastaví dvě pole – jedno pro úrovně CO2, druhé pro barvy (zelená = čistá, hnědá = špinavá!)
• Najde nejbližší shodu s naší skutečnou hodnotou CO2 pomocí chytrého třídění pole
• Získá odpovídající barvu pomocí metody findIndex()
• Odešle zprávu na pozadí skriptu Chrome s vybranou barvou
• Používá šablonové literály (ty zpětné uvozovky) pro čistší formátování řetězců
• Udržuje vše organizované pomocí deklarací const

chrome.runtime API je jako nervový systém vašeho rozšíření – zpracovává veškerou komunikaci a úkoly na pozadí:

"Použijte API chrome.runtime k 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 k převodu relativní cesty URL na plně kvalifikované URL."

Proč je Chrome Runtime API tak užitečné:

• Umožňuje různým částem vašeho rozšíření komunikovat mezi sebou
• Zpracovává práci na pozadí bez zamrznutí uživatelského rozhraní
• Spravuje události životního cyklu vašeho rozšíření
• Usnadňuje předávání zpráv mezi skripty

✅ Pokud vyvíjíte toto rozšíření pro Edge, možná vás překvapí, že používáte API Chrome. Novější verze prohlížeče Edge běží na enginu Chromium, takže můžete využívat tyto nástroje.

Tip: Pokud chcete profilovat rozšíření pro prohlížeč, spusťte nástroje pro vývojáře přímo v rozšíření, protože to je samostatná instance prohlížeče. Tím získáte přístup k metrikám výkonu specifickým pro rozšíření.

Nastavte výchozí barvu ikony

Než začneme načítat skutečná data, dáme našemu rozšíření výchozí bod. Nikdo nemá rád pohled na prázdnou nebo rozbitou ikonu. Začneme zelenou barvou, aby uživatelé věděli, že rozšíření funguje od okamžiku, kdy ho nainstalují.

Ve vaší funkci init() nastavíme výchozí zelenou ikonu:

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

Co tato inicializace dosahuje:

• Nastaví neutrální zelenou barvu jako výchozí stav
• Poskytne okamžitou vizuální zpětnou vazbu při načítání rozšíření
• Zavede komunikační vzor se skriptem na pozadí
• Zajistí, že uživatelé uvidí funkční rozšíření před načtením dat

Zavolejte funkci, proveďte volání

Nyní vše propojujme tak, aby se při příchodu nových dat o CO2 vaše ikona automaticky aktualizovala na správnou barvu. Je to jako spojení posledního obvodu v elektronickém zařízení – najednou všechny jednotlivé komponenty fungují jako jeden systém.

Přidejte tento řádek hned poté, co získáte data o CO2 z API:

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

Co tato integrace dosahuje:

• Spojuje tok dat z API se systémem vizuálních indikátorů
• Automaticky spouští aktualizace ikon, když přijdou nová data
• Zajišťuje vizuální zpětnou vazbu v reálném čase na základě aktuální uhlíkové intenzity
• Udržuje oddělení odpovědností mezi načítáním dat a logikou zobrazení

A nakonec, v /dist/background.js, přidejte posluchač pro tyto volání akcí na pozadí:

// 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);
}

Co tento skript na pozadí dělá:

• Naslouchá zprávám z vašeho hlavního skriptu (jako recepční přijímající hovory)
• Zpracovává požadavky 'updateIcon' na změnu ikony na panelu nástrojů
• Vytváří nové ikony za běhu pomocí Canvas API
• Kreslí jednoduchý barevný kruh, který ukazuje aktuální uhlíkovou intenzitu
• Aktualizuje panel nástrojů prohlížeče s novou ikonou
• Používá OffscreenCanvas pro hladký výkon (bez blokování UI)

✅ O Canvas API se dozvíte více v lekcích Space Game.

Čas otestovat vaše rozšíření:

• Sestavte vše pomocí npm run build
• Znovu načtěte své rozšíření v prohlížeči (nezapomeňte na tento krok)
• Otevřete své rozšíření a sledujte, jak se ikona mě Tady je zajímavá detektivní mise: vyberte si několik open source webů, které existují už roky (například Wikipedia, GitHub nebo Stack Overflow), a prozkoumejte jejich historii commitů. Dokážete najít, kde provedli zlepšení výkonu? Jaké problémy se opakovaně objevovaly?

Váš přístup k vyšetřování:

• Hledejte v commit zprávách slova jako "optimalizace," "výkon" nebo "rychlejší"
• Sledujte vzory - opravují stále stejné typy problémů?
• Identifikujte běžné příčiny, které zpomalují weby
• Sdílejte své objevy - ostatní vývojáři se mohou poučit z příkladů z praxe

Kvíz po přednášce

Kvíz po přednášce

Recenze a samostudium

Zvažte přihlášení k odběru newsletteru o výkonu

Prozkoumejte některé způsoby, jak prohlížeče měří výkon webu, tím, že se podíváte na záložky výkonu v jejich webových nástrojích. Najdete nějaké zásadní rozdíly?

Zadání

Analyzujte výkon webu

---

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.