ரியாக்ட் செயல்திறனை மேம்படுத்துதல்: ரியாக்ட் ப்ரொஃபைலர் பாகத்தின் ஒரு ஆழமான பார்வை

வலைதள மேம்பாட்டின் ஆற்றல்மிக்க உலகில், தடையற்ற மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குவது மிக முக்கியமானது. பயனர் இடைமுகங்களை உருவாக்குவதற்கான பிரபலமான ஜாவாஸ்கிரிப்ட் லைப்ரரியான ரியாக்ட் மூலம் உருவாக்கப்பட்ட செயலிகளுக்கு, செயல்திறனைப் புரிந்துகொண்டு மேம்படுத்துவது ஒரு சிறந்த நடைமுறை மட்டுமல்ல, அது ஒரு தேவையாகும். இதை அடைவதற்கு ஒரு ரியாக்ட் டெவலப்பரின் கையில் இருக்கும் மிகவும் சக்திவாய்ந்த கருவிகளில் ஒன்று ரியாக்ட் ப்ரொஃபைலர் பாகம் (React Profiler component) ஆகும். இந்த விரிவான வழிகாட்டி, ரியாக்ட் ப்ரொஃபைலர் என்றால் என்ன, அதை எவ்வாறு திறம்பட பயன்படுத்துவது, மற்றும் அது எவ்வாறு வேகமான, உலகளவில் அணுகக்கூடிய ரியாக்ட் செயலிகளை உருவாக்க உதவும் என்பதைப் புரிந்துகொள்ள ஒரு ஆழமான பயணத்திற்கு உங்களை அழைத்துச் செல்லும்.

ரியாக்ட் செயலிகளில் செயல்திறன் ஏன் முக்கியமானது

ப்ரொஃபைலரின் பிரத்யேக அம்சங்களுக்குள் நாம் செல்வதற்கு முன், செயல்திறன் ஏன் மிகவும் முக்கியமானது, குறிப்பாக உலகளாவிய பார்வையாளர்களுக்கு என்பதை நிலைநிறுத்துவோம்:

• பயனர் தக்கவைப்பு மற்றும் திருப்தி: மெதுவாக ஏற்றப்படும் அல்லது பதிலளிக்காத செயலிகள் பயனர்கள் వాటిని கைவிடுவதற்கான முக்கிய காரணமாகும். வெவ்வேறு புவியியல் இருப்பிடங்களில், மாறுபட்ட இணைய வேகம் மற்றும் சாதனத் திறன்களைக் கொண்ட பயனர்களுக்கு, செயல்திறன் மிக்க செயலி திருப்திக்கு மிகவும் முக்கியமானது.
• மாற்று விகிதங்கள் (Conversion Rates): மின்வணிகம் மற்றும் சேவை அடிப்படையிலான செயலிகளில், சிறிய தாமதங்கள் கூட மாற்று விகிதங்களை கணிசமாக பாதிக்கலாம். ஒரு மென்மையான செயல்திறன் நேரடியாக சிறந்த வணிக விளைவுகளுக்கு வழிவகுக்கிறது.
• SEO தரவரிசை: கூகிள் போன்ற தேடுபொறிகள் பக்க வேகத்தை ஒரு தரவரிசைக் காரணியாகக் கருதுகின்றன. செயல்திறன் மிக்க செயலி உயர் தரவரிசையைப் பெறுவதற்கான வாய்ப்புகள் அதிகம், இது உலகளவில் அதன் தெரிவுநிலையை அதிகரிக்கிறது.
• அணுகல்தன்மை (Accessibility): செயல்திறன் என்பது அணுகல்தன்மையின் ஒரு முக்கிய அம்சமாகும். ஒரு செயலி குறைந்த சக்தி வாய்ந்த சாதனங்களில் அல்லது மெதுவான நெட்வொர்க்குகளில் சீராக இயங்குவதை உறுதி செய்வது, உலகெங்கிலும் உள்ள பரந்த அளவிலான பயனர்களுக்கு அதை மேலும் அணுகக்கூடியதாக மாற்றுகிறது.
• வளத் திறன்: மேம்படுத்தப்பட்ட செயலிகள் குறைவான வளங்களை (CPU, நினைவகம், அலைவரிசை) பயன்படுத்துகின்றன, இது பயனர்களுக்கு சிறந்த அனுபவத்தையும், உள்கட்டமைப்பு செலவுகளைக் குறைக்கவும் வழிவகுக்கும்.

ரியாக்ட் ப்ரொஃபைலர் பாகம் ஒரு அறிமுகம்

ரியாக்ட் ப்ரொஃபைலர் என்பது ரியாக்ட் மூலம் வழங்கப்படும் ஒரு உள்ளமைக்கப்பட்ட பாகம் ஆகும், இது உங்கள் ரியாக்ட் செயலிகளின் செயல்திறனை அளவிட உதவுவதற்காக பிரத்யேகமாக வடிவமைக்கப்பட்டுள்ளது. இது பாகங்களுக்கான கமிட் நேரங்களைப் பதிவு செய்வதன் மூலம் செயல்படுகிறது, இது எந்த பாகங்கள் அடிக்கடி ரெண்டர் ஆகின்றன அல்லது ரெண்டர் ஆக அதிக நேரம் எடுக்கின்றன என்பதை அடையாளம் காண உங்களை அனுமதிக்கிறது. இந்தத் தரவு செயல்திறன் தடைகளை சுட்டிக்காட்டுவதற்கு விலைமதிப்பற்றது.

ப்ரொஃபைலர் பொதுவாக ரியாக்ட் டெவலப்பர் கருவிகள் உலாவி நீட்டிப்பு மூலம் அணுகப்படுகிறது, இது ப்ரொஃபைலிங்கிற்கு ஒரு பிரத்யேக டாபை வழங்குகிறது. இது உங்கள் செயலியை அளவீடு செய்து, பாகத்தின் ரெண்டர் சுழற்சிகள் பற்றிய விரிவான தகவல்களைச் சேகரிப்பதன் மூலம் செயல்படுகிறது.

ரியாக்ட் ப்ரொஃபைலிங்கில் முக்கிய கருத்துகள்

ரியாக்ட் ப்ரொஃபைலரை திறம்பட பயன்படுத்த, சில முக்கிய கருத்துக்களைப் புரிந்துகொள்வது அவசியம்:

• கமிட்ஸ் (Commits): ரியாக்ட்டில், ஒரு கமிட் என்பது மெய்நிகர் DOM-ஐ உண்மையான DOM-உடன் ஒப்பிட்டு சரிசெய்யும் செயல்முறையாகும். உங்கள் செயலியின் ஸ்டேட் அல்லது ப்ராப்ஸில் ஏற்படும் மாற்றங்களின் அடிப்படையில் ரியாக்ட் UI-ஐ புதுப்பிக்கும் போது இது நிகழ்கிறது. ப்ரொஃபைலர் ஒவ்வொரு கமிட்டிற்கும் ஆகும் நேரத்தை அளவிடுகிறது.
• ரெண்டர் (Render): ரெண்டர் கட்டம் என்பது, ரியாக்ட் உங்கள் பாகத்தின் செயல்பாடுகளை அல்லது வகுப்பு முறைகளை அழைத்து அவற்றின் தற்போதைய வெளியீட்டை (மெய்நிகர் DOM) பெறும் நேரமாகும். பாகங்கள் சிக்கலானதாக இருந்தால் அல்லது தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்யப்பட்டால் இந்த கட்டம் அதிக நேரம் எடுக்கலாம்.
• ரீகன்சிலியேஷன் (Reconciliation): இது UI-இல் என்ன மாறியுள்ளது என்பதை ரியாக்ட் தீர்மானித்து, DOM-ஐ திறமையாகப் புதுப்பிக்கும் செயல்முறையாகும்.
• ப்ரொஃபைலிங் செஷன் (Profiling Session): ஒரு ப்ரொஃபைலிங் செஷன் என்பது உங்கள் செயலியுடன் நீங்கள் தொடர்பு கொள்ளும்போது ஒரு குறிப்பிட்ட காலப்பகுதியில் செயல்திறன் தரவைப் பதிவு செய்வதை உள்ளடக்குகிறது.

ரியாக்ட் ப்ரொஃபைலருடன் தொடங்குதல்

ரியாக்ட் ப்ரொஃபைலரைப் பயன்படுத்தத் தொடங்குவதற்கான எளிதான வழி, ரியாக்ட் டெவலப்பர் கருவிகள் உலாவி நீட்டிப்பை நிறுவுவதாகும். Chrome, Firefox மற்றும் Edge-க்கு கிடைக்கும் இந்த கருவிகள், ரியாக்ட் செயலிகளை ஆய்வு செய்வதற்கும் பிழைதிருத்தம் செய்வதற்கும் ப்ரொஃபைலர் உட்பட பல பயன்பாடுகளை வழங்குகின்றன.

நிறுவப்பட்டதும், உங்கள் ரியாக்ட் செயலியை உலாவியில் திறந்து, டெவலப்பர் கருவிகளைத் திறக்கவும் (பொதுவாக F12 அழுத்துவதன் மூலம் அல்லது வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுப்பதன் மூலம்). "Components" மற்றும் "Network" போன்ற பிற டாப்களுடன் "Profiler" என்ற டாபையும் நீங்கள் காண வேண்டும்.

ப்ரொஃபைலர் டாபை பயன்படுத்துதல்

ப்ரொஃபைலர் டாப் பொதுவாக ஒரு டைம்லைன் வியூ மற்றும் ஒரு ஃபிளேம் கிராஃப் வியூவை வழங்குகிறது:

• டைம்லைன் வியூ (Timeline View): இந்த வியூ கமிட்களின் காலவரிசை பதிவைக் காட்டுகிறது. ஒவ்வொரு பாரும் ஒரு கமிட்டைக் குறிக்கிறது, மேலும் அதன் நீளம் அந்த கமிட்டிற்கு எடுத்துக்கொண்ட நேரத்தைக் குறிக்கிறது. சம்பந்தப்பட்ட பாகங்கள் பற்றிய விவரங்களைக் காண பார்களின் மீது நீங்கள் கர்சரை வைக்கலாம்.
• ஃபிளேம் கிராஃப் வியூ (Flame Graph View): இந்த வியூ உங்கள் பாகத்தின் மரத்தின் படிநிலை பிரதிநிதித்துவத்தை வழங்குகிறது. அகலமான பார்கள் ரெண்டர் செய்ய அதிக நேரம் எடுத்த பாகங்களைக் குறிக்கின்றன. ரெண்டரிங் நேரத்திற்கு எந்த பாகங்கள் அதிகம் பங்களிக்கின்றன என்பதை விரைவாக அடையாளம் காண இது உதவுகிறது.

ப்ரொஃபைலிங்கைத் தொடங்க:

1. ரியாக்ட் டெவலப்பர் கருவிகளில் உள்ள "Profiler" டாபிற்குச் செல்லவும்.
2. "Record" பொத்தானைக் கிளிக் செய்யவும் (பெரும்பாலும் ஒரு வட்ட ஐகான்).
3. உங்கள் செயலியுடன் சாதாரணமாகத் தொடர்பு கொள்ளவும், செயல்திறன் சிக்கல்களை ஏற்படுத்தக்கூடும் என்று நீங்கள் சந்தேகிக்கும் செயல்களைச் செய்யவும்.
4. தொடர்புடைய தொடர்புகளைப் பதிவு செய்தவுடன் "Stop" பொத்தானைக் கிளிக் செய்யவும் (பெரும்பாலும் ஒரு சதுர ஐகான்).

அதன்பிறகு ப்ரொஃபைலர் பதிவுசெய்யப்பட்ட தரவைக் காண்பிக்கும், இது உங்கள் பாகங்களின் செயல்திறனைப் பகுப்பாய்வு செய்ய உங்களை அனுமதிக்கிறது.

ப்ரொஃபைலர் தரவை பகுப்பாய்வு செய்தல்: எதைத் தேடுவது

நீங்கள் ஒரு ப்ரொஃபைலிங் செஷனை நிறுத்தியதும், உண்மையான வேலை தொடங்குகிறது: தரவைப் பகுப்பாய்வு செய்தல். இங்கே கவனம் செலுத்த வேண்டிய முக்கிய அம்சங்கள்:

1. மெதுவான ரெண்டர்களை அடையாளம் காணுதல்

குறிப்பிடத்தக்க அளவு நேரம் எடுக்கும் கமிட்களைத் தேடுங்கள். டைம்லைன் வியூவில், இவை மிக நீளமான பார்களாக இருக்கும். ஃபிளேம் கிராஃபில், இவை அகலமான பார்களாக இருக்கும்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: நீங்கள் ஒரு மெதுவான கமிட்டைக் கண்டறிந்தால், எந்த பாகங்கள் சம்பந்தப்பட்டுள்ளன என்பதைப் பார்க்க அதைக் கிளிக் செய்யவும். ப்ரொஃபைலர் வழக்கமாக அந்த கமிட்டின் போது ரெண்டர் செய்யப்பட்ட பாகங்களை முன்னிலைப்படுத்தி, அவை எவ்வளவு நேரம் எடுத்தன என்பதைக் குறிப்பிடும்.

2. தேவையற்ற மறு-ரெண்டர்களை கண்டறிதல்

செயல்திறன் சிக்கல்களுக்கு ஒரு பொதுவான காரணம், பாகங்களின் ப்ராப்ஸ் அல்லது ஸ்டேட் உண்மையில் மாறாதபோதும் அவை மீண்டும் ரெண்டர் செய்யப்படுவதுதான். இதைக் கண்டறிய ப்ரொஃபைலர் உங்களுக்கு உதவும்.

எதைத் தேடுவது:

• வெளிப்படையான காரணம் இல்லாமல் அடிக்கடி ரெண்டர் ஆகும் பாகங்கள்.
• ப்ராப்ஸ் மற்றும் ஸ்டேட் மாறாமல் இருப்பது போல் தோன்றினாலும், நீண்ட நேரம் ரெண்டர் ஆகும் பாகங்கள்.
• 'இது ஏன் ரெண்டர் ஆனது?' அம்சம் (பின்னர் விளக்கப்படும்) இங்கே முக்கியமானது.

செயல்படுத்தக்கூடிய நுண்ணறிவு: ஒரு பாகம் தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்யப்பட்டால், அதற்கான காரணத்தை ஆராயுங்கள். பொதுவான குற்றவாளிகள் பின்வருமாறு:

• ஒவ்வொரு ரெண்டரிலும் புதிய ஆப்ஜெக்ட் அல்லது அரே லிட்டரல்களை ப்ராப்ஸாக அனுப்புவது.
• பல நுகர்வோர் பாகங்களில் மறு-ரெண்டர்களைத் தூண்டும் கான்டெக்ஸ்ட் புதுப்பிப்புகள்.
• பெற்றோர் பாகங்கள் மீண்டும் ரெண்டர் ஆகும்போது, அவற்றின் ப்ராப்ஸ் மாறாவிட்டாலும் பிள்ளைகளும் மீண்டும் ரெண்டர் ஆவது.

3. பாகத்தின் படிநிலை மற்றும் ரெண்டரிங் செலவுகளைப் புரிந்துகொள்ளுதல்

ரெண்டரிங் மரத்தைப் புரிந்துகொள்ள ஃபிளேம் கிராஃப் சிறந்தது. ஒவ்வொரு பாரின் அகலமும் அந்த பாகம் மற்றும் அதன் பிள்ளைகளை ரெண்டர் செய்ய செலவழித்த நேரத்தைக் குறிக்கிறது.

எதைத் தேடுவது:

• ஃபிளேம் கிராஃபின் மேற்புறத்தில் அகலமாக இருக்கும் பாகங்கள் (அதாவது அவை ரெண்டர் செய்ய அதிக நேரம் எடுக்கின்றன).
• பல கமிட்களில் ஃபிளேம் கிராஃபில் அடிக்கடி தோன்றும் பாகங்கள்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: ஒரு பாகம் தொடர்ந்து அகலமாக இருந்தால், அதன் ரெண்டரிங் தர்க்கத்தை மேம்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இதில் பின்வருவன அடங்கும்:

• React.memo (செயல்பாட்டு பாகங்களுக்கு) அல்லது PureComponent (வகுப்பு பாகங்களுக்கு) பயன்படுத்தி பாகத்தை மெமோயிஸ் செய்தல்.
• சிக்கலான பாகங்களை சிறிய, நிர்வகிக்கக்கூடிய பாகங்களாக உடைத்தல்.
• நீண்ட பட்டியல்களுக்கு மெய்நிகராக்கம் போன்ற நுட்பங்களைப் பயன்படுத்துதல்.

4. 'இது ஏன் ரெண்டர் ஆனது?' அம்சத்தைப் பயன்படுத்துதல்

தேவையற்ற மறு-ரெண்டர்களை பிழைதிருத்தம் செய்வதற்கான மிகவும் சக்திவாய்ந்த அம்சம் இதுவாகும். நீங்கள் ப்ரொஃபைலரில் ஒரு பாகத்தைத் தேர்ந்தெடுக்கும்போது, அது ஏன் மீண்டும் ரெண்டர் ஆனது என்பதற்கான ஒரு விவரத்தை அது வழங்கும், அதைத் தூண்டிய குறிப்பிட்ட ப்ராப் அல்லது ஸ்டேட் மாற்றங்களைப் பட்டியலிடும்.

எதைத் தேடுவது:

• நீங்கள் மாறவில்லை என்று எதிர்பார்க்கும்போது மறு-ரெண்டர் காரணத்தைக் காட்டும் எந்தவொரு பாகமும்.
• ப்ராப்ஸில் ஏற்படும் எதிர்பாராத அல்லது அற்பமான மாற்றங்கள்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: தேவையற்ற மறு-ரெண்டர்களின் மூல காரணத்தை அடையாளம் காண இந்தத் தகவலைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, ஒரு ப்ராப் என்பது ஒவ்வொரு பெற்றோர் ரெண்டரிலும் மீண்டும் உருவாக்கப்படும் ஒரு ஆப்ஜெக்ட்டாக இருந்தால், நீங்கள் பெற்றோரின் ஸ்டேட்டை மெமோயிஸ் செய்ய வேண்டும் அல்லது ப்ராப்ஸாக அனுப்பப்படும் செயல்பாடுகளுக்கு useCallback பயன்படுத்த வேண்டும்.

ப்ரொஃபைலர் தரவுகளால் வழிகாட்டப்பட்ட மேம்படுத்தல் நுட்பங்கள்

ரியாக்ட் ப்ரொஃபைலரிலிருந்து பெறப்பட்ட நுண்ணறிவுகளுடன், நீங்கள் இலக்கு மேம்படுத்தல்களைச் செயல்படுத்தலாம்:

1. `React.memo` மற்றும் `useMemo` உடன் மெமோயிசேஷன்

React.memo: இந்த உயர்-வரிசை பாகம் உங்கள் செயல்பாட்டு பாகங்களை மெமோயிஸ் செய்கிறது. ஒரு பாகத்தின் ப்ராப்ஸ் மாறவில்லை என்றால் ரியாக்ட் அதை ரெண்டர் செய்வதைத் தவிர்க்கும். ஒரே ப்ராப்ஸுடன் அடிக்கடி ரெண்டர் ஆகும் பாகங்களுக்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு:

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

              
                Copy
              
            
          

useMemo: இந்த ஹூக் ஒரு கணக்கீட்டின் முடிவை மெமோயிஸ் செய்கிறது. ஒவ்வொரு ரெண்டரிலும் செய்யப்படும் விலையுயர்ந்த கணக்கீடுகளுக்கு இது பயனுள்ளதாக இருக்கும். அதன் சார்புகளில் ஒன்று மாறினால் மட்டுமே முடிவு மீண்டும் கணக்கிடப்படும்.

எடுத்துக்காட்டு:

            const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
            

              
                Copy
              
            
          

2. `useCallback` உடன் மேம்படுத்துதல்

useCallback கால்பேக் செயல்பாடுகளை மெமோயிஸ் செய்யப் பயன்படுகிறது. மெமோயிஸ் செய்யப்பட்ட குழந்தை பாகங்களுக்கு செயல்பாடுகளை ப்ராப்ஸாக அனுப்பும்போது இது முக்கியமானது. பெற்றோர் மீண்டும் ரெண்டர் செய்தால், ஒரு புதிய செயல்பாட்டு நிகழ்வு உருவாக்கப்படும், இது மெமோயிஸ் செய்யப்பட்ட குழந்தையை தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்ய வைக்கும். useCallback செயல்பாட்டு குறிப்பு நிலையானதாக இருப்பதை உறுதி செய்கிறது.

எடுத்துக்காட்டு:

            const handleClick = React.useCallback(() => {
  doSomething(a, b);
}, [a, b]);
            

              
                Copy
              
            
          

3. நீண்ட பட்டியல்களுக்கான மெய்நிகராக்கம் (Virtualization)

உங்கள் செயலி நீண்ட தரவுப் பட்டியல்களைக் காட்டினால், எல்லா பொருட்களையும் ஒரே நேரத்தில் ரெண்டர் செய்வது செயல்திறனை கடுமையாக பாதிக்கும். விண்டோயிங் அல்லது மெய்நிகராக்கம் போன்ற நுட்பங்கள் (react-window அல்லது react-virtualized போன்ற லைப்ரரிகளைப் பயன்படுத்தி) தற்போது வியூபோர்ட்டில் தெரியும் பொருட்களை மட்டுமே ரெண்டர் செய்கின்றன, இது பெரிய தரவுத்தொகுப்புகளுக்கான செயல்திறனை வியத்தகு முறையில் மேம்படுத்துகிறது.

ஒரு நீண்ட பட்டியலை ரெண்டர் செய்வது உண்மையிலேயே ஒரு தடை என்பதை உறுதிப்படுத்த ப்ரொஃபைலர் உங்களுக்கு உதவும், பின்னர் மெய்நிகராக்கத்தைச் செயல்படுத்திய பிறகு ஏற்பட்ட முன்னேற்றத்தை நீங்கள் அளவிடலாம்.

4. React.lazy மற்றும் Suspense உடன் கோட் ஸ்பிளிட்டிங்

கோட் ஸ்பிளிட்டிங் உங்கள் செயலியின் பண்டிலை சிறிய துண்டுகளாக உடைக்க உங்களை அனுமதிக்கிறது, அவை தேவைக்கேற்ப ஏற்றப்படுகின்றன. இது ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்தும், குறிப்பாக மெதுவான இணைப்புகளில் உள்ள பயனர்களுக்கு. ரியாக்ட், பாகங்களுக்கு கோட் ஸ்பிளிட்டிங்கை எளிதாகச் செயல்படுத்த React.lazy மற்றும் Suspense ஐ வழங்குகிறது.

எடுத்துக்காட்டு:

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

function MyComponent() {
  return (
    

      Loading...
}>