Maksimālas veiktspējas atslēgšana: Padziļināts ieskats React Profiler API

Mūsdienu tīmekļa izstrādes pasaulē lietotāja pieredze ir vissvarīgākā. Plūstošs, atsaucīgs interfeiss var būt izšķirošais faktors starp apmierinātu un neapmierinātu lietotāju. Izstrādātājiem, kas izmanto React, sarežģītu un dinamisku lietotāja saskarņu veidošana ir pieejamāka nekā jebkad agrāk. Tomēr, lietojumprogrammām kļūstot sarežģītākām, pieaug arī veiktspējas problēmu risks — smalkas neefektivitātes, kas var izraisīt lēnu mijiedarbību, saraustītas animācijas un kopumā sliktu lietotāja pieredzi. Tieši šeit React Profiler API kļūst par neaizstājamu rīku izstrādātāja arsenālā.

Šis visaptverošais ceļvedis jūs aizvedīs padziļinātā React Profiler izpētē. Mēs izpētīsim, kas tas ir, kā to efektīvi izmantot gan ar React DevTools, gan ar tā programmatisko API, un, pats galvenais, kā interpretēt tā rezultātus, lai diagnosticētu un novērstu izplatītas veiktspējas problēmas. Līdz beigām jūs būsiet gatavs pārvērst veiktspējas analīzi no biedējoša uzdevuma par sistemātisku un atalgojošu daļu no jūsu izstrādes darba plūsmas.

Kas ir React Profiler API?

React Profiler ir specializēts rīks, kas izstrādāts, lai palīdzētu izstrādātājiem izmērīt React lietojumprogrammas veiktspēju. Tā galvenā funkcija ir apkopot laika informāciju par katru komponentu, kas tiek renderēts jūsu lietojumprogrammā, ļaujot jums identificēt, kuras lietotnes daļas ir dārgi renderēt un kas varētu radīt veiktspējas problēmas.

Tas atbild uz tādiem būtiskiem jautājumiem kā:

• Cik ilgi aizņem konkrēta komponenta renderēšana?
• Cik reizes komponents tiek pārzīmēts (re-render) lietotāja mijiedarbības laikā?
• Kāpēc konkrēts komponents tika pārzīmēts?

Ir svarīgi atšķirt React Profiler no vispārējiem pārlūkprogrammas veiktspējas rīkiem, piemēram, cilnes "Performance" Chrome DevTools vai Lighthouse. Lai gan šie rīki ir lieliski piemēroti kopējās lapas ielādes, tīkla pieprasījumu un skriptu izpildes laika mērīšanai, React Profiler sniedz jums fokusētu, komponentu līmeņa skatījumu uz veiktspēju React ekosistēmas ietvaros. Tas saprot React dzīves ciklu un var precīzi noteikt neefektivitātes, kas saistītas ar stāvokļa (state) izmaiņām, īpašībām (props) un kontekstu, ko citi rīki nevar redzēt.

Profiler ir pieejams divos galvenajos veidos:

1. React DevTools paplašinājums: Lietotājam draudzīgs, grafisks interfeiss, kas integrēts tieši jūsu pārlūkprogrammas izstrādātāja rīkos. Šis ir visizplatītākais veids, kā sākt profilēšanu.
2. Programmatiskais `` komponents: Komponents, ko varat pievienot tieši savam JSX kodam, lai programmatiski apkopotu veiktspējas mērījumus, kas ir noderīgi automatizētai testēšanai vai metrikas nosūtīšanai uz analītikas pakalpojumu.

Būtiski, ka Profiler ir paredzēts izstrādes vidēm. Lai gan pastāv īpašs produkcijas builds ar iespējotu profilēšanu, standarta React produkcijas builds izslēdz šo funkcionalitāti, lai bibliotēka būtu pēc iespējas vieglāka un ātrāka jūsu gala lietotājiem.

Darba sākšana: Kā lietot React Profiler

Pievērsīsimies praksei. Jūsu lietojumprogrammas profilēšana ir vienkāršs process, un abu metožu izpratne sniegs jums maksimālu elastību.

1. metode: React DevTools Profiler cilne

Lielākajai daļai ikdienas veiktspējas atkļūdošanas Profiler cilne React DevTools ir jūsu galvenais rīks. Ja jums tas nav instalēts, tas ir pirmais solis — iegūstiet paplašinājumu savai izvēlētajai pārlūkprogrammai (Chrome, Firefox, Edge).

Šeit ir soli pa solim ceļvedis jūsu pirmās profilēšanas sesijas veikšanai:

1. Atveriet savu lietojumprogrammu: Dodieties uz savu React lietojumprogrammu, kas darbojas izstrādes režīmā. Jūs zināsiet, ka DevTools ir aktīvi, ja redzēsiet React ikonu savas pārlūkprogrammas paplašinājumu joslā.
2. Atveriet izstrādātāja rīkus: Atveriet savas pārlūkprogrammas izstrādātāja rīkus (parasti ar F12 vai Ctrl+Shift+I / Cmd+Option+I) un atrodiet cilni "Profiler". Ja jums ir daudz cilņu, tā var būt paslēpta aiz "»" bultiņas.
3. Sāciet profilēšanu: Profiler saskarnē redzēsiet zilu apli (ierakstīšanas poga). Noklikšķiniet uz tās, lai sāktu ierakstīt veiktspējas datus.
4. Mijiedarbojieties ar savu lietotni: Veiciet darbību, kuru vēlaties izmērīt. Tas varētu būt jebkas, sākot no lapas ielādes, pogas noklikšķināšanas, kas atver modālo logu, rakstīšanas formā vai liela saraksta filtrēšanas. Mērķis ir reproducēt lietotāja mijiedarbību, kas šķiet lēna.
5. Pārtrauciet profilēšanu: Kad esat pabeidzis mijiedarbību, vēlreiz noklikšķiniet uz ierakstīšanas pogas (tagad tā būs sarkana), lai pārtrauktu sesiju.

Tas arī viss! Profiler apstrādās savāktos datus un parādīs jums detalizētu jūsu lietojumprogrammas renderēšanas veiktspējas vizualizāciju šīs mijiedarbības laikā.

2. metode: Programmatiskais `Profiler` komponents

Lai gan DevTools ir lieliski piemērots interaktīvai atkļūdošanai, dažreiz ir nepieciešams apkopot veiktspējas datus automātiski. `` komponents, kas eksportēts no `react` pakotnes, ļauj to izdarīt.

Jūs varat ietīt jebkuru sava komponentu koka daļu ar `` komponentu. Tam ir nepieciešami divi props:

• `id` (string): Unikāls identifikators koka daļai, kuru profilējat. Tas palīdz atšķirt mērījumus no dažādiem profileriem.
• `onRender` (function): Atsauces funkcija (callback), kuru React izsauc katru reizi, kad komponents profilētajā kokā "apstiprina" (commits) atjauninājumu.

Šeit ir koda piemērs:

import React, { Profiler } from 'react';

// onRender atsauces funkcija
function onRenderCallback(
  id, // Profiler koka "id" prop, kas tikko ir apstiprinājis
  phase, // "mount" (ja koks tikko tika ielādēts) vai "update" (ja tas tika pārzīmēts)
  actualDuration, // laiks, kas pavadīts, renderējot apstiprināto atjauninājumu
  baseDuration, // aptuvenais laiks, lai renderētu visu apakškoku bez memoizācijas
  startTime, // kad React sāka renderēt šo atjauninājumu
  commitTime, // kad React apstiprināja šo atjauninājumu
  interactions // mijiedarbību kopa, kas izraisīja atjauninājumu
) {
  // Jūs varat reģistrēt šos datus, nosūtīt tos uz analītikas galapunktu vai apkopot tos.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` atsauces funkcijas parametru izpratne:

• `id`: `id` virkne, kuru jūs nodevāt `` komponentam.
• `phase`: Vai nu `"mount"` (komponents tika ielādēts pirmo reizi), vai `"update"` (tas tika pārzīmēts props, stāvokļa vai hooks izmaiņu dēļ).
• `actualDuration`: Laiks milisekundēs, kas bija nepieciešams, lai renderētu `` un tā pēcnācējus šim konkrētajam atjauninājumam. Šis ir jūsu galvenais rādītājs lēnu renderēšanu identificēšanai.
• `baseDuration`: Novērtējums, cik ilgs laiks būtu nepieciešams, lai renderētu visu apakškoku no nulles. Tas ir "sliktākā gadījuma" scenārijs un ir noderīgs, lai saprastu komponentu koka kopējo sarežģītību. Ja `actualDuration` ir daudz mazāks par `baseDuration`, tas norāda, ka optimizācijas, piemēram, memoizācija, darbojas efektīvi.
• `startTime` un `commitTime`: Laikspiedoli, kad React sāka renderēt un kad tas apstiprināja atjauninājumu DOM. Tos var izmantot, lai sekotu līdzi veiktspējai laika gaitā.
• `interactions`: "Mijiedarbību" kopa, kas tika izsekota, kad tika ieplānots atjauninājums (šī ir daļa no eksperimentālas API, lai izsekotu atjauninājumu cēloni).

Profilera rezultātu interpretācija: Ceļvedis

Pēc ierakstīšanas sesijas pārtraukšanas React DevTools jums tiek parādīts milzīgs informācijas daudzums. Apskatīsim galvenās lietotāja saskarnes daļas.

"Commit" atlasītājs

Profilera augšpusē redzēsiet stabiņu diagrammu. Katrs stabiņš šajā diagrammā apzīmē vienu "commit" (apstiprinājumu), ko React veica DOM ierakstīšanas laikā. Stabiņa augstums un krāsa norāda, cik ilgs laiks bija nepieciešams šī commit renderēšanai — garāki, dzelteni/oranži stabiņi ir dārgāki nekā īsāki, zili/zaļi stabiņi. Jūs varat noklikšķināt uz šiem stabiņiem, lai pārbaudītu katra konkrētā renderēšanas cikla detaļas.

Liesmu diagramma (Flamegraph Chart)

Šī ir visspēcīgākā vizualizācija. Izvēlētajam commit, liesmu diagramma parāda, kuri komponenti jūsu lietojumprogrammā tika renderēti. Lūk, kā to lasīt:

• Komponentu hierarhija: Diagramma ir strukturēta kā jūsu komponentu koks. Augšējie komponenti izsauca zemāk esošos komponentus.
• Renderēšanas laiks: Komponenta joslas platums atbilst tam, cik daudz laika tas un tā bērni aizņēma renderēšanai. Platākas joslas ir tās, kuras jums vajadzētu izpētīt vispirms.
• Krāsu kodēšana: Joslas krāsa arī norāda renderēšanas laiku, no vēsām krāsām (zila, zaļa) ātrai renderēšanai līdz siltām krāsām (dzeltena, oranža, sarkana) lēnai.
• Pelēki komponenti: Pelēka josla nozīmē, ka komponents netika pārzīmēts šī konkrētā commit laikā. Tas ir lielisks rādītājs! Tas nozīmē, ka jūsu memoizācijas stratēģijas, visticamāk, darbojas šim komponentam.

Sarindotā diagramma (Ranked Chart)

Ja liesmu diagramma šķiet pārāk sarežģīta, varat pārslēgties uz sarindoto diagrammas skatu. Šis skats vienkārši uzskaita visus komponentus, kas tika renderēti atlasītā commit laikā, sakārtotus pēc tā, kurš aizņēma visilgāko laiku renderēšanai. Tas ir lielisks veids, kā nekavējoties identificēt savus dārgākos komponentus.

Komponenta detaļu panelis

Noklikšķinot uz konkrēta komponenta liesmu vai sarindotajā diagrammā, labajā pusē parādās detaļu panelis. Šeit jūs atradīsiet vispraktiskāko informāciju:

• Renderēšanas ilgums: Tas parāda `actualDuration` un `baseDuration` šim komponentam atlasītajā commit.
• "Rendered at": Šeit ir uzskaitīti visi commit, kuros šis komponents tika renderēts, ļaujot jums ātri redzēt, cik bieži tas tiek atjaunināts.
• "Why did this render?": Šī bieži vien ir visvērtīgākā informācija. React DevTools centīsies pēc iespējas labāk pateikt, kāpēc komponents tika pārzīmēts. Biežākie iemesli ir:
  • Props mainījās
  • Hooks mainījās (piem., `useState` vai `useReducer` vērtība tika atjaunināta)
  • Vecākkomponents tika renderēts (tas ir biežs iemesls nevajadzīgām pārzīmēšanām bērnu komponentos)
  • Konteksts mainījās

Biežākās veiktspējas problēmas un kā tās novērst

Tagad, kad jūs zināt, kā apkopot un lasīt veiktspējas datus, izpētīsim biežākās problēmas, ko Profiler palīdz atklāt, un standarta React modeļus to risināšanai.

1. problēma: Nevajadzīgas pārzīmēšanas (Re-renders)

Šī ir visizplatītākā veiktspējas problēma React lietojumprogrammās. Tā rodas, kad komponents tiek pārzīmēts, lai gan tā rezultāts būtu tieši tāds pats. Tas tērē CPU ciklus un var padarīt jūsu lietotāja saskarni lēnīgu.

Diagnoze:

• Profiler rīkā jūs redzat, ka komponents tiek renderēts ļoti bieži daudzos commit.
• Sadaļa "Why did this render?" norāda, ka tas ir tāpēc, ka tā vecākkomponents tika pārzīmēts, lai gan tā paša props nemainījās.
• Daudzi komponenti liesmu diagrammā ir iekrāsoti, lai gan faktiski mainījās tikai neliela daļa no stāvokļa, no kura tie ir atkarīgi.

1. risinājums: `React.memo()`

`React.memo` ir augstākās kārtas komponents (HOC), kas memoizē jūsu komponentu. Tas veic seklu (shallow) komponenta iepriekšējo un jauno props salīdzināšanu. Ja props ir vienādi, React izlaidīs komponenta pārzīmēšanu un atkārtoti izmantos pēdējo renderēto rezultātu.

Pirms `React.memo`:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// Vecākkomponentā:
// Ja vecākkomponents tiek pārzīmēts jebkāda iemesla dēļ (piem., mainās tā paša stāvoklis),
// UserAvatar tiks pārzīmēts, pat ja userName un avatarUrl ir identiski.

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// Tagad UserAvatar tiks pārzīmēts TIKAI tad, ja userName vai avatarUrl props faktiski mainīsies.

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Šī funkcija tiek atkārtoti izveidota katrā ParentComponent renderēšanas reizē
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* MemoizedListItem tiks pārzīmēts katru reizi, kad mainās count, jo handleItemClick ir jauna funkcija */}
      
    
  );
}

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Šī funkcija tagad ir memoizēta un netiks atkārtoti izveidota, ja vien nemainīsies tās atkarības (tukšs masīvs).
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // Tukšs atkarību masīvs nozīmē, ka tā tiek izveidota tikai vienu reizi

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* Tagad MemoizedListItem NETIKS pārzīmēts, kad mainīsies count */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // Šī dārgā filtrēšanas operācija tiek izpildīta KATRĀ ProductList renderēšanas reizē,
  // pat ja mainījās tikai nesaistīts prop.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // Šis aprēķins tagad tiek veikts tikai tad, ja mainās `products` vai `filterTerm`.
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... un vēl 20 citas vērtības
});

// MyComponent.js
// Šim komponentam ir nepieciešams tikai currentUser, bet tas tiks pārzīmēts, kad mainīsies tēma!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// Šis komponents tagad tiek pārzīmēts TIKAI tad, ja mainās currentUser.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... cita konfigurācija
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};