റിയാക്ട് ഷെഡ്യൂളർ പ്രൊഫൈലിംഗ്: ഒപ്റ്റിമൈസ് ചെയ്ത പ്രകടനത്തിനായി ടാസ്ക് എക്സിക്യൂഷൻ അനാവരണം ചെയ്യുക

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

റിയാക്ട് ഷെഡ്യൂളർ മനസ്സിലാക്കുന്നു

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

റിയാക്ട് ഒരു ഫൈബർ ആർക്കിടെക്ചർ ഉപയോഗിക്കുന്നു, ഇത് റെൻഡറിംഗിനെ ചെറിയ, തടസ്സപ്പെടുത്താവുന്ന യൂണിറ്റുകളായി വിഭജിക്കാൻ അനുവദിക്കുന്നു. ഈ യൂണിറ്റുകളെ ഫൈബറുകൾ എന്ന് വിളിക്കുന്നു, കൂടാതെ ഉയർന്ന മുൻഗണനയുള്ള ടാസ്ക്കുകൾ (ഉപയോക്തൃ ഇൻപുട്ട് പോലുള്ളവ) ഉടനടി കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ റിയാക്ട് ഷെഡ്യൂളർ ഈ ഫൈബറുകളെ നിയന്ത്രിക്കുന്നു. ഫൈബറുകളെ നിയന്ത്രിക്കുന്നതിന് ഷെഡ്യൂളർ ഒരു പ്രയോറിറ്റി ക്യൂ ഉപയോഗിക്കുന്നു, അവയുടെ അടിയന്തിര പ്രാധാന്യമനുസരിച്ച് അപ്ഡേറ്റുകൾക്ക് മുൻഗണന നൽകാൻ ഇത് ഷെഡ്യൂളറിനെ അനുവദിക്കുന്നു.

പ്രധാന ആശയങ്ങൾ:

• ഫൈബർ: ഒരു കമ്പോണൻ്റ് ഇൻസ്റ്റൻസിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു യൂണിറ്റ് ഓഫ് വർക്ക്.
• ഷെഡ്യൂളർ: ഫൈബറുകൾക്ക് മുൻഗണന നൽകുന്നതിനും ഷെഡ്യൂൾ ചെയ്യുന്നതിനും ഉത്തരവാദിത്തമുള്ള മൊഡ്യൂൾ.
• വർക്ക്ലൂപ്പ്: ഫൈബർ ട്രീയിലൂടെ കടന്നുപോയി അപ്ഡേറ്റുകൾ നടത്തുന്ന ഫംഗ്ഷൻ.
• പ്രയോറിറ്റി ക്യൂ: ഫൈബറുകളെ അവയുടെ മുൻഗണന അനുസരിച്ച് മാനേജ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന ഒരു ഡാറ്റാ സ്ട്രക്ചർ.

പ്രൊഫൈലിംഗിൻ്റെ പ്രാധാന്യം

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

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

റിയാക്ട് ഷെഡ്യൂളർ പ്രൊഫൈലിംഗിനുള്ള ടൂളുകൾ

റിയാക്ട് ആപ്ലിക്കേഷനുകൾ പ്രൊഫൈൽ ചെയ്യുന്നതിനും റിയാക്ട് ഷെഡ്യൂളറിനുള്ളിലെ ടാസ്ക് എക്സിക്യൂഷനെക്കുറിച്ചുള്ള ഉൾക്കാഴ്ചകൾ നേടുന്നതിനും നിരവധി ശക്തമായ ടൂളുകൾ ലഭ്യമാണ്:

1. ക്രോം ഡെവ്ടൂൾസ് പെർഫോമൻസ് ടാബ്

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

ഇത് എങ്ങനെ ഉപയോഗിക്കാം:

1. ക്രോം ഡെവ്ടൂൾസ് തുറക്കുക (Ctrl+Shift+I അല്ലെങ്കിൽ Cmd+Option+I).
2. "Performance" ടാബിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക.
3. "Record" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
4. നിങ്ങൾ പ്രൊഫൈൽ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന പ്രവർത്തനം ട്രിഗർ ചെയ്യുന്നതിന് നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുമായി സംവദിക്കുക.
5. റെക്കോർഡിംഗ് നിർത്താൻ "Stop" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
6. പ്രകടനത്തിലെ തടസ്സങ്ങൾ തിരിച്ചറിയാൻ ജനറേറ്റ് ചെയ്ത ടൈംലൈൻ വിശകലനം ചെയ്യുക.

പിടിച്ചെടുത്ത ഡാറ്റ വിശകലനം ചെയ്യുന്നതിന് പെർഫോമൻസ് ടാബ് വിവിധ കാഴ്ചകൾ നൽകുന്നു, അവയിൽ ഉൾപ്പെടുന്നവ:

• ഫ്ലേം ചാർട്ട്: ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനുകളുടെ കോൾ സ്റ്റാക്ക് ദൃശ്യവൽക്കരിക്കുന്നു, ഏറ്റവും കൂടുതൽ സമയം ഉപയോഗിക്കുന്ന ഫംഗ്ഷനുകൾ തിരിച്ചറിയാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• ബോട്ടം-അപ്പ്: ഓരോ ഫംഗ്ഷനിലും അതിൻ്റെ കോളികളിലും ചെലവഴിച്ച സമയം സമാഹരിക്കുന്നു, ഏറ്റവും ചെലവേറിയ പ്രവർത്തനങ്ങൾ തിരിച്ചറിയാൻ നിങ്ങളെ സഹായിക്കുന്നു.
• കോൾ ട്രീ: കോൾ സ്റ്റാക്ക് ഒരു ഹൈറാർക്കിക്കൽ ഫോർമാറ്റിൽ പ്രദർശിപ്പിക്കുന്നു, ഇത് എക്സിക്യൂഷൻ ഫ്ലോയുടെ വ്യക്തമായ കാഴ്ച നൽകുന്നു.

പെർഫോമൻസ് ടാബിനുള്ളിൽ, റിയാക്ടുമായി ബന്ധപ്പെട്ട എൻട്രികൾക്കായി നോക്കുക, ഉദാഹരണത്തിന് "Update" (ഒരു കമ്പോണൻ്റ് അപ്‌ഡേറ്റിനെ പ്രതിനിധീകരിക്കുന്നു) അല്ലെങ്കിൽ "Commit" (അപ്‌ഡേറ്റ് ചെയ്ത DOM-ൻ്റെ അന്തിമ റെൻഡറിംഗിനെ പ്രതിനിധീകരിക്കുന്നു). ഈ എൻട്രികൾക്ക് കമ്പോണൻ്റുകൾ റെൻഡർ ചെയ്യുന്നതിന് ചെലവഴിച്ച സമയത്തെക്കുറിച്ചുള്ള വിലപ്പെട്ട ഉൾക്കാഴ്ചകൾ നൽകാൻ കഴിയും.

2. റിയാക്ട് ഡെവ്ടൂൾസ് പ്രൊഫൈലർ

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

ഇൻസ്റ്റാളേഷൻ:

റിയാക്ട് ഡെവ്ടൂൾസ് പ്രൊഫൈലർ ക്രോം, ഫയർഫോക്സ്, എഡ്ജ് എന്നിവയ്ക്കുള്ള ബ്രൗസർ എക്സ്റ്റൻഷനായി ലഭ്യമാണ്. അതത് ബ്രൗസറിൻ്റെ എക്സ്റ്റൻഷൻ സ്റ്റോറിൽ നിന്ന് നിങ്ങൾക്ക് ഇത് ഇൻസ്റ്റാൾ ചെയ്യാൻ കഴിയും.

ഉപയോഗം:

1. നിങ്ങളുടെ ബ്രൗസറിൽ റിയാക്ട് ഡെവ്ടൂൾസ് പാനൽ തുറക്കുക.
2. "Profiler" ടാബിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക.
3. "Record" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
4. നിങ്ങൾ പ്രൊഫൈൽ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന പ്രവർത്തനം ട്രിഗർ ചെയ്യുന്നതിന് നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുമായി സംവദിക്കുക.
5. റെക്കോർഡിംഗ് നിർത്താൻ "Stop" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.

പിടിച്ചെടുത്ത ഡാറ്റ വിശകലനം ചെയ്യുന്നതിന് പ്രൊഫൈലർ രണ്ട് പ്രധാന കാഴ്ചകൾ നൽകുന്നു:

• ഫ്ലേംഗ്രാഫ്: കമ്പോണൻ്റ് ട്രീയുടെ ഒരു ദൃശ്യ പ്രാതിനിധ്യം, ഇവിടെ ഓരോ ബാറും ഒരു കമ്പോണൻ്റിനെയും അതിൻ്റെ വീതി ആ കമ്പോണൻ്റ് റെൻഡർ ചെയ്യാൻ എടുത്ത സമയത്തെയും പ്രതിനിധീകരിക്കുന്നു.
• റാങ്ക്ഡ്: റെൻഡർ ചെയ്യാൻ എടുത്ത സമയത്തിനനുസരിച്ച് റാങ്ക് ചെയ്ത കമ്പോണൻ്റുകളുടെ ഒരു ലിസ്റ്റ്, ഏറ്റവും ചെലവേറിയ കമ്പോണൻ്റുകൾ വേഗത്തിൽ തിരിച്ചറിയാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

റിയാക്ട് ഡെവ്ടൂൾസ് പ്രൊഫൈലർ ഇനിപ്പറയുന്നവയ്ക്കും ഫീച്ചറുകൾ നൽകുന്നു:

• അപ്‌ഡേറ്റുകൾ ഹൈലൈറ്റ് ചെയ്യുക: റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണൻ്റുകൾ ദൃശ്യപരമായി ഹൈലൈറ്റ് ചെയ്യുന്നു, അനാവശ്യമായ റീ-റെൻഡറുകൾ തിരിച്ചറിയാൻ നിങ്ങളെ സഹായിക്കുന്നു.
• കമ്പോണൻ്റ് പ്രോപ്പുകളും സ്റ്റേറ്റും പരിശോധിക്കുക: കമ്പോണൻ്റുകളുടെ പ്രോപ്പുകളും സ്റ്റേറ്റും പരിശോധിച്ച് അവ എന്തിനാണ് റീ-റെൻഡർ ചെയ്യുന്നതെന്ന് മനസ്സിലാക്കുക.
• കമ്പോണൻ്റുകൾ ഫിൽട്ടർ ചെയ്യുക: നിർദ്ദിഷ്ട കമ്പോണൻ്റുകളിലോ കമ്പോണൻ്റ് ട്രീയുടെ ഭാഗങ്ങളിലോ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.

3. React.Profiler കമ്പോണൻ്റ്

React.Profiler കമ്പോണൻ്റ് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങളുടെ റെൻഡറിംഗ് പ്രകടനം അളക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു ബിൽറ്റ്-ഇൻ റിയാക്ട് API ആണ്. ബാഹ്യ ടൂളുകളെ ആശ്രയിക്കാതെ പ്രൊഫൈലിംഗ് ഡാറ്റ ശേഖരിക്കുന്നതിനുള്ള ഒരു പ്രോഗ്രാമാറ്റിക് മാർഗ്ഗം ഇത് നൽകുന്നു.

ഉപയോഗം:

നിങ്ങൾ പ്രൊഫൈൽ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന കമ്പോണൻ്റുകളെ React.Profiler കമ്പോണൻ്റ് ഉപയോഗിച്ച് റാപ്പ് ചെയ്യുക. പ്രൊഫൈലറിനെ തിരിച്ചറിയാൻ ഒരു id പ്രോപ്പും ഓരോ റെൻഡറിന് ശേഷവും വിളിക്കപ്പെടുന്ന ഒരു കോൾബാക്ക് ഫംഗ്ഷനായ onRender പ്രോപ്പും നൽകുക.

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 കോൾബാക്ക് ഫംഗ്ഷന് റെൻഡറിംഗ് പ്രക്രിയയെക്കുറിച്ചുള്ള വിവരങ്ങൾ നൽകുന്ന നിരവധി ആർഗ്യുമെൻ്റുകൾ ലഭിക്കുന്നു:

• id: React.Profiler കമ്പോണൻ്റിൻ്റെ id പ്രോപ്പ്.
• phase: കമ്പോണൻ്റ് മൗണ്ട് ചെയ്യുകയാണോ അതോ അപ്‌ഡേറ്റ് ചെയ്യുകയാണോ എന്ന് സൂചിപ്പിക്കുന്നു.
• actualDuration: ഈ അപ്‌ഡേറ്റിൽ കമ്പോണൻ്റ് റെൻഡർ ചെയ്യാൻ എടുത്ത സമയം.
• baseDuration: മെമ്മോയിസേഷൻ ഇല്ലാതെ കമ്പോണൻ്റ് ട്രീ റെൻഡർ ചെയ്യാൻ കണക്കാക്കിയ സമയം.
• startTime: റിയാക്ട് ഈ അപ്‌ഡേറ്റ് റെൻഡർ ചെയ്യാൻ തുടങ്ങിയപ്പോൾ.
• commitTime: റിയാക്ട് ഈ അപ്‌ഡേറ്റ് കമ്മിറ്റ് ചെയ്തപ്പോൾ.
• interactions: ഈ അപ്‌ഡേറ്റ് ഷെഡ്യൂൾ ചെയ്തപ്പോൾ ട്രാക്ക് ചെയ്യപ്പെട്ടിരുന്ന "ഇൻ്ററാക്ഷനുകളുടെ" സെറ്റ്.

നിങ്ങളുടെ കമ്പോണൻ്റുകളുടെ റെൻഡറിംഗ് പ്രകടനം ട്രാക്ക് ചെയ്യാനും ഒപ്റ്റിമൈസേഷൻ ആവശ്യമുള്ള മേഖലകൾ തിരിച്ചറിയാനും നിങ്ങൾക്ക് ഈ ഡാറ്റ ഉപയോഗിക്കാം.

പ്രൊഫൈലിംഗ് ഡാറ്റ വിശകലനം ചെയ്യുന്നു

മുകളിൽ പറഞ്ഞിരിക്കുന്ന ടൂളുകളിലൊന്ന് ഉപയോഗിച്ച് നിങ്ങൾ പ്രൊഫൈലിംഗ് ഡാറ്റ പിടിച്ചെടുത്തു കഴിഞ്ഞാൽ, അടുത്ത ഘട്ടം ഡാറ്റ വിശകലനം ചെയ്യുകയും പ്രകടനത്തിലെ തടസ്സങ്ങൾ തിരിച്ചറിയുകയും ചെയ്യുക എന്നതാണ്. ശ്രദ്ധ കേന്ദ്രീകരിക്കേണ്ട ചില പ്രധാന മേഖലകൾ ഇതാ:

1. വേഗത കുറഞ്ഞ റെൻഡറിംഗ് കമ്പോണൻ്റുകൾ തിരിച്ചറിയുന്നു

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

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

2. അനാവശ്യമായ റീ-റെൻഡറുകൾ കണ്ടെത്തുന്നു

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

റിയാക്ട് ഡെവ്ടൂൾസ് ക്രമീകരണങ്ങളിൽ "Highlight updates when components render" ഓപ്ഷൻ പ്രവർത്തനക്ഷമമാക്കുക. ഇത് റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണൻ്റുകളെ ദൃശ്യപരമായി ഹൈലൈറ്റ് ചെയ്യും, ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾ കണ്ടെത്തുന്നത് എളുപ്പമാക്കുന്നു. ഈ കമ്പോണൻ്റുകൾ എന്തിനാണ് റീ-റെൻഡർ ചെയ്യുന്നതെന്നതിൻ്റെ കാരണങ്ങൾ അന്വേഷിക്കുകയും React.memo അല്ലെങ്കിൽ useMemo പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിച്ച് അവയെ തടയുകയും ചെയ്യുക.

3. ചെലവേറിയ കണക്കുകൂട്ടലുകൾ പരിശോധിക്കുന്നു

നിങ്ങളുടെ കമ്പോണൻ്റുകൾക്കുള്ളിലെ ദീർഘനേരം പ്രവർത്തിക്കുന്ന കണക്കുകൂട്ടലുകൾക്ക് മെയിൻ ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യാനും പ്രകടന പ്രശ്നങ്ങൾ ഉണ്ടാക്കാനും കഴിയും. ക്രോം ഡെവ്ടൂൾസ് പെർഫോമൻസ് ടാബ് ഈ കണക്കുകൂട്ടലുകൾ തിരിച്ചറിയുന്നതിനുള്ള ഒരു വിലപ്പെട്ട ടൂളാണ്.

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

4. നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ വിശകലനം ചെയ്യുന്നു

നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾക്കും പ്രകടനത്തിലെ തടസ്സങ്ങൾക്ക് കാരണമാകും, പ്രത്യേകിച്ചും അവ വേഗത കുറഞ്ഞതോ ഇടയ്ക്കിടെയുള്ളതോ ആണെങ്കിൽ. ക്രോം ഡെവ്ടൂൾസ് നെറ്റ്‌വർക്ക് ടാബ് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ നെറ്റ്‌വർക്ക് പ്രവർത്തനത്തെക്കുറിച്ചുള്ള ഉൾക്കാഴ്ചകൾ നൽകുന്നു.

പൂർത്തിയാക്കാൻ കൂടുതൽ സമയമെടുക്കുന്ന അഭ്യർത്ഥനകൾക്കോ ആവർത്തിച്ച് നടത്തുന്ന അഭ്യർത്ഥനകൾക്കോ വേണ്ടി നോക്കുക. കാഷിംഗ്, പേജിനേഷൻ, അല്ലെങ്കിൽ കൂടുതൽ കാര്യക്ഷമമായ ഡാറ്റാ ഫെച്ചിംഗ് തന്ത്രങ്ങൾ ഉപയോഗിച്ച് ഈ അഭ്യർത്ഥനകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് പരിഗണിക്കുക.

5. ഷെഡ്യൂളർ ഇൻ്ററാക്ഷനുകൾ മനസ്സിലാക്കുന്നു

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

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

ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

പ്രൊഫൈലിംഗിലൂടെ പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്തിക്കഴിഞ്ഞാൽ, അടുത്ത ഘട്ടം നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ നടപ്പിലാക്കുക എന്നതാണ്. ചില സാധാരണ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ ഇതാ:

1. മെമ്മോയിസേഷൻ

മെമ്മോയിസേഷൻ എന്നത് ചെലവേറിയ ഫംഗ്ഷൻ കോളുകളുടെ ഫലങ്ങൾ കാഷെ ചെയ്യുകയും അതേ ഇൻപുട്ടുകൾ വീണ്ടും സംഭവിക്കുമ്പോൾ കാഷെ ചെയ്ത ഫലം തിരികെ നൽകുകയും ചെയ്യുന്ന ഒരു ടെക്നിക്കാണ്. റിയാക്ടിൽ, ഫംഗ്ഷണൽ കമ്പോണൻ്റുകൾ മെമ്മോയിസ് ചെയ്യാൻ React.memo ഉപയോഗിക്കാം, കണക്കുകൂട്ടലുകളുടെ ഫലങ്ങൾ മെമ്മോയിസ് ചെയ്യാൻ useMemo ഹുക്ക് ഉപയോഗിക്കാം.

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. വെർച്വലൈസേഷൻ

വെർച്വലൈസേഷൻ എന്നത് വലിയ ലിസ്റ്റുകളോ ടേബിളുകളോ കാര്യക്ഷമമായി റെൻഡർ ചെയ്യുന്നതിനുള്ള ഒരു ടെക്നിക്കാണ്, ദൃശ്യമായ ഇനങ്ങൾ മാത്രം റെൻഡർ ചെയ്തുകൊണ്ട്. react-window, react-virtualized പോലുള്ള ലൈബ്രറികൾ റിയാക്ട് ആപ്ലിക്കേഷനുകളിൽ ലിസ്റ്റുകളും ടേബിളുകളും വെർച്വലൈസ് ചെയ്യുന്നതിനുള്ള കമ്പോണൻ്റുകൾ നൽകുന്നു.

3. കോഡ് സ്പ്ലിറ്റിംഗ്

കോഡ് സ്പ്ലിറ്റിംഗ് എന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ചെറിയ കഷണങ്ങളായി വിഭജിച്ച് ആവശ്യാനുസരണം ലോഡ് ചെയ്യുന്നതിനുള്ള ഒരു ടെക്നിക്കാണ്. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുകയും അതിൻ്റെ മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യും. ഡൈനാമിക് ഇമ്പോർട്ടുകളും React.lazy, Suspense കമ്പോണൻ്റുകളും ഉപയോഗിച്ച് റിയാക്ട് കോഡ് സ്പ്ലിറ്റിംഗിനെ പിന്തുണയ്ക്കുന്നു.

import React, { Suspense } from 'react';

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

function App() {
  return (
    Loading...