React planuoklio profiliavimas: atskleidžiame užduočių vykdymą siekiant optimizuoti našumą

Šiuolaikinio žiniatinklio kūrimo pasaulyje sklandžios ir greitai reaguojančios vartotojo patirties užtikrinimas yra svarbiausias dalykas. „React“, su savo komponentais pagrįsta architektūra ir virtualiu DOM, tapo sudėtingų vartotojo sąsajų kūrimo pagrindu. Tačiau net ir su „React“ optimizacijomis gali kilti našumo problemų, ypač didelėse ir sudėtingose programose. Supratimas, kaip „React“ planuoja ir vykdo užduotis, yra labai svarbus norint nustatyti ir išspręsti šias našumo problemas. Šiame straipsnyje gilinamasi į „React“ planuoklio profiliavimo pasaulį, pateikiant išsamų vadovą, kaip analizuoti užduočių vykdymą ir optimizuoti „React“ programas siekiant didžiausio našumo.

Supratimas apie „React“ planuoklį

Prieš pradedant nagrinėti profiliavimo technikas, susipažinkime su pagrindiniais „React“ planuoklio (Scheduler) principais. „React“ planuoklis yra atsakingas už darbo vykdymo valdymą „React“ programoje. Jis nustato užduočių prioritetus, suskaido jas į mažesnius darbo vienetus ir planuoja jų vykdymą taip, kad kuo mažiau blokuotų pagrindinę giją. Šis planavimas yra labai svarbus norint išlaikyti reaguojančią vartotojo sąsają.

„React“ naudoja „Fiber“ architektūrą, kuri leidžia suskaidyti atvaizdavimą į mažesnius, pertraukiamus darbo vienetus. Šie vienetai vadinami „Fiber“ (skaidulomis), o „React“ planuoklis valdo šias skaidulas, kad užtikrintų, jog aukšto prioriteto užduotys (pvz., vartotojo įvestis) būtų apdorojamos nedelsiant. Planuoklis naudoja prioritetų eilę skaiduloms valdyti, leidžiančią nustatyti atnaujinimų prioritetus pagal jų skubumą.

Pagrindinės sąvokos:

• Fiber: Darbo vienetas, atstovaujantis komponento egzempliorių.
• Planuoklis (Scheduler): Modulis, atsakingas už „Fiber“ vienetų prioritetų nustatymą ir planavimą.
• Darbo ciklas (WorkLoop): Funkcija, kuri iteruoja per „Fiber“ medį ir atlieka atnaujinimus.
• Prioritetų eilė (Priority Queue): Duomenų struktūra, naudojama „Fiber“ vienetams valdyti pagal jų prioritetą.

Profiliavimo svarba

Profiliavimas yra jūsų programos našumo charakteristikų matavimo ir analizės procesas. „React“ kontekste profiliavimas leidžia suprasti, kaip „React“ planuoklis vykdo užduotis, nustatyti ilgai trunkančias operacijas ir identifikuoti sritis, kuriose optimizavimas gali turėti didžiausią poveikį. Be profiliavimo jūs iš esmės veikiate aklai, bandydami pagerinti našumą remdamiesi spėlionėmis.

Įsivaizduokite situaciją, kai jūsų programa pastebimai vėluoja, kai vartotojas sąveikauja su konkrečiu komponentu. Profiliavimas gali atskleisti, ar vėlavimas atsiranda dėl sudėtingos atvaizdavimo operacijos tame komponente, neefektyvaus duomenų gavimo proceso ar pernelyg dažno pervaizdavimo, kurį sukelia būsenos atnaujinimai. Nustatę pagrindinę priežastį, galite sutelkti savo optimizavimo pastangas į tas sritis, kurios duos didžiausią našumo naudą.

Įrankiai „React“ planuoklio profiliavimui

Yra keletas galingų įrankių, skirtų „React“ programų profiliavimui ir įžvalgoms apie užduočių vykdymą „React“ planuoklyje gauti:

1. „Chrome DevTools“ našumo skiltis

„Chrome DevTools“ našumo (Performance) skiltis yra universalus įrankis, skirtas įvairiems žiniatinklio programų aspektams profiliuoti, įskaitant „React“ našumą. Ji pateikia išsamią visų naršyklėje vykstančių veiklų laiko juostą, įskaitant JavaScript vykdymą, atvaizdavimą, piešimą ir tinklo užklausas. Įrašydami našumo profilį sąveikaudami su savo „React“ programa, galite nustatyti našumo trūkumus ir analizuoti „React“ užduočių vykdymą.

Kaip naudoti:

1. Atidarykite „Chrome DevTools“ (Ctrl+Shift+I arba Cmd+Option+I).
2. Eikite į skiltį „Performance“.
3. Spustelėkite mygtuką „Record“ (Įrašyti).
4. Sąveikaukite su savo „React“ programa, kad sukeltumėte elgseną, kurią norite profiliuoti.
5. Spustelėkite mygtuką „Stop“ (Sustabdyti), kad sustabdytumėte įrašymą.
6. Analizuokite sugeneruotą laiko juostą, kad nustatytumėte našumo trūkumus.

Našumo skiltis suteikia įvairių rodinių surinktiems duomenims analizuoti, įskaitant:

• Liepsnos diagrama (Flame Chart): Vizualizuoja JavaScript funkcijų iškvietimų dėklą, leidžiantį nustatyti funkcijas, kurios sunaudoja daugiausiai laiko.
• Iš apačios į viršų (Bottom-Up): Sugrupuoja laiką, praleistą kiekvienoje funkcijoje ir jos iškviestose funkcijose, padedant nustatyti brangiausias operacijas.
• Iškvietimų medis (Call Tree): Rodomas iškvietimų dėklas hierarchine forma, suteikiantis aiškų vykdymo eigos vaizdą.

Našumo skiltyje ieškokite su „React“ susijusių įrašų, tokių kaip „Update“ (atstovaujantis komponento atnaujinimą) arba „Commit“ (atstovaujantis galutinį atnaujinto DOM atvaizdavimą). Šie įrašai gali suteikti vertingų įžvalgų apie laiką, praleistą atvaizduojant komponentus.

2. „React DevTools“ profiliuoklis

„React DevTools“ profiliuoklis yra specializuotas įrankis, sukurtas specialiai „React“ programoms profiliuoti. Jis suteikia labiau sufokusuotą „React“ vidinių operacijų vaizdą, todėl lengviau nustatyti našumo problemas, susijusias su komponentų atvaizdavimu, būsenos atnaujinimais ir rekvizitų (props) pasikeitimais.

Įdiegimas:

„React DevTools“ profiliuoklis yra prieinamas kaip naršyklės plėtinys „Chrome“, „Firefox“ ir „Edge“. Jį galite įdiegti iš atitinkamos naršyklės plėtinių parduotuvės.

Naudojimas:

1. Atidarykite „React DevTools“ skydelį savo naršyklėje.
2. Eikite į skiltį „Profiler“.
3. Spustelėkite mygtuką „Record“ (Įrašyti).
4. Sąveikaukite su savo „React“ programa, kad sukeltumėte elgseną, kurią norite profiliuoti.
5. Spustelėkite mygtuką „Stop“ (Sustabdyti), kad sustabdytumėte įrašymą.

Profiliuoklis pateikia du pagrindinius rodinius surinktiems duomenims analizuoti:

• Liepsnos grafikas (Flamegraph): Vizualus komponentų medžio vaizdas, kuriame kiekviena juosta atspindi komponentą, o jos plotis – laiką, praleistą atvaizduojant tą komponentą.
• Rikiuotas sąrašas (Ranked): Komponentų sąrašas, surikiuotas pagal laiką, kurio prireikė jiems atvaizduoti, leidžiantis greitai nustatyti brangiausius komponentus.

„React DevTools“ profiliuoklis taip pat suteikia funkcijų:

• Atnaujinimų paryškinimas: Vizualiai paryškina komponentus, kurie yra pervaizduojami, padedant nustatyti nereikalingus pervaizdavimus.
• Komponentų rekvizitų (props) ir būsenos (state) tikrinimas: Tikrina komponentų rekvizitus ir būseną, kad suprastumėte, kodėl jie yra pervaizduojami.
• Komponentų filtravimas: Sutelkia dėmesį į konkrečius komponentus ar komponentų medžio dalis.

3. Komponentas „React.Profiler“

Komponentas React.Profiler yra integruotas „React“ API, leidžiantis matuoti konkrečių programos dalių atvaizdavimo našumą. Jis suteikia programinį būdą rinkti profiliavimo duomenis, nepasikliaujant išoriniais įrankiais.

Naudojimas:

Apgaubkite komponentus, kuriuos norite profiliuoti, React.Profiler komponentu. Pateikite id rekvizitą profiliuokliui identifikuoti ir onRender rekvizitą, kuris yra atgalinio iškvietimo (callback) funkcija, kuri bus iškviesta po kiekvieno atvaizdavimo.

import React from 'react';

function MyComponent() {
  return (
    
      {/* Component content */}
    
  );
}

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set
) {
  console.log(`Component ${id} rendered`);
  console.log(`Phase: ${phase}`);
  console.log(`Actual duration: ${actualDuration}ms`);
  console.log(`Base duration: ${baseDuration}ms`);
}

onRender atgalinio iškvietimo funkcija gauna kelis argumentus, kurie suteikia informacijos apie atvaizdavimo procesą:

• id: Komponento React.Profiler rekvizitas id.
• phase: Nurodo, ar komponentas buvo ką tik prijungtas (mount), ar atnaujintas (update).
• actualDuration: Laikas, praleistas atvaizduojant komponentą šiame atnaujinime.
• baseDuration: Numatomas laikas, reikalingas komponentų medžio atvaizdavimui be memoizacijos.
• startTime: Kada „React“ pradėjo šį atnaujinimą.
• commitTime: Kada „React“ patvirtino šį atnaujinimą.
• interactions: „Sąveikų“ (interactions) rinkinys, kurios buvo sekamos, kai buvo suplanuotas šis atnaujinimas.

Galite naudoti šiuos duomenis, kad stebėtumėte savo komponentų atvaizdavimo našumą ir nustatytumėte sritis, kuriose reikia optimizavimo.

Profiliavimo duomenų analizė

Kai surinksite profiliavimo duomenis naudodami vieną iš minėtų įrankių, kitas žingsnis yra analizuoti duomenis ir nustatyti našumo trūkumus. Štai keletas pagrindinių sričių, į kurias reikia sutelkti dėmesį:

1. Lėtai atvaizduojamų komponentų nustatymas

Liepsnos grafiko (Flamegraph) ir Rikiuoto sąrašo (Ranked) rodiniai „React DevTools“ profiliuoklyje yra ypač naudingi nustatant komponentus, kurių atvaizdavimas trunka ilgai. Ieškokite komponentų su plačiomis juostomis Liepsnos grafike arba komponentų, kurie yra Rikiuoto sąrašo viršuje. Šie komponentai yra tikėtini kandidatai optimizavimui.

„Chrome DevTools“ našumo skiltyje ieškokite „Update“ įrašų, kurie sunaudoja daug laiko. Šie įrašai atspindi komponentų atnaujinimus, o laikas, praleistas šiuose įrašuose, rodo atitinkamų komponentų atvaizdavimo kainą.

2. Nereikalingų pervaizdavimų nustatymas

Nereikalingi pervaizdavimai gali smarkiai paveikti našumą, ypač sudėtingose programose. „React DevTools“ profiliuoklis gali padėti nustatyti komponentus, kurie yra pervaizduojami net tada, kai jų rekvizitai (props) ar būsena (state) nepasikeitė.

„React DevTools“ nustatymuose įjunkite parinktį „Highlight updates when components render“ (Paryškinti atnaujinimus, kai komponentai atvaizduojami). Tai vizualiai paryškins komponentus, kurie yra pervaizduojami, todėl bus lengva pastebėti nereikalingus pervaizdavimus. Ištirkite priežastis, kodėl šie komponentai yra pervaizduojami, ir įgyvendinkite technikas, kad to išvengtumėte, pvz., naudodami React.memo arba useMemo.

3. Brangių skaičiavimų tyrimas

Ilgai trunkantys skaičiavimai jūsų komponentuose gali blokuoti pagrindinę giją ir sukelti našumo problemų. „Chrome DevTools“ našumo skiltis yra vertingas įrankis šiems skaičiavimams nustatyti.

Ieškokite JavaScript funkcijų, kurios sunaudoja daug laiko Liepsnos diagramoje (Flame Chart) arba Iš apačios į viršų (Bottom-Up) rodiniuose. Šios funkcijos gali atlikti sudėtingus skaičiavimus, duomenų transformacijas ar kitas brangias operacijas. Apsvarstykite galimybę optimizuoti šias funkcijas naudodami memoizaciją, podėliavimą (caching) ar efektyvesnius algoritmus.

4. Tinklo užklausų analizė

Tinklo užklausos taip pat gali prisidėti prie našumo trūkumų, ypač jei jos yra lėtos ar dažnos. „Chrome DevTools“ tinklo (Network) skiltis suteikia įžvalgų apie jūsų programos tinklo veiklą.

Ieškokite užklausų, kurių įvykdymas trunka ilgai, arba užklausų, kurios siunčiamos pakartotinai. Apsvarstykite galimybę optimizuoti šias užklausas naudodami podėliavimą, puslapiavimą (pagination) ar efektyvesnes duomenų gavimo strategijas.

5. Planuoklio sąveikų supratimas

Gilesnis supratimas, kaip „React“ planuoklis nustato prioritetus ir vykdo užduotis, gali būti neįkainojamas optimizuojant našumą. Nors „Chrome DevTools“ našumo skiltis ir „React DevTools“ profiliuoklis suteikia tam tikrą matomumą į planuoklio operacijas, surinktų duomenų analizė reikalauja subtilesnio „React“ vidinės veiklos supratimo.

Sutelkite dėmesį į sąveikas tarp komponentų ir planuoklio. Jei tam tikri komponentai nuolat sukelia aukšto prioriteto atnaujinimus, išanalizuokite, kodėl šie atnaujinimai yra būtini ir ar juos galima atidėti ar optimizuoti. Atkreipkite dėmesį, kaip planuoklis kaitalioja skirtingų tipų užduotis, tokias kaip atvaizdavimas, išdėstymas ir piešimas. Jei planuoklis nuolat perjunginėja užduotis, tai gali rodyti, kad programa patiria „trashing“ (per didelį resursų naudojimą), o tai gali lemti našumo sumažėjimą.

Optimizavimo technikos

Kai profiliavimo metu nustatysite našumo trūkumus, kitas žingsnis yra įgyvendinti optimizavimo technikas, siekiant pagerinti programos našumą. Štai keletas įprastų optimizavimo strategijų:

1. Memoizacija

Memoizacija yra technika, skirta brangių funkcijų iškvietimų rezultatams išsaugoti podėlyje ir grąžinti išsaugotą rezultatą, kai vėl gaunami tie patys įvesties duomenys. „React“ programoje galite naudoti React.memo funkciniams komponentams memoizuoti ir useMemo „kabliuką“ (hook) skaičiavimų rezultatams memoizuoti.

import React, { useMemo } from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // ... component logic
});

function MyComponentWithMemoizedValue() {
  const expensiveValue = useMemo(() => {
    // ... expensive computation
    return result;
  }, [dependencies]);

  return (
    

      {expensiveValue}
    
  );
}

2. Virtualizacija

Virtualizacija yra technika, skirta efektyviam didelių sąrašų ar lentelių atvaizdavimui, atvaizduojant tik matomus elementus. Bibliotekos, tokios kaip react-window ir react-virtualized, suteikia komponentus sąrašų ir lentelių virtualizavimui „React“ programose.

3. Kodo skaidymas

Kodo skaidymas yra technika, skirta jūsų programai suskaidyti į mažesnius gabalus ir juos įkelti pagal poreikį. Tai gali sumažinti pradinį programos įkėlimo laiką ir pagerinti bendrą našumą. „React“ palaiko kodo skaidymą naudojant dinaminius importus ir React.lazy bei Suspense komponentus.

import React, { Suspense } from 'react';

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

function App() {
  return (
    Loading...