12 KiB
Browser Extension Project Part 3: Alamin ang Tungkol sa Background Tasks at Performance
Pre-Lecture Quiz
Panimula
Sa huling dalawang aralin ng module na ito, natutunan mo kung paano gumawa ng form at display area para sa data na kinukuha mula sa isang API. Ito ay isang karaniwang paraan ng paglikha ng web presence sa web. Natutunan mo rin kung paano mag-handle ng asynchronous na pagkuha ng data. Halos tapos na ang iyong browser extension.
Ang natitira ay ang pamamahala ng ilang background tasks, kabilang ang pag-refresh ng kulay ng icon ng extension, kaya ito ay isang magandang pagkakataon upang pag-usapan kung paano pinamamahalaan ng browser ang ganitong uri ng gawain. Pag-isipan natin ang mga browser tasks na ito sa konteksto ng performance ng iyong web assets habang ginagawa mo ang mga ito.
Mga Pangunahing Kaalaman sa Web Performance
"Ang performance ng website ay tungkol sa dalawang bagay: kung gaano kabilis mag-load ang pahina, at kung gaano kabilis tumakbo ang code dito." -- Zack Grossbart
Ang paksa ng kung paano gawing napakabilis ang iyong mga website sa lahat ng uri ng device, para sa lahat ng uri ng user, sa lahat ng uri ng sitwasyon, ay hindi nakakagulat na malawak. Narito ang ilang mga punto na dapat tandaan habang gumagawa ka ng isang karaniwang web project o browser extension.
Ang unang bagay na kailangan mong gawin upang matiyak na ang iyong site ay tumatakbo nang mahusay ay ang mangolekta ng data tungkol sa performance nito. Ang unang lugar upang gawin ito ay sa developer tools ng iyong web browser. Sa Edge, maaari mong piliin ang "Settings and more" button (ang icon na tatlong tuldok sa kanang itaas ng browser), pagkatapos ay mag-navigate sa More Tools > Developer Tools at buksan ang Performance tab. Maaari mo ring gamitin ang keyboard shortcuts na Ctrl + Shift + I sa Windows o Option + Command + I sa Mac upang buksan ang developer tools.
Ang Performance tab ay naglalaman ng Profiling tool. Buksan ang isang website (subukan, halimbawa, https://www.microsoft.com) at i-click ang 'Record' button, pagkatapos ay i-refresh ang site. Itigil ang recording anumang oras, at makikita mo ang mga routines na nabuo upang 'script', 'render', at 'paint' ang site:
✅ Bisitahin ang Microsoft Documentation sa Performance panel sa Edge
Tip: upang makakuha ng tumpak na pagbabasa ng startup time ng iyong website, i-clear ang cache ng iyong browser
Piliin ang mga elemento ng profile timeline upang mag-zoom in sa mga event na nangyayari habang naglo-load ang iyong pahina.
Kumuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane:
Suriin ang Event Log pane upang makita kung mayroong anumang event na tumagal ng higit sa 15 ms:
✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung mayroong anumang bottlenecks. Ano ang pinakamabagal na asset na naglo-load? Ang pinakamabilis?
Mga Profiling Checks
Sa pangkalahatan, may ilang "problem areas" na dapat bantayan ng bawat web developer kapag gumagawa ng site upang maiwasan ang mga hindi kanais-nais na sorpresa kapag oras na para i-deploy sa production.
Asset sizes: Ang web ay naging mas "mabigat", at sa gayon ay mas mabagal, sa nakalipas na ilang taon. Ang ilan sa bigat na ito ay may kinalaman sa paggamit ng mga imahe.
✅ Tingnan ang Internet Archive para sa isang historical na pananaw sa page weight at iba pa.
Isang magandang kasanayan ang tiyakin na ang iyong mga imahe ay na-optimize at naihatid sa tamang laki at resolution para sa iyong mga user.
DOM traversals: Kailangang buuin ng browser ang Document Object Model nito batay sa code na iyong isinulat, kaya't nasa interes ng mahusay na page performance na panatilihing minimal ang iyong mga tag, gamit at inaayos lamang ang kailangan ng pahina. Sa puntong ito, ang sobrang CSS na nauugnay sa isang pahina ay maaaring ma-optimize; ang mga style na kailangang gamitin lamang sa isang pahina ay hindi kailangang isama sa pangunahing style sheet, halimbawa.
JavaScript: Ang bawat JavaScript developer ay dapat magbantay para sa 'render-blocking' scripts na kailangang i-load bago ma-traverse at ma-paint ang natitirang bahagi ng DOM sa browser. Isaalang-alang ang paggamit ng defer sa iyong inline scripts (tulad ng ginawa sa Terrarium module).
✅ Subukan ang ilang mga site sa isang Site Speed Test website upang matuto nang higit pa tungkol sa mga karaniwang pagsusuri na ginagawa upang matukoy ang performance ng site.
Ngayon na mayroon kang ideya kung paano i-render ng browser ang mga assets na ipinapadala mo dito, tingnan natin ang huling ilang bagay na kailangan mong gawin upang makumpleto ang iyong extension:
Gumawa ng function para mag-calculate ng kulay
Sa /src/index.js, magdagdag ng function na tinatawag na calculateColor() pagkatapos ng serye ng mga const variables na itinakda mo upang makakuha ng access sa 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 } });
}
Ano ang nangyayari dito? Ipinapasa mo ang isang value (ang carbon intensity) mula sa API call na natapos mo sa huling aralin, at pagkatapos ay kinakalkula mo kung gaano kalapit ang value nito sa index na ipinakita sa colors array. Pagkatapos ay ipinapadala mo ang pinakamalapit na color value sa chrome runtime.
Ang chrome.runtime ay may API na humahawak sa lahat ng uri ng background tasks, at ginagamit ito ng iyong extension:
"Gamitin ang chrome.runtime API upang makuha ang background page, ibalik ang mga detalye tungkol sa manifest, at makinig at tumugon sa mga event sa lifecycle ng app o extension. Maaari mo ring gamitin ang API na ito upang i-convert ang relative path ng mga URL sa fully-qualified URLs."
✅ Kung ikaw ay nagde-develop ng browser extension na ito para sa Edge, maaaring magulat ka na gumagamit ka ng chrome API. Ang mga mas bagong bersyon ng Edge browser ay tumatakbo sa Chromium browser engine, kaya maaari mong gamitin ang mga tools na ito.
Tandaan, kung nais mong i-profile ang isang browser extension, ilunsad ang dev tools mula mismo sa loob ng extension, dahil ito ay sarili nitong hiwalay na browser instance.
Mag-set ng default na kulay ng icon
Ngayon, sa init() function, itakda ang icon na maging generic green sa simula sa pamamagitan ng muling pagtawag sa chrome's updateIcon action:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
Tawagin ang function, i-execute ang call
Susunod, tawagin ang function na ginawa mo sa pamamagitan ng pagdaragdag nito sa promise na ibinalik ng C02Signal API:
//let CO2...
calculateColor(CO2);
At sa wakas, sa /dist/background.js, magdagdag ng listener para sa mga background action calls na ito:
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);
}
Sa code na ito, nagdaragdag ka ng listener para sa anumang mga mensahe na papunta sa backend task manager. Kung ito ay tinatawag na 'updateIcon', pagkatapos ay tatakbo ang susunod na code upang gumuhit ng icon ng tamang kulay gamit ang Canvas API.
✅ Matututo ka pa tungkol sa Canvas API sa Space Game lessons.
Ngayon, i-rebuild ang iyong extension (npm run build), i-refresh at ilunsad ang iyong extension, at panoorin ang pagbabago ng kulay. Panahon na ba para mag-ayos o maghugas ng pinggan? Ngayon alam mo na!
Binabati kita, nakagawa ka ng isang kapaki-pakinabang na browser extension at natutunan mo pa ang tungkol sa kung paano gumagana ang browser at kung paano i-profile ang performance nito.
Hamon ng GitHub Copilot Agent 🚀
Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
Deskripsyon: Pagandahin ang kakayahan ng browser extension sa pag-monitor ng performance sa pamamagitan ng pagdaragdag ng feature na sumusubaybay at nagpapakita ng load times para sa iba't ibang bahagi ng extension.
Prompt: Gumawa ng performance monitoring system para sa browser extension na sumusukat at naglo-log ng oras na kinakailangan upang makuha ang CO2 data mula sa API, mag-calculate ng mga kulay, at i-update ang icon. Magdagdag ng function na tinatawag na performanceTracker na gumagamit ng Performance API upang sukatin ang mga operasyong ito at ipakita ang mga resulta sa browser console na may timestamps at duration metrics.
🚀 Hamon
Suriin ang ilang open source websites na matagal nang umiiral, at, batay sa kanilang kasaysayan sa GitHub, tingnan kung matutukoy mo kung paano sila na-optimize sa paglipas ng mga taon para sa performance, kung nagawa man. Ano ang pinaka-karaniwang problema?
Post-Lecture Quiz
Review & Self Study
Isaalang-alang ang pag-subscribe sa isang performance newsletter
Suriin ang ilan sa mga paraan kung paano sinusukat ng mga browser ang web performance sa pamamagitan ng pagtingin sa performance tabs sa kanilang web tools. May nakita ka bang malalaking pagkakaiba?
Assignment
Surin ang isang site para sa performance
Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service Co-op Translator. Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na awtoritatibong pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.