17 KiB

Raw Permalink Blame History

Projekt rozšírenia prehliadača, časť 3: Naučte sa o pozadí úloh a výkone

Premýšľali ste niekedy nad tým, prečo niektoré rozšírenia prehliadača pôsobia svižne a pohotovo, zatiaľ čo iné sú pomalé? Tajomstvo spočíva v tom, čo sa deje v zákulisí. Zatiaľ čo používatelia klikajú na rozhranie vášho rozšírenia, na pozadí prebieha celý svet procesov, ktoré ticho spravujú načítavanie údajov, aktualizácie ikon a systémové zdroje.

Toto je naša posledná lekcia zo série o rozšíreniach prehliadača a naučíme sa, ako zabezpečiť hladký chod vášho sledovača uhlíkovej stopy. Pridáte dynamické aktualizácie ikon a naučíte sa, ako identifikovať problémy s výkonom skôr, než sa stanú problémom. Je to ako doladenie pretekárskeho auta - malé optimalizácie môžu mať obrovský vplyv na to, ako všetko funguje.

Keď skončíme, budete mať vyleštené rozšírenie a pochopíte princípy výkonu, ktoré odlišujú dobré webové aplikácie od skvelých. Poďme sa ponoriť do sveta optimalizácie prehliadača.

Kvíz pred prednáškou

Prednáškový kvíz

Úvod

V našich predchádzajúcich lekciách ste vytvorili formulár, pripojili ho k API a zvládli asynchrónne načítavanie údajov. Vaše rozšírenie sa pekne formuje.

Teraz musíme pridať posledné úpravy - napríklad zmenu farby ikony rozšírenia na základe údajov o uhlíkovej stope. Pripomína mi to, ako NASA musela optimalizovať každý systém na vesmírnej lodi Apollo. Nemohli si dovoliť žiadne zbytočné cykly alebo pamäť, pretože na výkone záviseli životy. Aj keď naše rozšírenie prehliadača nie je až tak kritické, platia rovnaké princípy - efektívny kód vytvára lepšie používateľské zážitky.

Základy webového výkonu

Keď váš kód beží efektívne, ľudia môžu cítiť rozdiel. Poznáte ten moment, keď sa stránka načíta okamžite alebo animácia plynie hladko? To je práca dobrého výkonu.

Výkon nie je len o rýchlosti - je to o vytváraní webových zážitkov, ktoré pôsobia prirodzene namiesto nemotorných a frustrujúcich. V raných dňoch výpočtovej techniky mala Grace Hopper na svojom stole nanosekundu (kus drôtu dlhý asi stopu), aby ukázala, ako ďaleko svetlo cestuje za jednu miliardtinu sekundy. Bol to jej spôsob, ako vysvetliť, prečo každý mikrosekunda záleží v počítačoch. Poďme preskúmať detektívne nástroje, ktoré vám pomôžu zistiť, čo spomaľuje veci.

"Výkon webových stránok je o dvoch veciach: ako rýchlo sa stránka načíta a ako rýchlo na nej beží kód." -- Zack Grossbart

Téma, ako urobiť vaše webové stránky neuveriteľne rýchle na všetkých druhoch zariadení, pre všetkých druhov používateľov, v všetkých druhoch situácií, je neprekvapivo rozsiahla. Tu sú niektoré body, ktoré treba mať na pamäti pri budovaní štandardného webového projektu alebo rozšírenia prehliadača.

Prvým krokom pri optimalizácii vašej stránky je pochopenie toho, čo sa vlastne deje pod kapotou. Našťastie váš prehliadač má výkonné detektívne nástroje zabudované priamo v sebe.

Ak chcete otvoriť Nástroje pre vývojárov v Edge, kliknite na tri bodky v pravom hornom rohu, potom prejdite na Viac nástrojov > Nástroje pre vývojárov. Alebo použite klávesovú skratku: Ctrl + Shift + I na Windows alebo Option + Command + I na Macu. Keď ste tam, kliknite na kartu Výkon - tu budete robiť svoje vyšetrovanie.

Tu je vaša detektívna sada na výkon:

Otvorte Nástroje pre vývojárov (budete ich používať neustále ako vývojár!)
Prejdite na kartu Výkon - myslite na to ako na fitness tracker vašej webovej aplikácie
Stlačte tlačidlo Záznam a sledujte svoju stránku v akcii
Študujte výsledky, aby ste zistili, čo spomaľuje veci

Vyskúšajme si to. Otvorte webovú stránku (Microsoft.com funguje dobre na tento účel) a kliknite na tlačidlo 'Záznam'. Teraz obnovte stránku a sledujte, ako profiler zachytáva všetko, čo sa deje. Keď zastavíte nahrávanie, uvidíte podrobný rozpis toho, ako prehliadač 'skriptuje', 'vykresľuje' a 'maľuje' stránku. Pripomína mi to, ako riadiace stredisko monitoruje každý systém počas štartu rakety - získate údaje v reálnom čase o tom, čo sa presne deje a kedy.

✅ Dokumentácia Microsoftu obsahuje množstvo ďalších podrobností, ak sa chcete ponoriť hlbšie.

Tip: Pred testovaním vymažte vyrovnávaciu pamäť prehliadača, aby ste videli, ako vaša stránka funguje pre návštevníkov, ktorí ju navštívia prvýkrát - zvyčajne je to dosť odlišné od opakovaných návštev!

Vyberte prvky časovej osi profilu, aby ste priblížili udalosti, ktoré sa dejú počas načítania vašej stránky.

Získajte snímku výkonu vašej stránky výberom časti časovej osi profilu a pozrite si panel so súhrnom:

Skontrolujte panel denníka udalostí, aby ste zistili, či nejaká udalosť trvala dlhšie ako 15 ms:

✅ Spoznajte svoj profiler! Otvorte nástroje pre vývojárov na tejto stránke a zistite, či existujú nejaké úzke miesta. Ktorý asset sa načítava najpomalšie? Najrýchlejšie?

Na čo sa zamerať pri profilovaní

Spustenie profileru je len začiatok - skutočná zručnosť spočíva v tom, vedieť, čo vám tie farebné grafy vlastne hovoria. Nebojte sa, naučíte sa ich čítať. Skúsení vývojári sa naučili rozpoznať varovné signály skôr, než sa stanú plnohodnotnými problémami.

Poďme hovoriť o obvyklých podozrivých - problémoch s výkonom, ktoré sa často vkrádajú do webových projektov. Rovnako ako Marie Curie musela starostlivo monitorovať úrovne radiácie vo svojom laboratóriu, musíme sledovať určité vzory, ktoré naznačujú, že sa problémy blížia. Ich včasné zachytenie vám (a vašim používateľom) ušetrí veľa frustrácie.

Veľkosti assetov: Webové stránky sa v priebehu rokov stávajú "ťažšími" a veľa tejto extra váhy pochádza z obrázkov. Je to, akoby sme do našich digitálnych kufrov balili stále viac a viac.

✅ Pozrite si Internetový archív, aby ste videli, ako sa veľkosti stránok časom zväčšovali - je to dosť odhaľujúce.

Ako udržať vaše assety optimalizované:

Komprimujte obrázky! Moderné formáty ako WebP môžu dramaticky znížiť veľkosť súborov
Poskytujte správnu veľkosť obrázkov pre každé zariadenie - nie je potrebné posielať obrovské obrázky pre desktop na telefóny
Minimalizujte váš CSS a JavaScript - každý bajt sa počíta
Používajte lazy loading, aby sa obrázky stiahli iba vtedy, keď sa k nim používateľ skutočne posunie

Prechody DOM: Prehliadač musí vytvoriť svoj Document Object Model na základe kódu, ktorý napíšete, takže je v záujme dobrého výkonu stránky udržiavať značky minimálne, používať a štýlovať len to, čo stránka potrebuje. Napríklad nadbytočný CSS spojený so stránkou by mohol byť optimalizovaný; štýly, ktoré sa používajú iba na jednej stránke, nemusia byť zahrnuté v hlavnom štýle.

Kľúčové stratégie pre optimalizáciu DOM:

Minimalizujte počet HTML prvkov a úrovní vnorenia
Odstráňte nepoužívané pravidlá CSS a efektívne konsolidujte štýlové súbory
Organizujte CSS tak, aby sa načítalo len to, čo je potrebné pre každú stránku
Štruktúrujte HTML semanticky pre lepšie spracovanie prehliadačom

JavaScript: Každý vývojár JavaScriptu by mal sledovať 'render-blocking' skripty, ktoré sa musia načítať predtým, než môže byť zvyšok DOM prechádzaný a vykreslený do prehliadača. Zvážte použitie defer s vašimi inline skriptami (ako je to urobené v module Terrarium).

Moderné techniky optimalizácie JavaScriptu:

Používajte atribút defer na načítanie skriptov po parsovaní DOM
Implementujte rozdelenie kódu na načítanie iba potrebného JavaScriptu
Aplikujte lazy loading pre nekritickú funkcionalitu
Minimalizujte používanie ťažkých knižníc a frameworkov, ak je to možné

✅ Vyskúšajte niektoré stránky na webovej stránke na testovanie rýchlosti stránok, aby ste sa dozvedeli viac o bežných kontrolách, ktoré sa vykonávajú na určenie výkonu stránok.

Teraz, keď máte predstavu o tom, ako prehliadač vykresľuje assety, ktoré mu posielate, pozrime sa na posledné veci, ktoré musíte urobiť, aby ste dokončili svoje rozšírenie:

Vytvorte funkciu na výpočet farby

Teraz vytvoríme funkciu, ktorá premení číselné údaje na zmysluplné farby. Myslite na to ako na systém semaforu - zelená pre čistú energiu, červená pre vysokú uhlíkovú intenzitu.

Táto funkcia vezme údaje o CO2 z nášho API a určí, ktorá farba najlepšie reprezentuje environmentálny dopad. Je to podobné ako keď vedci používajú farebné kódovanie v tepelných mapách na vizualizáciu zložitých vzorov údajov - od teplôt oceánov po formovanie hviezd. Pridajme to do /src/index.js, hneď za tými premennými const, ktoré sme nastavili skôr:

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

Rozdelenie tejto šikovnej malej funkcie:

Nastaví dve polia - jedno pre úrovne CO2, druhé pre farby (zelená = čistá, hnedá = špinavá!)
Nájde najbližšiu zhodu s našou skutočnou hodnotou CO2 pomocou šikovného triedenia polí
Získa zodpovedajúcu farbu pomocou metódy findIndex()
Odošle správu na pozadí skriptu Chrome s našou vybranou farbou
Používa šablónové literály (tie spätné úvodzovky) na čistejšie formátovanie reťazcov
Udržuje všetko organizované pomocou deklarácií const

API chrome.runtime API je ako nervový systém vášho rozšírenia - spravuje všetku komunikáciu a úlohy na pozadí:

"Použite API chrome.runtime na získanie stránky na pozadí, vrátenie podrobností o manifeste a počúvanie a reagovanie na udalosti v životnom cykle aplikácie alebo rozšírenia. Toto API môžete tiež použiť na konverziu relatívnej cesty URL na plne kvalifikované URL."

Prečo je API Chrome Runtime tak užitočné:

Umožňuje rôznym častiam vášho rozšírenia komunikovať medzi sebou
Spravuje prácu na pozadí bez zamrznutia používateľského rozhrania
Riadi udalosti životného cyklu vášho rozšírenia
Uľahčuje odosielanie správ medzi skriptmi

✅ Ak vyvíjate toto rozšírenie pre prehliadač Edge, môže vás prekvapiť, že používate API chrome. Novšie verzie prehliadača Edge bežia na engine prehliadača Chromium, takže môžete využiť tieto nástroje.

Tip: Ak chcete profilovať rozšírenie prehliadača, spustite nástroje pre vývojárov priamo z rozšírenia, pretože ide o samostatnú inštanciu prehliadača. Tým získate prístup k špecifickým metrikám výkonu rozšírenia.

Nastavte predvolenú farbu ikony

Skôr než začneme načítavať skutočné údaje, dajme nášmu rozšíreniu východiskový bod. Nikto nemá rád pohľad na prázdnu alebo nefunkčne vyzerajúcu ikonu. Začneme zelenou farbou, aby používatelia vedeli, že rozšírenie funguje od okamihu, keď ho nainštalujú.

V funkcii init() nastavme túto predvolenú zelenú ikonu:

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

Čo táto inicializácia dosahuje:

Nastaví neutrálnu zelenú farbu ako predvolený stav
Poskytne okamžitú vizuálnu spätnú väzbu pri načítaní rozšírenia
Zavádza komunikačný vzor so skriptom na pozadí
Zabezpečuje, že používatelia vidia funkčné rozšírenie pred načítaním údajov

Zavolajte funkciu, vykonajte volanie

Teraz spojme všetko dohromady, aby sa pri príchode nových údajov o CO2 vaša ikona automaticky aktualizovala na správnu farbu. Je to ako spojiť posledný obvod v elektronickom zariadení - zrazu všetky jednotlivé komponenty fungujú ako jeden systém.

Pridajte tento riadok hneď po získaní údajov o CO2 z API:

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

Táto integrácia dosahuje:

Spojí tok údajov z API so systémom vizuálnych indikátorov
Spustí aktualizácie ikon automaticky pri príchode nových údajov
Zabezpečí vizuálnu spätnú väzbu v reálnom čase na základe aktuálnej uhlíkovej intenzity
Udržiava oddelenie zodpovedností medzi načítavaním údajov a logikou zobrazenia

A nakoniec, v /dist/background.js, pridajte poslucháča pre tieto volania akcií 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);
}

Čo tento skript na pozadí robí:

Počúva správy z vášho hlavného skriptu (ako recepčná prijímajúca hovory)
Spracováva požiadavky 'updateIcon' na zmenu ikony na paneli nástrojov
Vytvára nové ikony za behu pomocou Canvas API
Kreslí jednoduchý farebný kruh, ktorý zobrazuje aktuálnu uhlíkovú intenzitu
Aktualizuje váš panel nástrojov prehliadača s novou ikonou
Používa OffscreenCanvas pre hladký výkon (bez blokovania UI)

✅ Viac o Canvas API sa dozviete v [lekci Tu je zaujímavá detektívna misia: vyberte si niekoľko open source webových stránok, ktoré existujú už roky (napríklad Wikipedia, GitHub alebo Stack Overflow) a preskúmajte ich históriu commitov. Dokážete nájsť, kde vykonali zlepšenia výkonu? Aké problémy sa stále opakovali?

Váš prístup k vyšetrovaniu:

Vyhľadajte v commit správach slová ako "optimalizovať," "výkon" alebo "rýchlejšie"
Hľadajte vzory - opravujú stále rovnaké typy problémov?
Identifikujte bežné príčiny, ktoré spomaľujú webové stránky
Zdieľajte svoje zistenia - ostatní vývojári sa učia z príkladov z reálneho sveta

Kvíz po prednáške

Prehľad a samostatné štúdium

Zvážte prihlásenie sa na newsletter o výkone

Preskúmajte niektoré spôsoby, akými prehliadače hodnotia výkon webu, tým, že si prejdete záložky výkonu vo svojich webových nástrojoch. Nájdete nejaké zásadné rozdiely?

Zadanie

Analyzujte stránku z hľadiska výkonu

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

17 KiB Raw Permalink Blame History