JavaScript pasirinktinio grandinimo (Optional Chaining) našumo optimizavimas: prieigos šablonų kaupimas (Caching)

Pasirinktinis grandinimas (?.) JavaScript yra galinga funkcija, leidžianti saugiai pasiekti giliai įdėtų objektų savybes, aiškiai netikrinant kiekvienos savybės egzistavimo. Tai ženkliai sumažina šablonišką kodą ir padaro jūsų kodą skaitomesnį bei lengviau prižiūrimą. Tačiau, kaip ir bet kuri funkcija, netinkamai naudojama ji gali sukelti našumo pridėtinių išlaidų. Šiame straipsnyje nagrinėjama našumo optimizavimo technika, vadinama „prieigos šablonų kaupimu“, skirta šioms išlaidoms sumažinti.

Pasirinktinio grandinimo ir jo poveikio našumui supratimas

Pasirinktinis grandinimas leidžia pasiekti savybes taip:

            const user = {
  profile: {
    address: {
      city: 'London'
    }
  }
};

const city = user?.profile?.address?.city; // city bus 'London'
const country = user?.profile?.address?.country; // country bus undefined

            

              
                Copy
              
            
          

Neturint pasirinktinio grandinimo, reikėtų rašyti tokį kodą:

            let city;
if (user && user.profile && user.profile.address) {
  city = user.profile.address.city;
}

            

              
                Copy
              
            
          

Nors pasirinktinis grandinimas supaprastina kodą, jis sukuria nedideles našumo pridėtines išlaidas. Kiekvienas ?. operatorius atlieka patikrinimą dėl null arba undefined. Scenarijuose, kai pakartotinai pasiekiamos tos pačios įdėtos savybės, šie patikrinimai gali tapti našumo kliuviniu, ypač našumui svarbiose jūsų programos dalyse.

Pristatome prieigos šablonų kaupimą

Prieigos šablonų kaupimas yra technika, kuri apima dažnai naudojamos pasirinktinio grandinimo išraiškos rezultato saugojimą lokaliame kintamajame. Vėlesnės prieigos tada naudoja sukauptą vertę, užuot iš naujo vertinusios pasirinktinio grandinimo išraišką. Tai gali ženkliai pagerinti našumą, ypač kai įdėto objekto struktūra išlieka santykinai stabili.

Pavyzdys: Vartotojo profilio prieigos optimizavimas

Apsvarstykite programą, kuri dažnai rodo vartotojo miestą pagal jo profilį. Be optimizavimo, kodas galėtų atrodyti taip:

            function displayUserCity(user) {
  const city = user?.profile?.address?.city;
  if (city) {
    console.log(`User's city: ${city}`);
  } else {
    console.log('City not available');
  }
}

            

              
                Copy
              
            
          

Norėdami tai optimizuoti naudojant prieigos šablonų kaupimą, galite sukaupti user?.profile?.address objektą:

            function displayUserCityOptimized(user) {
  const address = user?.profile?.address;
  const city = address?.city;
  if (city) {
    console.log(`User's city: ${city}`);
  } else {
    console.log('City not available');
  }
}

            

              
                Copy
              
            
          

Šioje optimizuotoje versijoje user?.profile?.address išraiška įvertinama tik vieną kartą, o rezultatas saugomas address kintamajame. Vėlesnė prieiga prie miesto tada naudoja sukauptą address vertę.

Kada naudoti prieigos šablonų kaupimą

Prieigos šablonų kaupimas yra efektyviausias šiais scenarijais:

• Dažnai pasiekiamos savybės: Kai per trumpą laiką kelis kartus pasiekiate tas pačias įdėtas savybes.
• Stabili objekto struktūra: Kai tikėtina, kad įdėto objekto struktūra dažnai nesikeis. Jei struktūra keičiasi dažnai, sukaupta vertė gali tapti pasenusi, kas lems neteisingus rezultatus.
• Našumui svarbios dalys: Programos dalyse, kur našumas yra svarbiausias, pavyzdžiui, atvaizdavimo cikluose, įvykių tvarkyklėse ar duomenų apdorojimo grandinėse.

Pavyzdys: React komponento optimizavimas

Apsvarstykite React komponentą, kuris rodo vartotojo adresą. Paprasta implementacija galėtų atrodyti taip:

            function UserAddress({ user }) {
  return (
    <div>
      <p>City: {user?.profile?.address?.city}</p>
      <p>Country: {user?.profile?.address?.country}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Norėdami optimizuoti šį komponentą, galite sukaupti adreso objektą:

            function UserAddressOptimized({ user }) {
  const address = user?.profile?.address;
  return (
    <div>
      <p>City: {address?.city}</p>
      <p>Country: {address?.country}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Šis optimizavimas sumažina pasirinktinio grandinimo operacijų skaičių nuo šešių iki dviejų per vieną atvaizdavimą, potencialiai pagerindamas komponento atvaizdavimo našumą, ypač jei komponentas atvaizduojamas dažnai.

Praktiniai aspektai ir kompromisai

Nors prieigos šablonų kaupimas gali pagerinti našumą, svarbu atsižvelgti į šiuos kompromisus:

• Padidėjęs atminties naudojimas: Verčių kaupimas reikalauja jų saugojimo atmintyje, kas gali padidinti atminties suvartojimą.
• Kodo sudėtingumas: Kaupimo įvedimas gali šiek tiek padidinti kodo sudėtingumą ir sunkiau jį skaityti.
• Kaupyklos anuliavimas: Jei pagrindinio objekto struktūra pasikeičia, turite anuliuoti kaupyklą, kad užtikrintumėte, jog naudojate naujausius duomenis. Tai gali pridėti sudėtingumo jūsų kodui.

Globalūs pavyzdžiai ir aspektai

Prieigos šablonų kaupimo efektyvumas gali skirtis priklausomai nuo konteksto ir konkrečių pasiekiamų duomenų. Pavyzdžiui:

• El. prekybos platformos: Apsvarstykite el. prekybos platformą, rodančią produkto detales. Jei produkto duomenys, įskaitant įdėtas savybes, tokias kaip matmenys ar pristatymo informacija, yra dažnai pasiekiami, atitinkamų produkto objekto dalių kaupimas gali ženkliai pagreitinti puslapio įkėlimo laiką. Tai ypač svarbu vartotojams su lėtesniu interneto ryšiu regionuose su mažiau išvystyta interneto infrastruktūra.
• Finansinės programos: Finansinėse programose, kurios rodo realaus laiko akcijų kainas, prieiga prie įdėtų savybių, tokių kaip pirkimo/pardavimo kainos ir apimties duomenys, gali būti optimizuota naudojant prieigos šablonų kaupimą. Tai užtikrina, kad vartotojo sąsaja išliks jautri ir atnaujinta, net esant dažniems duomenų atnaujinimams. Pagalvokite apie akcijų prekybos programas, naudojamas visame pasaulyje, reikalaujančias greitų atnaujinimų ir atsako laiko, nepriklausomai nuo vartotojo vietos.
• Socialinės žiniasklaidos platformos: Socialinės žiniasklaidos srautai dažnai rodo vartotojų profilius su įdėta informacija, tokia kaip vieta, pomėgiai ir draugų sąrašai. Dažnai pasiekiamų vartotojo profilio dalių kaupimas gali pagerinti slinkimo patirtį ir sumažinti serverio apkrovą. Apsvarstykite vartotojus regionuose su ribotu pralaidumu; duomenų prieigos optimizavimas tampa svarbiausiu sklandžiai patirčiai užtikrinti.

Kuriant programą pasaulinei auditorijai, atsižvelkite, kad tinklo delsa gali labai skirtis skirtinguose regionuose. Optimizacijos, tokios kaip prieigos šablonų kaupimas, gali padėti sušvelninti didelės delsos poveikį, sumažinant užklausų, reikalingų duomenims gauti, skaičių. Taip pat supraskite, kad senesni įrenginiai gali turėti ribotą apdorojimo galią; todėl priekinės dalies našumo optimizavimas yra ypač svarbus. Pavyzdžiui, prieiga prie giliai įdėtų konfigūracijos verčių dideliame JSON atsakyme gali būti geras taikinys prieigos šablonų kaupimo naudojimui. Įsivaizduokite visame pasaulyje prieinamą svetainę, naudojančią skirtingus konfigūracijos parametrus pagal vartotojo geografinę vietą. Pasirinktinio grandinimo su kaupimu naudojimas reikalingiems parametrams iš konfigūracijos failo ar objekto išgauti gali ženkliai pagerinti jos našumą, ypač vartotojams su lėtesniu interneto ryšiu.

Alternatyvos ir susijusios technikos

• Memoizacija: Memoizacija yra technika, kuri apima funkcijų iškvietimų rezultatų kaupimą remiantis jų įvesties argumentais. Ji gali būti naudojama optimizuoti funkcijas, kurios pasiekia įdėtas savybes.
• Duomenų normalizavimas: Duomenų normalizavimas apima jūsų duomenų restruktūrizavimą, siekiant sumažinti pertekliškumą ir pagerinti duomenų prieigos efektyvumą.
• Objektų destruktūrizavimas: Objektų destruktūrizavimas leidžia išgauti konkrečias savybes iš objekto į kintamuosius. Nors tai nėra tiesiogiai susiję su kaupimu, tai gali pagerinti kodo skaitomumą ir potencialiai sumažinti pasirinktinio grandinimo poreikį kai kuriais atvejais.

Našumo pagerėjimų matavimas

Prieš ir po prieigos šablonų kaupimo įdiegimo būtina išmatuoti našumo pagerėjimus. Galite naudoti įrankius, tokius kaip Chrome DevTools „Performance“ skirtukas, kad profiliuotumėte savo kodą ir identifikuotumėte našumo kliuvinius.

Štai paprastas pavyzdys, kaip išmatuoti funkcijos našumą naudojant console.time ir console.timeEnd:

            console.time('withoutCaching');
for (let i = 0; i < 100000; i++) {
  displayUserCity(user);
}
console.timeEnd('withoutCaching');

console.time('withCaching');
for (let i = 0; i < 100000; i++) {
  displayUserCityOptimized(user);
}
console.timeEnd('withCaching');

            

              
                Copy
              
            
          

Nepamirškite paleisti šių testų kelis kartus, kad gautumėte tikslesnį matavimą.

Išvada

Pasirinktinis grandinimas yra vertinga JavaScript funkcija, kuri supaprastina kodą ir pagerina skaitomumą. Tačiau svarbu žinoti apie galimą jo poveikį našumui. Prieigos šablonų kaupimas yra paprasta, bet veiksminga technika optimizuoti dažnai naudojamas pasirinktinio grandinimo išraiškas. Kaupdami šių išraiškų rezultatus, galite sumažinti atliekamų patikrinimų skaičių ir pagerinti bendrą programos našumą. Nepamirškite atidžiai apsvarstyti kompromisų ir išmatuoti našumo pagerėjimų, kad įsitikintumėte, jog kaupimas yra naudingas jūsų konkrečiu atveju. Visada testuokite skirtingose naršyklėse ir įrenginiuose, kad patikrintumėte našumo pagerėjimus visai numatytai auditorijai.

Kuriant programas su pasauline vartotojų baze, kiekviena milisekundė yra svarbi. JavaScript kodo optimizavimas, įskaitant pasirinktinio grandinimo naudojimą, yra labai svarbus norint užtikrinti sklandžią ir jautrią vartotojo patirtį, nepriklausomai nuo vartotojo vietos, įrenginio ar tinklo sąlygų. Dažnai naudojamų savybių prieigos kaupimo įdiegimas yra tik viena iš daugelio technikų, užtikrinančių, kad jūsų Javascript programos būtų našios.