മികച്ച പെർഫോമൻസ് ഉറപ്പാക്കാം: റിയാക്റ്റ് പ്രൊഫൈലർ എപിഐയെക്കുറിച്ച് ഒരു ആഴത്തിലുള്ള പഠനം

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ ലോകത്ത്, ഉപയോക്തൃ അനുഭവം വളരെ പ്രധാനമാണ്. സുഗമവും വേഗതയേറിയതുമായ ഒരു ഇൻ്റർഫേസിന് സംതൃപ്തനായ ഒരു ഉപയോക്താവിനെയും നിരാശനായ ഒരാളെയും തമ്മിൽ വേർതിരിക്കാനാകും. റിയാക്റ്റ് ഉപയോഗിക്കുന്ന ഡെവലപ്പർമാർക്ക്, സങ്കീർണ്ണവും ചലനാത്മകവുമായ യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നത് മുമ്പത്തേക്കാൾ എളുപ്പമാണ്. എന്നിരുന്നാലും, ആപ്ലിക്കേഷനുകളുടെ സങ്കീർണ്ണത വർദ്ധിക്കുന്നതിനനുസരിച്ച്, പെർഫോമൻസ് പ്രശ്നങ്ങൾക്കുള്ള സാധ്യതയും വർദ്ധിക്കുന്നു - വേഗത കുറഞ്ഞ പ്രതികരണങ്ങൾക്കും, സുഗമമല്ലാത്ത ആനിമേഷനുകൾക്കും, മോശം ഉപയോക്തൃ അനുഭവത്തിനും ഇടയാക്കുന്ന കാര്യക്ഷമതയില്ലായ്മകൾ. ഇവിടെയാണ് ഒരു ഡെവലപ്പറുടെ ആവനാഴിയിലെ ഒഴിച്ചുകൂടാനാവാത്ത ഒരു ഉപകരണമായി റിയാക്റ്റ് പ്രൊഫൈലർ എപിഐ മാറുന്നത്.

ഈ സമഗ്രമായ ഗൈഡ് നിങ്ങളെ റിയാക്റ്റ് പ്രൊഫൈലറിനെക്കുറിച്ച് ആഴത്തിൽ മനസ്സിലാക്കാൻ സഹായിക്കും. അതെന്താണെന്നും, റിയാക്റ്റ് ഡെവ്‌ടൂൾസിലൂടെയും അതിൻ്റെ പ്രോഗ്രാമാറ്റിക് എപിഐയിലൂടെയും അത് എങ്ങനെ ഫലപ്രദമായി ഉപയോഗിക്കാമെന്നും, ഏറ്റവും പ്രധാനമായി, സാധാരണ പെർഫോമൻസ് പ്രശ്നങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും അതിൻ്റെ ഔട്ട്പുട്ട് എങ്ങനെ വ്യാഖ്യാനിക്കാമെന്നും നമ്മൾ പര്യവേക്ഷണം ചെയ്യും. ഇത് വായിച്ചു കഴിയുമ്പോഴേക്കും, പെർഫോമൻസ് വിശകലനം എന്ന ദുഷ്കരമായ ദൗത്യത്തെ നിങ്ങളുടെ വികസന പ്രക്രിയയുടെ ചിട്ടയായതും പ്രയോജനകരവുമായ ഒരു ഭാഗമാക്കി മാറ്റാൻ നിങ്ങൾ സജ്ജരാകും.

എന്താണ് റിയാക്റ്റ് പ്രൊഫൈലർ എപിഐ?

ഒരു റിയാക്റ്റ് ആപ്ലിക്കേഷൻ്റെ പെർഫോമൻസ് അളക്കാൻ ഡെവലപ്പർമാരെ സഹായിക്കുന്നതിനായി രൂപകൽപ്പന ചെയ്ത ഒരു പ്രത്യേക ടൂളാണ് റിയാക്റ്റ് പ്രൊഫൈലർ. നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ റെൻഡർ ചെയ്യുന്ന ഓരോ കമ്പോണൻ്റിനെക്കുറിച്ചുമുള്ള സമയവിവരങ്ങൾ ശേഖരിക്കുക എന്നതാണ് ഇതിൻ്റെ പ്രധാന പ്രവർത്തനം. ഇത് നിങ്ങളുടെ ആപ്പിൻ്റെ ഏത് ഭാഗങ്ങളാണ് റെൻഡർ ചെയ്യാൻ കൂടുതൽ സമയമെടുക്കുന്നതെന്നും പെർഫോമൻസ് പ്രശ്‌നങ്ങൾക്ക് കാരണമായേക്കാവുന്നതെന്നും തിരിച്ചറിയാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഇത് പോലുള്ള നിർണായക ചോദ്യങ്ങൾക്ക് ഉത്തരം നൽകുന്നു:

• ഒരു പ്രത്യേക കമ്പോണൻ്റ് റെൻഡർ ചെയ്യാൻ എത്ര സമയമെടുക്കും?
• ഒരു ഉപയോക്തൃ ഇടപെടൽ സമയത്ത് ഒരു കമ്പോണൻ്റ് എത്ര തവണ റീ-റെൻഡർ ചെയ്യുന്നു?
• എന്തുകൊണ്ടാണ് ഒരു പ്രത്യേക കമ്പോണൻ്റ് റീ-റെൻഡർ ചെയ്തത്?

Chrome DevTools-ലെ പെർഫോമൻസ് ടാബ് അല്ലെങ്കിൽ Lighthouse പോലുള്ള പൊതുവായ ബ്രൗസർ പെർഫോമൻസ് ടൂളുകളിൽ നിന്ന് റിയാക്റ്റ് പ്രൊഫൈലറിനെ വേർതിരിച്ചറിയേണ്ടത് പ്രധാനമാണ്. പേജ് ലോഡ്, നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ, സ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ സമയം എന്നിവ അളക്കാൻ ആ ടൂളുകൾ മികച്ചതാണെങ്കിലും, റിയാക്റ്റ് പ്രൊഫൈലർ നിങ്ങൾക്ക് റിയാക്റ്റ് ഇക്കോസിസ്റ്റത്തിനുള്ളിലെ പെർഫോമൻസിൻ്റെ കമ്പോണൻ്റ് തലത്തിലുള്ള കാഴ്ച നൽകുന്നു. ഇത് റിയാക്റ്റ് ലൈഫ് സൈക്കിൾ മനസ്സിലാക്കുകയും മറ്റ് ടൂളുകൾക്ക് കാണാൻ കഴിയാത്ത സ്റ്റേറ്റ് മാറ്റങ്ങൾ, പ്രോപ്‌സ്, കോൺടെക്സ്റ്റ് എന്നിവയുമായി ബന്ധപ്പെട്ട കാര്യക്ഷമതയില്ലായ്മകൾ കൃത്യമായി കണ്ടെത്താൻ സഹായിക്കുകയും ചെയ്യുന്നു.

പ്രൊഫൈലർ പ്രധാനമായും രണ്ട് രൂപങ്ങളിൽ ലഭ്യമാണ്:

1. റിയാക്റ്റ് ഡെവ്‌ടൂൾസ് എക്സ്റ്റൻഷൻ: നിങ്ങളുടെ ബ്രൗസറിൻ്റെ ഡെവലപ്പർ ടൂളുകളുമായി നേരിട്ട് സംയോജിപ്പിച്ചിട്ടുള്ള, ഉപയോഗിക്കാൻ എളുപ്പമുള്ള ഒരു ഗ്രാഫിക്കൽ ഇൻ്റർഫേസ്. പ്രൊഫൈലിംഗ് ആരംഭിക്കാനുള്ള ഏറ്റവും സാധാരണമായ മാർഗ്ഗമാണിത്.
2. പ്രോഗ്രാമാറ്റിക് `` കമ്പോണൻ്റ്: പെർഫോമൻസ് അളവുകൾ പ്രോഗ്രാമാറ്റിക് ആയി ശേഖരിക്കുന്നതിന് നിങ്ങളുടെ JSX കോഡിലേക്ക് നേരിട്ട് ചേർക്കാൻ കഴിയുന്ന ഒരു കമ്പോണൻ്റ്. ഓട്ടോമേറ്റഡ് ടെസ്റ്റിംഗിനോ അനലിറ്റിക്‌സ് സേവനത്തിലേക്ക് മെട്രിക്കുകൾ അയക്കുന്നതിനോ ഇത് ഉപയോഗപ്രദമാണ്.

പ്രധാനമായും, പ്രൊഫൈലർ ഡെവലപ്‌മെൻ്റ് എൻവയോൺമെൻ്റുകൾക്കായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. പ്രൊഫൈലിംഗ് പ്രവർത്തനക്ഷമമാക്കിയ ഒരു പ്രത്യേക പ്രൊഡക്ഷൻ ബിൽഡ് നിലവിലുണ്ടെങ്കിലും, റിയാക്റ്റിൻ്റെ സ്റ്റാൻഡേർഡ് പ്രൊഡക്ഷൻ ബിൽഡിൽ നിന്ന് അന്തിമ ഉപയോക്താക്കൾക്കായി ലൈബ്രറി കഴിയുന്നത്ര ഭാരം കുറഞ്ഞതും വേഗതയേറിയതുമാക്കി നിലനിർത്തുന്നതിന് ഈ പ്രവർത്തനം ഒഴിവാക്കിയിരിക്കുന്നു.

തുടങ്ങാം: റിയാക്റ്റ് പ്രൊഫൈലർ എങ്ങനെ ഉപയോഗിക്കാം

നമുക്ക് പ്രായോഗികമായി കാര്യങ്ങൾ മനസ്സിലാക്കാം. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യുന്നത് ഒരു ലളിതമായ പ്രക്രിയയാണ്, രണ്ട് രീതികളും മനസ്സിലാക്കുന്നത് നിങ്ങൾക്ക് പരമാവധി വഴക്കം നൽകും.

രീതി 1: റിയാക്റ്റ് ഡെവ്‌ടൂൾസ് പ്രൊഫൈലർ ടാബ്

ദൈനംദിന പെർഫോമൻസ് ഡീബഗ്ഗിംഗിനായി, റിയാക്റ്റ് ഡെവ്‌ടൂൾസിലെ പ്രൊഫൈലർ ടാബ് ആണ് നിങ്ങളുടെ പ്രധാന ഉപകരണം. നിങ്ങൾ ഇത് ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലെങ്കിൽ, അതാണ് ആദ്യപടി—നിങ്ങൾക്കിഷ്ടമുള്ള ബ്രൗസറിനായി (Chrome, Firefox, Edge) എക്സ്റ്റൻഷൻ നേടുക.

നിങ്ങളുടെ ആദ്യത്തെ പ്രൊഫൈലിംഗ് സെഷൻ പ്രവർത്തിപ്പിക്കുന്നതിനുള്ള ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ് ഇതാ:

1. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ തുറക്കുക: ഡെവലപ്‌മെൻ്റ് മോഡിൽ പ്രവർത്തിക്കുന്ന നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനിലേക്ക് പോകുക. നിങ്ങളുടെ ബ്രൗസറിൻ്റെ എക്സ്റ്റൻഷൻ ബാറിൽ റിയാക്റ്റ് ഐക്കൺ കാണുന്നുണ്ടെങ്കിൽ ഡെവ്‌ടൂൾസ് സജീവമാണെന്ന് മനസ്സിലാക്കാം.
2. ഡെവലപ്പർ ടൂൾസ് തുറക്കുക: നിങ്ങളുടെ ബ്രൗസറിൻ്റെ ഡെവലപ്പർ ടൂളുകൾ തുറക്കുക (സാധാരണയായി F12 അല്ലെങ്കിൽ Ctrl+Shift+I / Cmd+Option+I ഉപയോഗിച്ച്) എന്നിട്ട് "Profiler" ടാബ് കണ്ടെത്തുക. നിങ്ങൾക്ക് ധാരാളം ടാബുകൾ ഉണ്ടെങ്കിൽ, അത് ഒരു "»" അമ്പടയാളത്തിന് പിന്നിൽ മറഞ്ഞിരിക്കാം.
3. പ്രൊഫൈലിംഗ് ആരംഭിക്കുക: പ്രൊഫൈലർ UI-ൽ ഒരു നീല വൃത്തം (റെക്കോർഡ് ബട്ടൺ) നിങ്ങൾ കാണും. പെർഫോമൻസ് ഡാറ്റ റെക്കോർഡ് ചെയ്യാൻ തുടങ്ങാൻ അതിൽ ക്ലിക്ക് ചെയ്യുക.
4. നിങ്ങളുടെ ആപ്പുമായി സംവദിക്കുക: നിങ്ങൾ അളക്കാൻ ആഗ്രഹിക്കുന്ന പ്രവർത്തനം നടത്തുക. ഒരു പേജ് ലോഡ് ചെയ്യുന്നതോ, ഒരു മോഡൽ തുറക്കുന്ന ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുന്നതോ, ഒരു ഫോമിൽ ടൈപ്പ് ചെയ്യുന്നതോ, അല്ലെങ്കിൽ ഒരു വലിയ ലിസ്റ്റ് ഫിൽട്ടർ ചെയ്യുന്നതോ ആകാം ഇത്. വേഗത കുറഞ്ഞതായി തോന്നുന്ന ഉപയോക്തൃ ഇടപെടൽ പുനഃസൃഷ്ടിക്കുക എന്നതാണ് ലക്ഷ്യം.
5. പ്രൊഫൈലിംഗ് നിർത്തുക: നിങ്ങൾ പ്രവർത്തനം പൂർത്തിയാക്കിക്കഴിഞ്ഞാൽ, സെഷൻ നിർത്തുന്നതിന് റെക്കോർഡ് ബട്ടണിൽ വീണ്ടും ക്ലിക്ക് ചെയ്യുക (ഇപ്പോൾ അത് ചുവപ്പായിരിക്കും).

അത്രയേയുള്ളൂ! പ്രൊഫൈലർ ശേഖരിച്ച ഡാറ്റ പ്രോസസ്സ് ചെയ്യുകയും ആ ഇടപെടൽ സമയത്ത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ റെൻഡർ പെർഫോമൻസിൻ്റെ വിശദമായ ഒരു വിഷ്വലൈസേഷൻ നിങ്ങൾക്ക് നൽകുകയും ചെയ്യും.

രീതി 2: പ്രോഗ്രാമാറ്റിക് `Profiler` കമ്പോണൻ്റ്

ഇൻ്ററാക്ടീവ് ഡീബഗ്ഗിംഗിനായി ഡെവ്‌ടൂൾസ് മികച്ചതാണെങ്കിലും, ചിലപ്പോൾ നിങ്ങൾക്ക് സ്വയമേവ പെർഫോമൻസ് ഡാറ്റ ശേഖരിക്കേണ്ടിവരും. `react` പാക്കേജിൽ നിന്ന് എക്‌സ്‌പോർട്ട് ചെയ്‌ത `` കമ്പോണൻ്റ് നിങ്ങളെ അത് ചെയ്യാൻ അനുവദിക്കുന്നു.

നിങ്ങളുടെ കമ്പോണൻ്റ് ട്രീയുടെ ഏത് ഭാഗവും `` കമ്പോണൻ്റ് ഉപയോഗിച്ച് റാപ്പ് ചെയ്യാൻ കഴിയും. ഇതിന് രണ്ട് പ്രോപ്പുകൾ ആവശ്യമാണ്:

• `id` (string): നിങ്ങൾ പ്രൊഫൈൽ ചെയ്യുന്ന ട്രീയുടെ ഭാഗത്തിനുള്ള ഒരു യുണീക് ഐഡൻ്റിഫയർ. ഇത് വ്യത്യസ്ത പ്രൊഫൈലറുകളിൽ നിന്നുള്ള അളവുകൾ വേർതിരിച്ചറിയാൻ സഹായിക്കുന്നു.
• `onRender` (function): പ്രൊഫൈൽ ചെയ്ത ട്രീയിലെ ഒരു കമ്പോണൻ്റ് ഒരു അപ്‌ഡേറ്റ് "കമ്മിറ്റ്" ചെയ്യുമ്പോഴെല്ലാം റിയാക്റ്റ് വിളിക്കുന്ന ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ.

ഇവിടെ ഒരു കോഡ് ഉദാഹരണം:

import React, { Profiler } from 'react';

// onRender കോൾബാക്ക്
function onRenderCallback(
  id, // ഇപ്പോൾ കമ്മിറ്റ് ചെയ്ത പ്രൊഫൈലർ ട്രീയുടെ "id" പ്രോപ്പ്
  phase, // "mount" (ട്രീ ഇപ്പോൾ മൗണ്ട് ചെയ്തെങ്കിൽ) അല്ലെങ്കിൽ "update" (അത് റീ-റെൻഡർ ചെയ്തെങ്കിൽ)
  actualDuration, // കമ്മിറ്റ് ചെയ്ത അപ്ഡേറ്റ് റെൻഡർ ചെയ്യാൻ എടുത്ത സമയം
  baseDuration, // മെമ്മോയിസേഷൻ ഇല്ലാതെ മുഴുവൻ സബ്ട്രീയും റെൻഡർ ചെയ്യാനുള്ള ഏകദേശ സമയം
  startTime, // റിയാക്റ്റ് ഈ അപ്ഡേറ്റ് റെൻഡർ ചെയ്യാൻ തുടങ്ങിയപ്പോൾ
  commitTime, // റിയാക്റ്റ് ഈ അപ്ഡേറ്റ് കമ്മിറ്റ് ചെയ്തപ്പോൾ
  interactions // അപ്ഡേറ്റിന് കാരണമായ ഇൻ്ററാക്ഷനുകളുടെ ഒരു ഗണം
) {
  // നിങ്ങൾക്ക് ഈ ഡാറ്റ ലോഗ് ചെയ്യാം, ഒരു അനലിറ്റിക്സ് എൻഡ്‌പോയിൻ്റിലേക്ക് അയക്കാം, അല്ലെങ്കിൽ സമാഹരിക്കാം.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` കോൾബാക്ക് പാരാമീറ്ററുകൾ മനസ്സിലാക്കാം:

• `id`: നിങ്ങൾ `` കമ്പോണൻ്റിന് നൽകിയ സ്ട്രിംഗ് `id`.
• `phase`: ഒന്നുകിൽ `"mount"` (കമ്പോണൻ്റ് ആദ്യമായി മൗണ്ട് ചെയ്തു) അല്ലെങ്കിൽ `"update"` (പ്രോപ്പുകൾ, സ്റ്റേറ്റ്, അല്ലെങ്കിൽ ഹുക്കുകളിലെ മാറ്റങ്ങൾ കാരണം അത് റീ-റെൻഡർ ചെയ്തു).
• `actualDuration`: ഈ പ്രത്യേക അപ്‌ഡേറ്റിനായി ``-നെയും അതിൻ്റെ ഡിസെൻഡൻ്റുകളെയും റെൻഡർ ചെയ്യാൻ എടുത്ത സമയം മില്ലിസെക്കൻഡിൽ. വേഗത കുറഞ്ഞ റെൻഡറുകൾ തിരിച്ചറിയുന്നതിനുള്ള നിങ്ങളുടെ പ്രധാന മെട്രിക് ഇതാണ്.
• `baseDuration`: മുഴുവൻ സബ്ട്രീയും ആദ്യം മുതൽ റെൻഡർ ചെയ്യാൻ എത്ര സമയമെടുക്കും എന്നതിൻ്റെ ഒരു ഏകദേശ കണക്ക്. ഇത് "ഏറ്റവും മോശം" സാഹചര്യമാണ്, ഒരു കമ്പോണൻ്റ് ട്രീയുടെ മൊത്തത്തിലുള്ള സങ്കീർണ്ണത മനസ്സിലാക്കാൻ ഇത് ഉപയോഗപ്രദമാണ്. `actualDuration` `baseDuration`-നേക്കാൾ വളരെ കുറവാണെങ്കിൽ, മെമ്മോയിസേഷൻ പോലുള്ള ഒപ്റ്റിമൈസേഷനുകൾ ഫലപ്രദമായി പ്രവർത്തിക്കുന്നുവെന്ന് ഇത് സൂചിപ്പിക്കുന്നു.
• `startTime`, `commitTime`: റിയാക്റ്റ് റെൻഡറിംഗ് ആരംഭിച്ചപ്പോൾ, അത് DOM-ലേക്ക് അപ്‌ഡേറ്റ് കമ്മിറ്റ് ചെയ്തപ്പോൾ എന്നിവയുടെ ടൈംസ്റ്റാമ്പുകൾ. കാലക്രമേണ പെർഫോമൻസ് ട്രാക്ക് ചെയ്യാൻ ഇവ ഉപയോഗിക്കാം.
• `interactions`: അപ്‌ഡേറ്റ് ഷെഡ്യൂൾ ചെയ്തപ്പോൾ ട്രാക്ക് ചെയ്തിരുന്ന "ഇൻ്ററാക്ഷനുകളുടെ" ഒരു ഗണം (അപ്‌ഡേറ്റുകളുടെ കാരണം കണ്ടെത്താനുള്ള ഒരു പരീക്ഷണാത്മക എപിഐയുടെ ഭാഗമാണിത്).

പ്രൊഫൈലർ ഔട്ട്പുട്ട് വ്യാഖ്യാനിക്കാം: ഒരു ഗൈഡഡ് ടൂർ

റിയാക്റ്റ് ഡെവ്‌ടൂൾസിൽ ഒരു റെക്കോർഡിംഗ് സെഷൻ നിർത്തിക്കഴിഞ്ഞാൽ, നിങ്ങൾക്ക് ധാരാളം വിവരങ്ങൾ ലഭിക്കും. നമുക്ക് UI-യുടെ പ്രധാന ഭാഗങ്ങൾ ഓരോന്നായി പരിശോധിക്കാം.

കമ്മിറ്റ് സെലക്ടർ

പ്രൊഫൈലറിൻ്റെ മുകളിൽ, നിങ്ങൾ ഒരു ബാർ ചാർട്ട് കാണും. ഈ ചാർട്ടിലെ ഓരോ ബാറും നിങ്ങളുടെ റെക്കോർഡിംഗ് സമയത്ത് റിയാക്റ്റ് DOM-ലേക്ക് നടത്തിയ ഒരൊറ്റ "കമ്മിറ്റിനെ" പ്രതിനിധീകരിക്കുന്നു. ബാറിൻ്റെ ഉയരവും നിറവും ആ കമ്മിറ്റ് റെൻഡർ ചെയ്യാൻ എത്ര സമയമെടുത്തു എന്ന് സൂചിപ്പിക്കുന്നു - ഉയരമുള്ള, മഞ്ഞ/ഓറഞ്ച് ബാറുകൾക്ക് നീളം കുറഞ്ഞ, നീല/പച്ച ബാറുകളേക്കാൾ കൂടുതൽ സമയമെടുക്കുന്നു. ഓരോ റെൻഡർ സൈക്കിളിൻ്റെയും വിശദാംശങ്ങൾ പരിശോധിക്കാൻ നിങ്ങൾക്ക് ഈ ബാറുകളിൽ ക്ലിക്കുചെയ്യാം.

ഫ്ലെയിംഗ്രാഫ് ചാർട്ട്

ഇതാണ് ഏറ്റവും ശക്തമായ വിഷ്വലൈസേഷൻ. തിരഞ്ഞെടുത്ത ഒരു കമ്മിറ്റിനായി, നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ ഏത് കമ്പോണൻ്റുകളാണ് റെൻഡർ ചെയ്തതെന്ന് ഫ്ലെയിംഗ്രാഫ് കാണിക്കുന്നു. ഇത് എങ്ങനെ വായിക്കാമെന്ന് നോക്കാം:

• കമ്പോണൻ്റ് ഹയറാർക്കി: ചാർട്ട് നിങ്ങളുടെ കമ്പോണൻ്റ് ട്രീ പോലെയാണ് ക്രമീകരിച്ചിരിക്കുന്നത്. മുകളിലുള്ള കമ്പോണൻ്റുകൾ അവയുടെ താഴെയുള്ള കമ്പോണൻ്റുകളെ വിളിച്ചു.
• റെൻഡർ സമയം: ഒരു കമ്പോണൻ്റിൻ്റെ ബാറിൻ്റെ വീതി, അത് റെൻഡർ ചെയ്യാൻ എടുത്ത സമയത്തെ സൂചിപ്പിക്കുന്നു. വീതിയേറിയ ബാറുകളാണ് നിങ്ങൾ ആദ്യം അന്വേഷിക്കേണ്ടത്.
• കളർ കോഡിംഗ്: ബാറിൻ്റെ നിറവും റെൻഡർ സമയം സൂചിപ്പിക്കുന്നു, വേഗതയേറിയ റെൻഡറുകൾക്ക് തണുത്ത നിറങ്ങളും (നീല, പച്ച) വേഗത കുറഞ്ഞവയ്ക്ക് ഊഷ്മള നിറങ്ങളും (മഞ്ഞ, ഓറഞ്ച്, ചുവപ്പ്).
• ചാരനിറത്തിലുള്ള കമ്പോണൻ്റുകൾ: ഒരു ചാരനിറത്തിലുള്ള ബാർ അർത്ഥമാക്കുന്നത് ഈ പ്രത്യേക കമ്മിറ്റ് സമയത്ത് കമ്പോണൻ്റ് റീ-റെൻഡർ ചെയ്തിട്ടില്ല എന്നാണ്. ഇത് ഒരു നല്ല സൂചനയാണ്! ആ കമ്പോണൻ്റിനായി നിങ്ങളുടെ മെമ്മോയിസേഷൻ സ്ട്രാറ്റജികൾ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഇതിനർത്ഥം.

റാങ്ക് ചെയ്ത ചാർട്ട്

ഫ്ലെയിംഗ്രാഫ് വളരെ സങ്കീർണ്ണമായി തോന്നുന്നുവെങ്കിൽ, നിങ്ങൾക്ക് റാങ്ക് ചെയ്ത ചാർട്ട് കാഴ്ചയിലേക്ക് മാറാം. തിരഞ്ഞെടുത്ത കമ്മിറ്റ് സമയത്ത് റെൻഡർ ചെയ്ത എല്ലാ കമ്പോണൻ്റുകളെയും, ഏറ്റവും കൂടുതൽ സമയമെടുത്തതിൻ്റെ അടിസ്ഥാനത്തിൽ തരംതിരിച്ച് ഈ കാഴ്ച പട്ടികപ്പെടുത്തുന്നു. നിങ്ങളുടെ ഏറ്റവും ചെലവേറിയ കമ്പോണൻ്റുകളെ ഉടനടി തിരിച്ചറിയാനുള്ള മികച്ച മാർഗമാണിത്.

കമ്പോണൻ്റ് വിവരങ്ങൾക്കായുള്ള പാനൽ

ഫ്ലെയിംഗ്രാഫിലോ റാങ്ക് ചെയ്ത ചാർട്ടിലോ ഒരു പ്രത്യേക കമ്പോണൻ്റിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, വലതുവശത്ത് ഒരു വിശദാംശ പാനൽ ദൃശ്യമാകും. ഏറ്റവും പ്രായോഗികമായ വിവരങ്ങൾ നിങ്ങൾ ഇവിടെ കണ്ടെത്തുന്നു:

• റെൻഡർ സമയദൈർഘ്യം: തിരഞ്ഞെടുത്ത കമ്മിറ്റിൽ ആ കമ്പോണൻ്റിനായുള്ള `actualDuration`-ഉം `baseDuration`-ഉം ഇത് കാണിക്കുന്നു.
• "Rendered at": ഈ കമ്പോണൻ്റ് റെൻഡർ ചെയ്ത എല്ലാ കമ്മിറ്റുകളും ഇത് ലിസ്റ്റ് ചെയ്യുന്നു, ഇത് എത്ര തവണ അപ്ഡേറ്റ് ചെയ്യുന്നുവെന്ന് വേഗത്തിൽ കാണാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• "Why did this render?": ഇത് പലപ്പോഴും ഏറ്റവും മൂല്യവത്തായ വിവരമാണ്. ഒരു കമ്പോണൻ്റ് എന്തിനാണ് റീ-റെൻഡർ ചെയ്തതെന്ന് റിയാക്റ്റ് ഡെവ്‌ടൂൾസ് നിങ്ങളോട് പറയാൻ ശ്രമിക്കും. സാധാരണ കാരണങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:
  • പ്രോപ്പുകൾ മാറി
  • ഹുക്കുകൾ മാറി (ഉദാ. ഒരു `useState` അല്ലെങ്കിൽ `useReducer` മൂല്യം അപ്ഡേറ്റ് ചെയ്തു)
  • പാരൻ്റ് കമ്പോണൻ്റ് റെൻഡർ ചെയ്തു (ചൈൽഡ് കമ്പോണൻ്റുകളിൽ അനാവശ്യ റീ-റെൻഡറുകൾക്ക് ഇതൊരു സാധാരണ കാരണമാണ്)
  • കോൺടെക്സ്റ്റ് മാറി

സാധാരണ പെർഫോമൻസ് പ്രശ്നങ്ങളും അവ എങ്ങനെ പരിഹരിക്കാം എന്നതും

പെർഫോമൻസ് ഡാറ്റ എങ്ങനെ ശേഖരിക്കാമെന്നും വായിക്കാമെന്നും ഇപ്പോൾ നിങ്ങൾക്കറിയാം, പ്രൊഫൈലർ കണ്ടെത്താൻ സഹായിക്കുന്ന സാധാരണ പ്രശ്നങ്ങളും അവ പരിഹരിക്കുന്നതിനുള്ള സ്റ്റാൻഡേർഡ് റിയാക്റ്റ് പാറ്റേണുകളും നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം.

പ്രശ്നം 1: അനാവശ്യമായ റീ-റെൻഡറുകൾ

റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളിലെ ഏറ്റവും സാധാരണമായ പെർഫോമൻസ് പ്രശ്നമാണിത്. ഒരു കമ്പോണൻ്റിൻ്റെ ഔട്ട്പുട്ട് ഒന്നുതന്നെയായിരിക്കുമെങ്കിലും അത് റീ-റെൻഡർ ചെയ്യുമ്പോൾ ഇത് സംഭവിക്കുന്നു. ഇത് സിപിയു സൈക്കിളുകൾ പാഴാക്കുകയും നിങ്ങളുടെ UI-യെ മന്ദഗതിയിലാക്കുകയും ചെയ്യും.

രോഗനിർണയം:

• പ്രൊഫൈലറിൽ, ഒരു കമ്പോണൻ്റ് പല കമ്മിറ്റുകളിലായി വളരെ അടിക്കടി റെൻഡർ ചെയ്യുന്നത് നിങ്ങൾ കാണുന്നു.
• "Why did this render?" എന്ന ഭാഗം സൂചിപ്പിക്കുന്നത് അതിൻ്റെ പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിലും പാരൻ്റ് കമ്പോണൻ്റ് റീ-റെൻഡർ ചെയ്തതുകൊണ്ടാണ്.
• ഫ്ലെയിംഗ്രാഫിലെ പല കമ്പോണൻ്റുകളും നിറമുള്ളവയാണ്, അവ ആശ്രയിക്കുന്ന സ്റ്റേറ്റിൻ്റെ ഒരു ചെറിയ ഭാഗം മാത്രമേ യഥാർത്ഥത്തിൽ മാറിയിട്ടുള്ളൂവെങ്കിലും.

പരിഹാരം 1: `React.memo()`

`React.memo` എന്നത് നിങ്ങളുടെ കമ്പോണൻ്റിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണൻ്റ് (HOC) ആണ്. ഇത് കമ്പോണൻ്റിൻ്റെ മുൻപത്തെയും പുതിയതുമായ പ്രോപ്പുകളുടെ ഒരു ഷാലോ കംപാരിസൺ നടത്തുന്നു. പ്രോപ്പുകൾ ഒന്നുതന്നെയാണെങ്കിൽ, റിയാക്റ്റ് കമ്പോണൻ്റ് റീ-റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കുകയും അവസാനമായി റെൻഡർ ചെയ്ത ഫലം പുനരുപയോഗിക്കുകയും ചെയ്യും.

`React.memo`-ക്ക് മുമ്പ്:**

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

// പാരൻ്റ് കമ്പോണൻ്റിൽ:
// ഏതെങ്കിലും കാരണത്താൽ പാരൻ്റ് റീ-റെൻഡർ ചെയ്താൽ (ഉദാ. അതിൻ്റെ സ്റ്റേറ്റ് മാറിയാൽ),
// userName-ഉം avatarUrl-ഉം ഒന്നുതന്നെയാണെങ്കിലും UserAvatar വീണ്ടും റെൻഡർ ചെയ്യും.

import React from 'react';

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

// ഇപ്പോൾ, userName അല്ലെങ്കിൽ avatarUrl പ്രോപ്പുകൾ യഥാർത്ഥത്തിൽ മാറിയാൽ മാത്രമേ UserAvatar റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ.

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

  // ParentComponent-ൻ്റെ ഓരോ റെൻഡറിലും ഈ ഫംഗ്ഷൻ വീണ്ടും നിർമ്മിക്കപ്പെടുന്നു
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* handleItemClick ഒരു പുതിയ ഫംഗ്ഷനായതിനാൽ, count മാറുമ്പോഴെല്ലാം MemoizedListItem റീ-റെൻഡർ ചെയ്യും */}
      
    
  );
}

import { useState, useCallback } from 'react';

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

  // ഈ ഫംഗ്ഷൻ ഇപ്പോൾ മെമ്മോൈസ് ചെയ്തിരിക്കുന്നു, അതിൻ്റെ ഡിപൻഡൻസികൾ (ശൂന്യമായ അറേ) മാറിയില്ലെങ്കിൽ വീണ്ടും നിർമ്മിക്കപ്പെടില്ല.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // ശൂന്യമായ ഡിപൻഡൻസി അറേ എന്നാൽ ഇത് ഒരു തവണ മാത്രമേ നിർമ്മിക്കപ്പെടുകയുള്ളൂ എന്നാണ് അർത്ഥമാക്കുന്നത്

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* ഇപ്പോൾ, count മാറുമ്പോൾ MemoizedListItem റീ-റെൻഡർ ചെയ്യില്ല */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // ProductList-ൻ്റെ എല്ലാ റെൻഡറിലും ഈ ചെലവേറിയ ഫിൽട്ടറിംഗ് പ്രവർത്തനം നടക്കുന്നു,
  // ബന്ധമില്ലാത്ത ഒരു പ്രോപ്പ് മാറിയാൽ പോലും.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

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

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // ഈ കണക്കുകൂട്ടൽ ഇപ്പോൾ `products` അല്ലെങ്കിൽ `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: () => {}, 
  // ... കൂടാതെ മറ്റ് 20 മൂല്യങ്ങളും
});

// MyComponent.js
// ഈ കമ്പോണൻ്റിന് currentUser മാത്രം മതി, പക്ഷേ തീം മാറുമ്പോൾ ഇത് റീ-റെൻഡർ ചെയ്യും!
const { currentUser } = useContext(AppContext);

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

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

// MyComponent.js
// ഈ കമ്പോണൻ്റ് ഇപ്പോൾ currentUser മാറുമ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യുന്നു.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... മറ്റ് കോൺഫിഗറേഷൻ
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};