17 KiB

Raw Permalink Blame History

Mradi wa Kiendelezi cha Kivinjari Sehemu ya 3: Jifunze Kuhusu Kazi za Nyuma na Utendaji

Umewahi kujiuliza ni nini hufanya baadhi ya viendelezi vya kivinjari kuhisi haraka na vyenye mwitikio huku vingine vikionekana kuwa polepole? Siri iko katika kile kinachotokea nyuma ya pazia. Wakati watumiaji wanabonyeza kwenye kiolesura cha kiendelezi chako, kuna ulimwengu mzima wa michakato ya nyuma inayosimamia upatikanaji wa data, masasisho ya ikoni, na rasilimali za mfumo kwa utulivu.

Hii ni somo letu la mwisho katika mfululizo wa viendelezi vya kivinjari, na tunakwenda kufanya kifuatiliaji chako cha alama ya kaboni kifanye kazi kwa urahisi. Utaongeza masasisho ya ikoni ya nguvu na kujifunza jinsi ya kugundua masuala ya utendaji kabla hayajawa matatizo. Ni kama kurekebisha gari la mbio - marekebisho madogo yanaweza kufanya tofauti kubwa katika jinsi kila kitu kinavyofanya kazi.

Tunapomaliza, utakuwa na kiendelezi kilichosafishwa na kuelewa kanuni za utendaji zinazotofautisha programu za wavuti nzuri na zile bora. Hebu tuzame katika ulimwengu wa uboreshaji wa kivinjari.

Maswali ya Kabla ya Somo

Maswali ya kabla ya somo

Utangulizi

Katika masomo yetu ya awali, ulijenga fomu, ukaunganisha na API, na ukashughulikia upatikanaji wa data usio wa moja kwa moja. Kiendelezi chako kinachukua sura vizuri.

Sasa tunahitaji kuongeza ukamilifu - kama kufanya ikoni ya kiendelezi hicho ibadilishe rangi kulingana na data ya kaboni. Hii inanikumbusha jinsi NASA ilivyolazimika kuboresha kila mfumo kwenye chombo cha Apollo. Hawakuweza kumudu mizunguko au kumbukumbu iliyopotea kwa sababu maisha yalitegemea utendaji. Ingawa kiendelezi chetu cha kivinjari si muhimu kiasi hicho, kanuni zile zile zinatumika - msimbo mzuri huunda uzoefu bora wa mtumiaji.

Misingi ya Utendaji wa Wavuti

Wakati msimbo wako unafanya kazi kwa ufanisi, watu wanaweza kuhisi tofauti. Unajua wakati ambapo ukurasa unapakia mara moja au uhuishaji unafanyika kwa urahisi? Huo ni utendaji mzuri kazini.

Utendaji si tu kuhusu kasi - ni kuhusu kuunda uzoefu wa wavuti unaohisi wa asili badala ya kuwa wa kusumbua na wa kufadhaisha. Katika siku za mwanzo za kompyuta, Grace Hopper maarufu alihifadhi nanosekondi (kipande cha waya chenye urefu wa futi moja) kwenye dawati lake kuonyesha jinsi mwanga unavyosafiri kwa sekunde bilioni moja. Ilikuwa njia yake ya kuelezea kwa nini kila mikrosekondi ni muhimu katika kompyuta. Hebu tuchunguze zana za upelelezi zinazokusaidia kugundua kinachochelewesha mambo.

"Utendaji wa wavuti ni kuhusu mambo mawili: jinsi ukurasa unavyopakia haraka, na jinsi msimbo wake unavyofanya kazi haraka." -- Zack Grossbart

Mada ya jinsi ya kufanya tovuti zako ziwe haraka sana kwenye aina zote za vifaa, kwa aina zote za watumiaji, katika hali zote, bila shaka ni pana. Hapa kuna mambo ya kuzingatia unapoijenga mradi wa kawaida wa wavuti au kiendelezi cha kivinjari.

Hatua ya kwanza ya kuboresha tovuti yako ni kuelewa kinachotokea kwa kweli nyuma ya pazia. Kwa bahati nzuri, kivinjari chako kina zana za upelelezi zenye nguvu zilizojengwa ndani.

Ili kufungua Zana za Watengenezaji katika Edge, bonyeza zile nukta tatu juu kulia, kisha nenda kwenye Zana Zaidi > Zana za Watengenezaji. Au tumia njia ya mkato ya kibodi: Ctrl + Shift + I kwenye Windows au Option + Command + I kwenye Mac. Ukishafika hapo, bonyeza kichupo cha Utendaji - hapa ndipo utakapofanya uchunguzi wako.

Hii ndiyo zana yako ya upelelezi wa utendaji:

Fungua Zana za Watengenezaji (utazitumia mara kwa mara kama mtengenezaji!)
Nenda kwenye kichupo cha Utendaji - fikiria kama kifuatiliaji cha usawa wa programu yako ya wavuti
Bonyeza kitufe cha Rekodi na tazama ukurasa wako ukifanya kazi
Chunguza matokeo ili kugundua kinachochelewesha mambo

Hebu jaribu hili. Fungua tovuti (Microsoft.com inafanya kazi vizuri kwa hili) na bonyeza kitufe cha 'Rekodi'. Sasa fresha ukurasa na tazama profaili ikikamata kila kitu kinachotokea. Unapomaliza kurekodi, utaona muhtasari wa kina wa jinsi kivinjari kinavyofanya 'scripts', 'renders', na 'paints' tovuti. Inanikumbusha jinsi udhibiti wa misheni unavyofuatilia kila mfumo wakati wa uzinduzi wa roketi - unapata data ya wakati halisi juu ya kinachotokea na lini.

✅ Nyaraka za Microsoft zina maelezo mengi zaidi ikiwa unataka kuchimba zaidi

Kidokezo cha kitaalamu: Futa akiba ya kivinjari chako kabla ya kupima ili kuona jinsi tovuti yako inavyofanya kazi kwa wageni wa mara ya kwanza - kawaida ni tofauti sana na ziara za kurudia!

Chagua vipengele vya muda wa profaili ili kukuza matukio yanayotokea wakati ukurasa wako unapakia.

Pata muhtasari wa utendaji wa ukurasa wako kwa kuchagua sehemu ya muda wa profaili na kuangalia jopo la muhtasari:

Angalia jopo la Kumbukumbu ya Matukio ili kuona kama tukio lolote lilichukua zaidi ya ms 15:

✅ Jifunze profaili yako! Fungua zana za watengenezaji kwenye tovuti hii na uone kama kuna vizuizi. Ni rasilimali gani inayopakia polepole zaidi? Haraka zaidi?

Nini cha Kuangalia Unapofanya Profaili

Kuendesha profaili ni mwanzo tu - ujuzi halisi ni kujua kile grafu za rangi zinakuambia. Usijali, utazoea kuzisoma. Watengenezaji wenye uzoefu wamejifunza kugundua ishara za onyo kabla hazijawa matatizo makubwa.

Hebu tuzungumze kuhusu wahalifu wa kawaida - matatizo ya utendaji yanayopenda kujificha kwenye miradi ya wavuti. Kama jinsi Marie Curie alivyolazimika kufuatilia viwango vya mionzi kwa uangalifu katika maabara yake, tunahitaji kuangalia mifumo fulani inayonyesha matatizo yanayokuja. Kuyagundua mapema kutakuokoa (na watumiaji wako) kutoka kwa kufadhaika.

Ukubwa wa rasilimali: Tovuti zimekuwa "nzito" zaidi kwa miaka, na uzito mwingi wa ziada unatokana na picha. Ni kama tumekuwa tukijaza zaidi na zaidi kwenye masanduku yetu ya kidijitali.

✅ Angalia Arki ya Mtandao ili kuona jinsi ukubwa wa kurasa umekua kwa muda - ni wazi sana.

Hivi ndivyo unavyoweza kuweka rasilimali zako zikiwa bora:

Banisha picha hizo! Miundo ya kisasa kama WebP inaweza kupunguza ukubwa wa faili kwa kiasi kikubwa
Toa saizi sahihi ya picha kwa kila kifaa - hakuna haja ya kutuma picha kubwa za desktop kwa simu
Punguza CSS na JavaScript yako - kila byte ni muhimu
Tumia upakiaji wa polepole ili picha zipakie tu wakati watumiaji wanapozisogeza

Uchambuzi wa DOM: Kivinjari kinapaswa kujenga Mfano wa Kitu cha Nyaraka kulingana na msimbo unaoandika, kwa hivyo ni kwa maslahi ya utendaji mzuri wa ukurasa kuweka lebo zako kwa kiwango cha chini, ukitumia na kuunda tu kile kinachohitajika na ukurasa. Kwa hatua hii, CSS ya ziada inayohusiana na ukurasa inaweza kuboreshwa; mitindo inayohitajika kutumika tu kwenye ukurasa mmoja haitahitaji kujumuishwa kwenye karatasi kuu ya mitindo, kwa mfano.

Mikakati muhimu ya uboreshaji wa DOM:

Punguza idadi ya vipengele vya HTML na viwango vya kuingiza
Ondoa sheria za CSS zisizotumika na unganisha karatasi za mitindo kwa ufanisi
Panga CSS kupakia tu kinachohitajika kwa kila ukurasa
Unda HTML kwa njia ya kimantiki kwa uchambuzi bora wa kivinjari

JavaScript: Kila mtengenezaji wa JavaScript anapaswa kuangalia 'scripts' zinazozuia uchoraji ambazo lazima zipakie kabla ya DOM nyingine kuweza kuchambuliwa na kuchorwa kwenye kivinjari. Fikiria kutumia defer na scripts zako za ndani (kama inavyofanyika kwenye moduli ya Terrarium).

Mbinu za kisasa za uboreshaji wa JavaScript:

Tumia sifa ya defer kupakia scripts baada ya uchambuzi wa DOM
Tekeleza kugawanya msimbo ili kupakia JavaScript inayohitajika tu
Tumia upakiaji wa polepole kwa utendaji usio wa muhimu
Punguza matumizi ya maktaba na mifumo mizito inapowezekana

✅ Jaribu tovuti kadhaa kwenye Tovuti ya Mtihani wa Kasi ya Tovuti ili kujifunza zaidi kuhusu ukaguzi wa kawaida unaofanywa ili kubaini utendaji wa tovuti.

Sasa kwa kuwa una wazo la jinsi kivinjari kinavyotoa rasilimali unazotuma kwake, hebu tuangalie mambo ya mwisho unayohitaji kufanya ili kukamilisha kiendelezi chako:

Unda kazi ya kuhesabu rangi

Sasa tutaunda kazi inayogeuza data ya nambari kuwa rangi zenye maana. Fikiria kama mfumo wa taa za barabarani - kijani kwa nishati safi, nyekundu kwa kiwango cha juu cha kaboni.

Kazi hii itachukua data ya CO2 kutoka API yetu na kuamua ni rangi gani inayoonyesha vyema athari za mazingira. Ni sawa na jinsi wanasayansi wanavyotumia mfumo wa rangi katika ramani za joto kuonyesha mifumo tata ya data - kutoka kwa joto la bahari hadi uundaji wa nyota. Hebu tuongeze hii kwenye /src/index.js, mara tu baada ya zile const tulizoanzisha awali:

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

Hebu tuchambue kazi hii ya busara:

Inaweka safu mbili - moja kwa viwango vya CO2, nyingine kwa rangi (kijani = safi, kahawia = chafu!)
Inapata mechi ya karibu zaidi na thamani yetu halisi ya CO2 kwa kutumia upangaji wa safu
Inachukua rangi inayolingana kwa kutumia njia ya findIndex()
Inatuma ujumbe kwa script ya nyuma ya Chrome na rangi yetu iliyochaguliwa
Inatumia maandishi ya kiolezo (hizo backticks) kwa muundo safi wa maandishi
Inahifadhi kila kitu kikiwa kimepangwa kwa tamko la const

API ya chrome.runtime API ni kama mfumo wa neva wa kiendelezi chako - inashughulikia mawasiliano yote ya nyuma ya pazia na kazi:

"Tumia API ya chrome.runtime kupata ukurasa wa nyuma, kurudisha maelezo kuhusu manifest, na kusikiliza na kujibu matukio katika maisha ya programu au kiendelezi. Unaweza pia kutumia API hii kubadilisha njia ya URL za jamaa kuwa URL zilizo na sifa kamili."

Kwa nini API ya Chrome Runtime ni muhimu:

Inaruhusu sehemu tofauti za kiendelezi chako kuzungumza
Inashughulikia kazi za nyuma bila kufungia kiolesura cha mtumiaji
Inasimamia matukio ya maisha ya kiendelezi chako
Inafanya kupitisha ujumbe kati ya scripts kuwa rahisi sana

✅ Ikiwa unakijenga kiendelezi hiki cha kivinjari kwa Edge, inaweza kushangaza kwamba unatumia API ya chrome. Matoleo mapya ya kivinjari cha Edge yanaendesha injini ya kivinjari ya Chromium, kwa hivyo unaweza kutumia zana hizi.

Kidokezo cha Kitaalamu: Ikiwa unataka kufanya profaili ya kiendelezi cha kivinjari, fungua zana za watengenezaji kutoka ndani ya kiendelezi chenyewe, kwani ni kivinjari chake tofauti. Hii inakupa ufikiaji wa vipimo vya utendaji maalum vya kiendelezi.

Weka rangi ya ikoni ya msingi

Kabla ya kuanza kupata data halisi, hebu tupe kiendelezi chetu mwanzo. Hakuna mtu anayependa kutazama ikoni tupu au inayovunjika. Tutaanza na rangi ya kijani ili watumiaji wajue kiendelezi kinafanya kazi mara tu wanapokisakinisha.

Katika kazi yako ya init(), hebu weka ikoni ya kijani ya msingi:

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

Hii uanzishaji unakamilisha:

Inaweka rangi ya kijani ya kawaida kama hali ya msingi
Inatoa maoni ya haraka ya kuona wakati kiendelezi kinapopakia
Inaanzisha muundo wa mawasiliano na script ya nyuma
Inahakikisha watumiaji wanaona kiendelezi kinachofanya kazi kabla ya data kupakia

Piga kazi, tekeleza wito

Sasa hebu tuunganishe kila kitu pamoja ili kwamba data mpya ya CO2 inapokuja, ikoni yako ibadilike kiotomatiki na rangi sahihi. Ni kama kuunganisha mzunguko wa mwisho katika kifaa cha elektroniki - ghafla vipengele vyote vya mtu binafsi vinafanya kazi kama mfumo mmoja.

Ongeza mstari huu mara tu baada ya kupata data ya CO2 kutoka API:

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

Muunganiko huu unakamilisha:

Unaunganisha mtiririko wa data ya API na mfumo wa kiashiria cha kuona
Unasababisha masasisho ya ikoni kiotomatiki wakati data mpya inafika
Unahakikisha maoni ya kuona ya wakati halisi kulingana na kiwango cha sasa cha kaboni
Unadumisha mgawanyo wa wasiwasi kati ya upatikanaji wa data na mantiki ya kuonyesha

Na hatimaye, katika /dist/background.js, ongeza msikilizaji wa simu hizi za hatua za nyuma:

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

Hii script ya nyuma inafanya:

Inasikiliza ujumbe kutoka kwa script yako kuu (kama mpokeaji wa simu)
Inashughulikia maombi hayo ya 'updateIcon' kubadilisha ikoni ya zana yako
Inaunda ikoni mpya papo hapo kwa kutumia API ya Canvas
Inachora duara rahisi la rangi linaloonyesha kiwango cha sasa cha kaboni
Inasasisha zana ya kivinjari chako na ikoni mpya
Inatumia OffscreenCanvas kwa utendaji laini (hakuna kuzuia UI)

✅ Utajifunza zaidi kuhusu API ya Canvas katika Masomo ya Mchezo wa Anga.

Wakati wa kujaribu kiendelezi chako:

Jenga kila kitu kwa npm run build
Pakia upya kiendelezi chako kwenye kivinjari (usisahau hatua hii)
Fungua kiendelezi chako na tazama ikoni hiyo ikibadilisha rangi
Angalia jinsi inavyoitikia data halisi ya kaboni kutoka kote ulimwenguni

Sasa utajua kwa haraka ikiwa ni wakati mzuri wa kufua nguo au ikiwa unapaswa kusubiri nishati safi zaidi. Umejenga kitu chenye manufaa halisi na umejifunza kuhusu utendaji wa kivinjari njiani.

Changamoto ya Wakala wa GitHub Copilot 🚀

Tumia hali ya Wakala kukamilisha changamoto ifuatayo:

Maelezo: Boresha uwezo wa ufuatiliaji wa utendaji wa kiendelezi cha kivinjari kwa kuongeza kipengele kinachofuatilia na kuonyesha nyakati za upakiaji kwa vipengele tofauti vya kiendelezi.

Kichocheo: Unda mfumo wa ufuatiliaji wa utendaji kwa kiendelezi cha kivinjari kinachopima na kurekodi muda unaochukua kupata data ya CO2 kutoka API, kuhesabu rangi, na kusasisha ikoni. Ongeza kazi inayoitwa performanceTracker inayotumia API ya Hapa kuna misheni ya kuvutia ya upelelezi: chagua tovuti chache za chanzo huria ambazo zimekuwepo kwa miaka mingi (fikiri Wikipedia, GitHub, au Stack Overflow) na chunguza historia yao ya commit. Je, unaweza kugundua walipofanya maboresho ya utendaji? Ni matatizo gani yaliendelea kujitokeza?

Mbinu yako ya uchunguzi:

Tafuta ujumbe wa commit kwa maneno kama "boresha," "utendaji," au "haraka"
Angalia mifumo - je, wanazidi kurekebisha aina zile zile za matatizo?
Tambua sababu za kawaida zinazochelewesha tovuti
Shiriki unachogundua - waendelezaji wengine hujifunza kutoka kwa mifano halisi

Jaribio Baada ya Somo

Jaribio baada ya somo

Mapitio na Kujisomea

Fikiria kujisajili kwa jarida la utendaji

Chunguza baadhi ya njia ambazo vivinjari hupima utendaji wa wavuti kwa kuangalia kupitia tabo za utendaji katika zana zao za wavuti. Je, unapata tofauti kubwa?

Kazi

Chambua tovuti kwa utendaji

Kanusho:
Hati hii imetafsiriwa kwa kutumia huduma ya kutafsiri ya AI Co-op Translator. Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.

17 KiB Raw Permalink Blame History