JavaScript našumo optimizavimas: kodo skaidymas ir atidėtasis įvertinimas

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Įkeliama...
}>
        
      
    

Šiame pavyzdyje OtherComponent yra įkeliamas tik tada, kai jis yra atvaizduojamas. Kol jis yra įkeliamas, vartotojas matys pranešimą „Įkeliama...“.

Įrankiai kodo skaidymui

• Webpack: Populiarus modulių surinkėjas, palaikantis įvairias kodo skaidymo technikas.
• Rollup: Kitas modulių surinkėjas, kuris orientuojasi į mažų, efektyvių paketų kūrimą.
• Parcel: Nulinės konfigūracijos surinkėjas, kuris automatiškai tvarko kodo skaidymą.
• Vite: Kūrimo įrankis, kuris naudoja natūralius ES modulius greitam kūrimui ir optimizuotoms gamybinėms versijoms.

Atidėtasis įvertinimas: skaičiavimų atidėjimas

Kas yra atidėtasis įvertinimas?

Atidėtasis įvertinimas, taip pat žinomas kaip atidėtasis vykdymas, yra programavimo technika, kai išraiškos įvertinimas yra atidedamas, kol jos vertė iš tikrųjų tampa reikalinga. Kitaip tariant, skaičiavimai atliekami tik tada, kai jų rezultatai yra būtini, o ne nedelsiant juos apskaičiuojant iš anksto.

Įsivaizduokite, kad ruošiate kelių patiekalų vakarienę. Jūs negamintumėte visų patiekalų iš karto. Vietoj to, ruoštumėte kiekvieną patiekalą tik tada, kai ateitų laikas jį patiekti. Atidėtasis įvertinimas veikia panašiai, atliekant skaičiavimus tik tada, kai jų rezultatai yra reikalingi.

Kaip veikia atidėtasis įvertinimas

JavaScript kalboje atidėtasis įvertinimas gali būti įgyvendintas naudojant įvairias technikas:

• Funkcijos: Išraiškos įvyniojimas į funkciją leidžia atidėti jos įvertinimą, kol funkcija bus iškviesta.
• Generatoriai: Generatoriai suteikia būdą sukurti iteratorius, kurie generuoja vertes pagal poreikį.
• Memoizacija: Memoizacija apima brangių funkcijų iškvietimų rezultatų išsaugojimą talpykloje ir išsaugoto rezultato grąžinimą, kai vėl pasitaiko tie patys įvesties duomenys.
• Proxy objektai: Proxy gali būti naudojami perimti prieigą prie savybių ir atidėti savybių verčių skaičiavimą, kol jos iš tikrųjų tampa pasiekiamos.

Atidėtojo įvertinimo privalumai

• Pagerintas našumas: Atidėdamas nereikalingus skaičiavimus, atidėtasis įvertinimas gali ženkliai pagerinti našumą, ypač dirbant su dideliais duomenų rinkiniais ar sudėtingais skaičiavimais.
• Sumažintas atminties naudojimas: Atidėtasis įvertinimas gali sumažinti atminties naudojimą, išvengiant tarpinių verčių, kurios nėra iš karto reikalingos, kūrimo.
• Padidėjęs reaktyvumas: Išvengiant nereikalingų skaičiavimų pradinio įkėlimo metu, atidėtasis įvertinimas gali padidinti programos reaktyvumą.
• Begalinių duomenų struktūros: Atidėtasis įvertinimas leidžia dirbti su begalinėmis duomenų struktūromis, tokiomis kaip begaliniai sąrašai ar srautai, apskaičiuojant tik būtinus elementus pagal poreikį.

Pavyzdys: atidėtasis paveikslėlių įkėlimas

Dažnas atidėtojo įvertinimo panaudojimo atvejis yra atidėtasis paveikslėlių įkėlimas. Vietoj to, kad iš anksto įkeltumėte visus paveikslėlius puslapyje, galite atidėti tų paveikslėlių, kurie iš pradžių nėra matomi peržiūros srityje, įkėlimą. Tai gali ženkliai pagerinti pradinį puslapio įkėlimo laiką ir sumažinti tinklo pralaidumo suvartojimą.

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

Šiame pavyzdyje naudojamas IntersectionObserver API, siekiant nustatyti, kada paveikslėlis patenka į peržiūros sritį. Kai paveikslėlis tampa matomas, jo src atributui priskiriama jo data-src atributo vertė, o tai sukelia paveikslėlio įkėlimą. Tada stebėtojas nustoja stebėti paveikslėlį, kad jis nebūtų įkeltas dar kartą.

Pavyzdys: Memoizacija

Memoizacija gali būti naudojama optimizuoti brangius funkcijų iškvietimus. Štai pavyzdys:

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) {
  // Imituojamas daug laiko reikalaujantis skaičiavimas
  for (let i = 0; i < 100000000; i++) {
    // Atliekamas veiksmas
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Pirmas iškvietimas');
console.log(memoizedCalculation(5)); // Pirmas iškvietimas - užtrunka
console.timeEnd('Pirmas iškvietimas');

console.time('Antras iškvietimas');
console.log(memoizedCalculation(5)); // Antras iškvietimas - akimirksniu grąžina išsaugotą vertę
console.timeEnd('Antras iškvietimas');

Šiame pavyzdyje funkcija memoize priima funkciją kaip įvesties duomenis ir grąžina memoizuotą tos funkcijos versiją. Memoizuota funkcija išsaugo ankstesnių iškvietimų rezultatus talpykloje, todėl vėlesni iškvietimai su tais pačiais argumentais gali grąžinti išsaugotą rezultatą, iš naujo nevykdant pradinės funkcijos.

Kodo skaidymas ir atidėtasis įvertinimas: pagrindiniai skirtumai

Nors tiek kodo skaidymas, tiek atidėtasis įvertinimas yra galingos optimizavimo technikos, jos sprendžia skirtingus našumo aspektus:

• Kodo skaidymas: Dėmesys skiriamas pradinio paketo dydžio mažinimui, padalijant kodą į mažesnes dalis ir jas įkeliant pagal poreikį. Daugiausia naudojamas pradiniam puslapio įkėlimo laikui pagerinti.
• Atidėtasis įvertinimas: Dėmesys skiriamas verčių skaičiavimo atidėjimui, kol jos iš tikrųjų tampa reikalingos. Daugiausia naudojamas našumui pagerinti, dirbant su brangiais skaičiavimais ar dideliais duomenų rinkiniais.

Iš esmės, kodo skaidymas sumažina kodo, kurį reikia atsisiųsti iš anksto, kiekį, o atidėtasis įvertinimas sumažina skaičiavimų, kuriuos reikia atlikti iš anksto, kiekį.

Kada naudoti kodo skaidymą, o kada – atidėtąjį įvertinimą

Kodo skaidymas

• Didelės programos: Naudokite kodo skaidymą programoms su dideliu JavaScript kodo kiekiu, ypač toms, kurios turi kelis maršrutus ar funkcijas.
• Pradinio įkėlimo laiko gerinimas: Naudokite kodo skaidymą, kad pagerintumėte pradinį puslapio įkėlimo laiką ir sutrumpintumėte laiką iki interaktyvumo.
• Tinklo pralaidumo mažinimas: Naudokite kodo skaidymą, kad sumažintumėte duomenų, kuriuos reikia perduoti per tinklą, kiekį.

Atidėtasis įvertinimas

• Brangūs skaičiavimai: Naudokite atidėtąjį įvertinimą funkcijoms, kurios atlieka brangius skaičiavimus arba pasiekia didelius duomenų rinkinius.
• Reaktyvumo gerinimas: Naudokite atidėtąjį įvertinimą, kad pagerintumėte programos reaktyvumą, atidėdami nereikalingus skaičiavimus pradinio įkėlimo metu.
• Begalinių duomenų struktūros: Naudokite atidėtąjį įvertinimą dirbant su begalinėmis duomenų struktūromis, tokiomis kaip begaliniai sąrašai ar srautai.
• Atidėtasis medijos įkėlimas: Įdiekite atidėtąjį įkėlimą paveikslėliams, vaizdo įrašams ir kitam medijos turiniui, kad pagerintumėte puslapio įkėlimo laiką.

Kodo skaidymo ir atidėtojo įvertinimo derinimas

Daugeliu atvejų kodo skaidymą ir atidėtąjį įvertinimą galima derinti, kad būtų pasiektas dar didesnis našumo padidėjimas. Pavyzdžiui, galite naudoti kodo skaidymą, kad padalintumėte savo programą į mažesnes dalis, o tada naudoti atidėtąjį įvertinimą, kad atidėtumėte verčių skaičiavimą tose dalyse.

Apsvarstykite el. prekybos programą. Galėtumėte naudoti kodo skaidymą, kad padalintumėte programą į atskirus paketus produktų sąrašo puslapiui, produkto detalios informacijos puslapiui ir atsiskaitymo puslapiui. Tada, produkto detalios informacijos puslapyje, galėtumėte naudoti atidėtąjį įvertinimą, kad atidėtumėte paveikslėlių įkėlimą ar produktų rekomendacijų skaičiavimą, kol jų iš tikrųjų prireiks.

Daugiau nei kodo skaidymas ir atidėtasis įvertinimas: papildomos optimizavimo technikos

Nors kodo skaidymas ir atidėtasis įvertinimas yra galingos technikos, jos yra tik dvi dėlionės dalys, kalbant apie JavaScript našumo optimizavimą. Štai keletas papildomų technikų, kurias galite naudoti našumui dar labiau pagerinti:

• Minifikavimas: Pašalinkite nereikalingus simbolius (pvz., tarpus, komentarus) iš savo kodo, kad sumažintumėte jo dydį.
• Suspaudimas: Suspauskite savo kodą naudodami įrankius, tokius kaip Gzip ar Brotli, kad dar labiau sumažintumėte jo dydį.
• Talpyklos naudojimas (Caching): Pasinaudokite naršyklės ir CDN talpyklomis, kad sumažintumėte užklausų į jūsų serverį skaičių.
• „Medžio drebinimas“ (Tree Shaking): Pašalinkite nenaudojamą kodą iš savo paketų, kad sumažintumėte jų dydį.
• Paveikslėlių optimizavimas: Optimizuokite paveikslėlius juos suspaudžiant, keičiant jų dydį iki tinkamų matmenų ir naudojant modernius paveikslėlių formatus, tokius kaip WebP.
• Debouncing ir Throttling: Kontroliuokite įvykių apdorojimo funkcijų vykdymo dažnį, kad išvengtumėte našumo problemų.
• Efektyvus DOM manipuliavimas: Sumažinkite DOM manipuliacijas ir naudokite efektyvias DOM manipuliavimo technikas.
• Web Workers: Perkelkite skaičiavimams imlias užduotis į „web workers“, kad jos neblokuotų pagrindinės gijos.

Išvada

JavaScript našumo optimizavimas yra esminis aspektas, siekiant suteikti teigiamą vartotojo patirtį ir pasiekti verslo tikslus. Kodo skaidymas ir atidėtasis įvertinimas yra dvi galingos technikos, kurios gali ženkliai pagerinti našumą, sutrumpinant pradinį įkėlimo laiką, mažinant tinklo pralaidumo suvartojimą ir atidedant nereikalingus skaičiavimus. Suprasdami, kaip šios technikos veikia ir kada jas naudoti, galite sukurti greitesnes, jautresnes ir malonesnes naudoti žiniatinklio programas.

Nepamirškite atsižvelgti į savo konkrečios programos reikalavimus ir naudokite technikas, kurios labiausiai tinka jūsų poreikiams. Nuolat stebėkite savo programos našumą ir tobulinkite optimizavimo strategijas, siekdami užtikrinti, kad suteikiate geriausią įmanomą vartotojo patirtį. Pasinaudokite kodo skaidymo ir atidėtojo įvertinimo galia, kad sukurtumėte žiniatinklio programas, kurios yra ne tik turtingos funkcijomis, bet ir našios bei malonios naudoti visame pasaulyje.

Papildomi mokymosi šaltiniai

• Webpack dokumentacija: https://webpack.js.org/
• Rollup dokumentacija: https://rollupjs.org/guide/en/
• Vite dokumentacija: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - JavaScript vykdymo optimizavimas: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/