Palieliniet vietnes Ätrumu un lietotÄja pieredzi ar JavaScript veiktspÄjas optimizÄcijas metodÄm: koda sadalÄ«Å”ana un slinkÄ izvÄrtÄÅ”ana. Uzziniet, kÄ un kad katru izmantot optimÄliem rezultÄtiem.
JavaScript veiktspÄjas optimizÄcija: Koda sadalÄ«Å”ana vs. SlinkÄ izvÄrtÄÅ”ana
MÅ«sdienu digitÄlajÄ vidÄ vietnes veiktspÄja ir ÄrkÄrtÄ«gi svarÄ«ga. LÄns ielÄdes laiks var novest pie neapmierinÄtiem lietotÄjiem, augstÄkiem atteikumu rÄdÄ«tÄjiem un galu galÄ negatÄ«vas ietekmes uz jÅ«su biznesu. JavaScript, lai arÄ« bÅ«tisks dinamiskas un interaktÄ«vas tÄ«mekļa pieredzes radÄ«Å”anai, bieži vien var bÅ«t vÄjais punkts, ja ar to nerÄ«kojas uzmanÄ«gi. Divas spÄcÄ«gas metodes JavaScript veiktspÄjas optimizÄÅ”anai ir koda sadalÄ«Å”ana un slinkÄ izvÄrtÄÅ”ana. Å Ä« visaptveroÅ”Ä rokasgrÄmata iedziļinÄsies katrÄ metodÄ, izpÄtot, kÄ tÄs darbojas, to priekÅ”rocÄ«bas, trÅ«kumus un kad tÄs izmantot, lai sasniegtu optimÄlus rezultÄtus.
Izpratne par nepiecieÅ”amÄ«bu pÄc JavaScript optimizÄcijas
MÅ«sdienu tÄ«mekļa lietojumprogrammas bieži vien lielÄ mÄrÄ paļaujas uz JavaScript, lai nodroÅ”inÄtu bagÄtÄ«gu funkcionalitÄti. TomÄr, lietojumprogrammÄm kļūstot sarežģītÄkÄm, JavaScript koda apjoms palielinÄs, izraisot lielÄkus saiŔķu izmÄrus. Å ie lielie saiŔķi var ievÄrojami ietekmÄt sÄkotnÄjo lapas ielÄdes laiku, jo pÄrlÅ«kprogrammai ir jÄielÄdÄ, jÄanalizÄ un jÄizpilda viss kods, pirms lapa kļūst interaktÄ«va.
Apsveriet lielu e-komercijas platformu ar daudzÄm funkcijÄm, piemÄram, produktu filtrÄÅ”anu, meklÄÅ”anas funkcionalitÄti, lietotÄju autentifikÄciju un interaktÄ«vÄm produktu galerijÄm. VisÄm Ŕīm funkcijÄm ir nepiecieÅ”ams ievÄrojams JavaScript kods. Bez pienÄcÄ«gas optimizÄcijas lietotÄji varÄtu piedzÄ«vot lÄnu ielÄdes laiku, Ä«paÅ”i mobilajÄs ierÄ«cÄs vai ar lÄnÄkiem interneta savienojumiem. Tas var novest pie negatÄ«vas lietotÄja pieredzes un potenciÄla klientu zaudÄÅ”anas.
TÄpÄc JavaScript veiktspÄjas optimizÄcija nav tikai tehniska detaļa, bet gan bÅ«tisks aspekts pozitÄ«vas lietotÄja pieredzes nodroÅ”inÄÅ”anai un biznesa mÄrÄ·u sasniegÅ”anai.
Koda sadalīŔana: Lielu saiŔķu sadalīŔana
Kas ir koda sadalīŔana?
Koda sadalÄ«Å”ana ir metode, kas sadala jÅ«su JavaScript kodu mazÄkos, vieglÄk pÄrvaldÄmos gabalos vai saiŔķos. TÄ vietÄ, lai ielÄdÄtu visas lietojumprogrammas kodu uzreiz, pÄrlÅ«kprogramma lejupielÄdÄ tikai nepiecieÅ”amo kodu sÄkotnÄjai lapas ielÄdei. NÄkamie koda gabali tiek ielÄdÄti pÄc pieprasÄ«juma, lietotÄjam mijiedarbojoties ar dažÄdÄm lietojumprogrammas daļÄm.
PadomÄjiet par to Å”Ädi: iedomÄjieties fizisku grÄmatnÄ«cu. TÄ vietÄ, lai mÄÄ£inÄtu iebÄzt katru grÄmatu, ko viÅi pÄrdod, priekÅ”ÄjÄ logÄ, padarot to neiespÄjamu kÄdam kaut ko skaidri redzÄt, viÅi izliek rÅ«pÄ«gi atlasÄ«tu izlasi. PÄrÄjÄs grÄmatas tiek glabÄtas citur veikalÄ un tiek izÅemtas tikai tad, kad klients Ä«paÅ”i tÄs pieprasa. Koda sadalÄ«Å”ana darbojas lÄ«dzÄ«gi, parÄdot tikai sÄkotnÄjam skatam nepiecieÅ”amo kodu un pÄc vajadzÄ«bas ielÄdÄjot citu kodu.
KÄ darbojas koda sadalÄ«Å”ana
Koda sadalÄ«Å”anu var ieviest dažÄdos lÄ«meÅos:
- Ieejas punkta sadalÄ«Å”ana: Tas ietver atseviŔķu ievades punktu izveidi dažÄdÄm jÅ«su lietojumprogrammas daļÄm. PiemÄram, jums var bÅ«t atseviŔķi ievades punkti galvenajai lietojumprogrammai, administratora informÄcijas panelim un lietotÄja profila lapai.
- MarÅ”rutu sadalÄ«Å”ana: Å Ä« metode sadala kodu, pamatojoties uz lietojumprogrammas marÅ”rutiem. Katrs marÅ”ruts atbilst konkrÄtam koda gabalam, kas tiek ielÄdÄts tikai tad, kad lietotÄjs pÄrvietojas uz Å”o marÅ”rutu.
- Dinamiskie importi: Dinamiskie importi ļauj ielÄdÄt moduļus pÄc pieprasÄ«juma izpildlaikÄ. Tas nodroÅ”ina detalizÄtu kontroli pÄr to, kad kods tiek ielÄdÄts, ļaujot atlikt nekritiska koda ielÄdi, lÄ«dz tas faktiski ir nepiecieÅ”ams.
Koda sadalīŔanas priekŔrocības
- Uzlabots sÄkotnÄjais ielÄdes laiks: Samazinot sÄkotnÄjo saiŔķa lielumu, koda sadalÄ«Å”ana ievÄrojami uzlabo sÄkotnÄjo lapas ielÄdes laiku, nodroÅ”inot ÄtrÄku un atsaucÄ«gÄku lietotÄja pieredzi.
- SamazinÄts tÄ«kla joslas platums: IelÄdÄjot tikai nepiecieÅ”amo kodu, tiek samazinÄts datu apjoms, kas jÄpÄrraida pa tÄ«klu, ietaupot joslas platumu gan lietotÄjam, gan serverim.
- Uzlabota keÅ”atmiÅas izmantoÅ”ana: MazÄki koda gabali, visticamÄk, tiks keÅ”atmiÅÄ saglabÄti pÄrlÅ«kprogrammÄ, samazinot nepiecieÅ”amÄ«bu tos lejupielÄdÄt vÄlreiz turpmÄkajos apmeklÄjumos.
- LabÄka lietotÄja pieredze: ÄtrÄks ielÄdes laiks un samazinÄts tÄ«kla joslas platums veicina vienmÄrÄ«gÄku un patÄ«kamÄku lietotÄja pieredzi.
PiemÄrs: React ar React.lazy un Suspense
React vidÄ koda sadalÄ«Å”anu var viegli ieviest, izmantojot React.lazy un Suspense. React.lazy ļauj dinamiski importÄt komponentus, savukÄrt Suspense nodroÅ”ina veidu, kÄ parÄdÄ«t rezerves lietotÄja saskarni (piemÄram, ielÄdes griezÄju), kamÄr komponents tiek ielÄdÄts.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
Loading... }>
Å ajÄ piemÄrÄ OtherComponent tiek ielÄdÄts tikai tad, kad tas tiek renderÄts. KamÄr tas tiek ielÄdÄts, lietotÄjs redzÄs ziÅojumu "Loading...".
Rīki koda sadalīŔanai
- Webpack: PopulÄrs moduļu saiÅotÄjs, kas atbalsta dažÄdas koda sadalÄ«Å”anas metodes.
- Rollup: VÄl viens moduļu saiÅotÄjs, kas koncentrÄjas uz mazu, efektÄ«vu saiŔķu izveidi.
- Parcel: Nulles konfigurÄcijas saiÅotÄjs, kas automÄtiski apstrÄdÄ koda sadalÄ«Å”anu.
- Vite: BÅ«vÄÅ”anas rÄ«ks, kas izmanto vietÄjos ES moduļus Ätrai izstrÄdei un optimizÄtÄm ražoÅ”anas bÅ«vÄm.
SlinkÄ izvÄrtÄÅ”ana: AprÄÄ·inu atlikÅ”ana
Kas ir slinkÄ izvÄrtÄÅ”ana?
SlinkÄ izvÄrtÄÅ”ana, kas pazÄ«stama arÄ« kÄ atlikta izvÄrtÄÅ”ana, ir programmÄÅ”anas metode, kurÄ izteiksmes izvÄrtÄÅ”ana tiek atlikta, lÄ«dz tÄs vÄrtÄ«ba faktiski ir nepiecieÅ”ama. Citiem vÄrdiem sakot, aprÄÄ·ini tiek veikti tikai tad, kad ir nepiecieÅ”ami to rezultÄti, nevis tos dedzÄ«gi aprÄÄ·inot iepriekÅ”.
IedomÄjieties, ka gatavojat daudzkÄrtu maltÄ«ti. JÅ«s nepagatavotu katru Ädienu vienlaikus. TÄ vietÄ jÅ«s pagatavotu katru Ädienu tikai tad, kad ir pienÄcis laiks to pasniegt. SlinkÄ izvÄrtÄÅ”ana darbojas lÄ«dzÄ«gi, veicot aprÄÄ·inus tikai tad, kad ir nepiecieÅ”ami to rezultÄti.
KÄ darbojas slinkÄ izvÄrtÄÅ”ana
JavaScript vidÄ slinko izvÄrtÄÅ”anu var ieviest, izmantojot dažÄdas metodes:
- Funkcijas: Izteiksmes ietÄ«Å”ana funkcijÄ Ä¼auj atlikt tÄs izvÄrtÄÅ”anu, lÄ«dz tiek izsaukta funkcija.
- Ä¢eneratori: Ä¢eneratori nodroÅ”ina veidu, kÄ izveidot iteratorus, kas pÄc pieprasÄ«juma Ä£enerÄ vÄrtÄ«bas.
- MemoizÄcija: MemoizÄcija ietver dÄrgu funkciju izsaukumu rezultÄtu keÅ”atmiÅÄ saglabÄÅ”anu un keÅ”atmiÅÄ saglabÄtÄ rezultÄta atgrieÅ”anu, kad atkal parÄdÄs tÄs paÅ”as ievades.
- Starpniekserveri: Starpniekserverus var izmantot, lai pÄrtvertu piekļuvi rekvizÄ«tiem un atliktu rekvizÄ«tu vÄrtÄ«bu aprÄÄ·inÄÅ”anu, lÄ«dz tiem faktiski tiek piekļūts.
SlinkÄs izvÄrtÄÅ”anas priekÅ”rocÄ«bas
- Uzlabota veiktspÄja: Atliekot nevajadzÄ«gus aprÄÄ·inus, slinkÄ izvÄrtÄÅ”ana var ievÄrojami uzlabot veiktspÄju, Ä«paÅ”i, strÄdÄjot ar lieliem datu kopumiem vai sarežģītiem aprÄÄ·iniem.
- SamazinÄta atmiÅas izmantoÅ”ana: SlinkÄ izvÄrtÄÅ”ana var samazinÄt atmiÅas izmantoÅ”anu, izvairoties no starpvÄrtÄ«bu izveides, kas nav nekavÄjoties nepiecieÅ”amas.
- PaaugstinÄta atsaucÄ«ba: Izvairoties no nevajadzÄ«giem aprÄÄ·iniem sÄkotnÄjÄs ielÄdes laikÄ, slinkÄ izvÄrtÄÅ”ana var palielinÄt lietojumprogrammas atsaucÄ«bu.
- BezgalÄ«gas datu struktÅ«ras: SlinkÄ izvÄrtÄÅ”ana ļauj strÄdÄt ar bezgalÄ«gÄm datu struktÅ«rÄm, piemÄram, bezgalÄ«giem sarakstiem vai straumÄm, pÄc pieprasÄ«juma aprÄÄ·inot tikai nepiecieÅ”amos elementus.
PiemÄrs: SlinkÄ attÄlu ielÄde
Biežs slinkÄs izvÄrtÄÅ”anas izmantoÅ”anas gadÄ«jums ir slinkÄ attÄlu ielÄde. TÄ vietÄ, lai ielÄdÄtu visus attÄlus lapÄ uzreiz, varat atlikt to attÄlu ielÄdi, kas sÄkotnÄji nav redzami skatlogÄ. Tas var ievÄrojami uzlabot sÄkotnÄjo lapas ielÄdes laiku un samazinÄt tÄ«kla joslas platuma patÄriÅu.
function lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach((img) => {
observer.observe(img);
});
}
document.addEventListener('DOMContentLoaded', lazyLoadImages);
Å ajÄ piemÄrÄ tiek izmantots IntersectionObserver API, lai noteiktu, kad attÄls nonÄk skatlogÄ. Kad attÄls ir redzams, tÄ atribÅ«ts src tiek iestatÄ«ts uz tÄ atribÅ«ta data-src vÄrtÄ«bu, aktivizÄjot attÄla ielÄdi. PÄc tam novÄrotÄjs pÄrtrauc attÄla novÄroÅ”anu, lai novÄrstu tÄ atkÄrtotu ielÄdi.
PiemÄrs: MemoizÄcija
MemoizÄciju var izmantot, lai optimizÄtu dÄrgus funkciju izsaukumus. Å eit ir piemÄrs:
function memoize(func) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
}
const result = func(...args);
cache[key] = result;
return result;
};
}
function expensiveCalculation(n) {
// Simulate a time-consuming calculation
for (let i = 0; i < 100000000; i++) {
// Do something
}
return n * 2;
}
const memoizedCalculation = memoize(expensiveCalculation);
console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');
console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');
Å ajÄ piemÄrÄ funkcija memoize Åem funkciju kÄ ievadi un atgriež memoizÄtu Ŕīs funkcijas versiju. MemoizÄtÄ funkcija keÅ”atmiÅÄ saglabÄ iepriekÅ”Äjo izsaukumu rezultÄtus, lai turpmÄkie izsaukumi ar tiem paÅ”iem argumentiem varÄtu atgriezt keÅ”atmiÅÄ saglabÄto rezultÄtu, atkÄrtoti neizpildot sÄkotnÄjo funkciju.
Koda sadalÄ«Å”ana vs. SlinkÄ izvÄrtÄÅ”ana: GalvenÄs atŔķirÄ«bas
Lai gan gan koda sadalÄ«Å”ana, gan slinkÄ izvÄrtÄÅ”ana ir spÄcÄ«gas optimizÄcijas metodes, tÄs attiecas uz dažÄdiem veiktspÄjas aspektiem:
- Koda sadalÄ«Å”ana: KoncentrÄjas uz sÄkotnÄjÄ saiŔķa lieluma samazinÄÅ”anu, sadalot kodu mazÄkos gabalos un ielÄdÄjot tos pÄc pieprasÄ«juma. To galvenokÄrt izmanto, lai uzlabotu sÄkotnÄjo lapas ielÄdes laiku.
- SlinkÄ izvÄrtÄÅ”ana: KoncentrÄjas uz vÄrtÄ«bu aprÄÄ·inÄÅ”anas atlikÅ”anu, lÄ«dz tÄs faktiski ir nepiecieÅ”amas. To galvenokÄrt izmanto, lai uzlabotu veiktspÄju, strÄdÄjot ar dÄrgiem aprÄÄ·iniem vai lieliem datu kopumiem.
BÅ«tÄ«bÄ koda sadalÄ«Å”ana samazina koda apjomu, kas jÄlejupielÄdÄ uzreiz, savukÄrt slinkÄ izvÄrtÄÅ”ana samazina aprÄÄ·inu apjomu, kas jÄveic uzreiz.
Kad izmantot koda sadalÄ«Å”anu vs. SlinkÄ izvÄrtÄÅ”ana
Koda sadalīŔana
- Lielas lietojumprogrammas: Izmantojiet koda sadalÄ«Å”anu lietojumprogrammÄm ar lielu JavaScript koda apjomu, Ä«paÅ”i tÄm, kurÄm ir vairÄki marÅ”ruti vai funkcijas.
- SÄkotnÄjÄ ielÄdes laika uzlaboÅ”ana: Izmantojiet koda sadalÄ«Å”anu, lai uzlabotu sÄkotnÄjo lapas ielÄdes laiku un samazinÄtu laiku lÄ«dz interaktivitÄtei.
- TÄ«kla joslas platuma samazinÄÅ”ana: Izmantojiet koda sadalÄ«Å”anu, lai samazinÄtu datu apjomu, kas jÄpÄrraida pa tÄ«klu.
SlinkÄ izvÄrtÄÅ”ana
- DÄrgi aprÄÄ·ini: Izmantojiet slinko izvÄrtÄÅ”anu funkcijÄm, kas veic dÄrgus aprÄÄ·inus vai piekļūst lieliem datu kopumiem.
- AtsaucÄ«bas uzlaboÅ”ana: Izmantojiet slinko izvÄrtÄÅ”anu, lai uzlabotu lietojumprogrammas atsaucÄ«bu, atliekot nevajadzÄ«gus aprÄÄ·inus sÄkotnÄjÄs ielÄdes laikÄ.
- BezgalÄ«gas datu struktÅ«ras: Izmantojiet slinko izvÄrtÄÅ”anu, strÄdÄjot ar bezgalÄ«gÄm datu struktÅ«rÄm, piemÄram, bezgalÄ«giem sarakstiem vai straumÄm.
- SlinkÄ multivides ielÄde: Ieviesiet slinko ielÄdi attÄliem, videoklipiem un citiem multivides resursiem, lai uzlabotu lapas ielÄdes laiku.
Koda sadalÄ«Å”anas un slinkÄs izvÄrtÄÅ”anas apvienoÅ”ana
Daudzos gadÄ«jumos koda sadalÄ«Å”anu un slinko izvÄrtÄÅ”anu var apvienot, lai sasniegtu vÄl lielÄkus veiktspÄjas ieguvumus. PiemÄram, jÅ«s varÄtu izmantot koda sadalÄ«Å”anu, lai sadalÄ«tu savu lietojumprogrammu mazÄkos gabalos, un pÄc tam izmantot slinko izvÄrtÄÅ”anu, lai atliktu vÄrtÄ«bu aprÄÄ·inÄÅ”anu Å”ajos gabalos.
Apsveriet e-komercijas lietojumprogrammu. JÅ«s varÄtu izmantot koda sadalÄ«Å”anu, lai sadalÄ«tu lietojumprogrammu atseviŔķos saiŔķos produktu saraksta lapai, produktu informÄcijas lapai un norÄÄ·inu lapai. PÄc tam produktu informÄcijas lapÄ jÅ«s varÄtu izmantot slinko izvÄrtÄÅ”anu, lai atliktu attÄlu ielÄdi vai produktu ieteikumu aprÄÄ·inÄÅ”anu, lÄ«dz tie faktiski ir nepiecieÅ”ami.
Papildus koda sadalÄ«Å”anai un slinkajai izvÄrtÄÅ”anai: Papildu optimizÄcijas metodes
Lai gan koda sadalÄ«Å”ana un slinkÄ izvÄrtÄÅ”ana ir spÄcÄ«gas metodes, tÄs ir tikai divi puzles gabali, kad runa ir par JavaScript veiktspÄjas optimizÄciju. Å eit ir dažas papildu metodes, kuras varat izmantot, lai vÄl vairÄk uzlabotu veiktspÄju:
- MinifikÄcija: NoÅemiet nevajadzÄ«gas rakstzÄ«mes (piemÄram, atstarpes, komentÄrus) no koda, lai samazinÄtu tÄ lielumu.
- SaspieÅ”ana: Saspiediet kodu, izmantojot tÄdus rÄ«kus kÄ Gzip vai Brotli, lai vÄl vairÄk samazinÄtu tÄ lielumu.
- KeÅ”atmiÅa: Izmantojiet pÄrlÅ«kprogrammas keÅ”atmiÅu un CDN keÅ”atmiÅu, lai samazinÄtu pieprasÄ«jumu skaitu jÅ«su serverim.
- Koka purinÄÅ”ana: NoÅemiet neizmantoto kodu no saiŔķiem, lai samazinÄtu to lielumu.
- AttÄlu optimizÄcija: OptimizÄjiet attÄlus, tos saspiežot, mainot to izmÄrus uz atbilstoÅ”iem izmÄriem un izmantojot modernus attÄlu formÄtus, piemÄram, WebP.
- DebouncÄÅ”ana un droselÄÅ”ana: KontrolÄjiet notikumu apdarinÄtÄju izpildes Ätrumu, lai novÄrstu veiktspÄjas problÄmas.
- EfektÄ«va DOM manipulÄcija: Samaziniet DOM manipulÄcijas un izmantojiet efektÄ«vas DOM manipulÄcijas metodes.
- TÄ«mekļa darbinieki: Novirziet aprÄÄ·inu ziÅÄ ietilpÄ«gus uzdevumus tÄ«mekļa darbiniekiem, lai neļautu tiem bloÄ·Ät galveno pavedienu.
SecinÄjums
JavaScript veiktspÄjas optimizÄcija ir bÅ«tisks aspekts pozitÄ«vas lietotÄja pieredzes nodroÅ”inÄÅ”anai un biznesa mÄrÄ·u sasniegÅ”anai. Koda sadalÄ«Å”ana un slinkÄ izvÄrtÄÅ”ana ir divas spÄcÄ«gas metodes, kas var ievÄrojami uzlabot veiktspÄju, samazinot sÄkotnÄjo ielÄdes laiku, samazinot tÄ«kla joslas platuma patÄriÅu un atliekot nevajadzÄ«gus aprÄÄ·inus. Izprotot, kÄ Å”Ä«s metodes darbojas un kad tÄs izmantot, varat izveidot ÄtrÄkas, atsaucÄ«gÄkas un patÄ«kamÄkas tÄ«mekļa lietojumprogrammas.
Atcerieties Åemt vÄrÄ savas specifiskÄs lietojumprogrammas prasÄ«bas un izmantot metodes, kas ir vispiemÄrotÄkÄs jÅ«su vajadzÄ«bÄm. NepÄrtraukti uzraugiet savas lietojumprogrammas veiktspÄju un atkÄrtojiet optimizÄcijas stratÄÄ£ijas, lai nodroÅ”inÄtu vislabÄko iespÄjamo lietotÄja pieredzi. Izmantojiet koda sadalÄ«Å”anas un slinkÄs izvÄrtÄÅ”anas spÄku, lai izveidotu tÄ«mekļa lietojumprogrammas, kas ir ne tikai bagÄtÄ«gas ar funkcijÄm, bet arÄ« efektÄ«vas un patÄ«kamas lietoÅ”anÄ visÄ pasaulÄ.
Papildu mÄcÄ«bu resursi
- Webpack dokumentÄcija: https://webpack.js.org/
- Rollup dokumentÄcija: https://rollupjs.org/guide/en/
- Vite dokumentÄcija: https://vitejs.dev/
- MDN tīmekļa dokumenti - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- Google izstrÄdÄtÄji - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/