ரியாக்ட் ஷெட்யூலர் விவரக்குறிப்பு: உகந்த செயல்திறனுக்கான பணி செயலாக்கத்தை வெளிப்படுத்துதல்

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

ரியாக்ட் ஷெட்யூலரைப் புரிந்துகொள்வது

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

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

முக்கிய கருத்துக்கள்:

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

விவரக்குறிப்பின் முக்கியத்துவம்

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

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

ரியாக்ட் ஷெட்யூலர் விவரக்குறிப்புக்கான கருவிகள்

ரியாக்ட் பயன்பாடுகளை விவரக்குறிப்பு செய்வதற்கும் ரியாக்ட் ஷெட்யூலருக்குள் பணி செயலாக்கம் குறித்த நுண்ணறிவுகளைப் பெறுவதற்கும் பல சக்திவாய்ந்த கருவிகள் உள்ளன:

1. குரோம் டெவ்டூல்ஸ் செயல்திறன் தளம்

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

அதை எப்படி பயன்படுத்துவது:

1. குரோம் டெவ்டூல்ஸைத் திறக்கவும் (Ctrl+Shift+I அல்லது Cmd+Option+I).
2. "செயல்திறன்" (Performance) தளத்திற்குச் செல்லவும்.
3. "பதிவு" (Record) பொத்தானைக் கிளிக் செய்யவும்.
4. நீங்கள் விவரக்குறிப்பு செய்ய விரும்பும் நடத்தையைத் தூண்டுவதற்கு உங்கள் ரியாக்ட் பயன்பாட்டுடன் தொடர்பு கொள்ளுங்கள்.
5. பதிவு செய்வதை நிறுத்த "நிறுத்து" (Stop) பொத்தானைக் கிளிக் செய்யவும்.
6. செயல்திறன் தடைகளைக் கண்டறிய உருவாக்கப்பட்ட காலவரிசையை பகுப்பாய்வு செய்யுங்கள்.

செயல்திறன் தளம் கைப்பற்றப்பட்ட தரவைப் பகுப்பாய்வு செய்ய பல்வேறு காட்சிகளை வழங்குகிறது, அவற்றுள்:

• சுடர் விளக்கப்படம் (Flame Chart): ஜாவாஸ்கிரிப்ட் செயல்பாடுகளின் அழைப்பு அடுக்கை காட்சிப்படுத்துகிறது, இது அதிக நேரம் எடுக்கும் செயல்பாடுகளைக் கண்டறிய உங்களை அனுமதிக்கிறது.
• கீழிருந்து மேல் (Bottom-Up): ஒவ்வொரு செயல்பாட்டிலும் மற்றும் அதன் அழைப்பாளர்களிலும் செலவழித்த நேரத்தை ஒருங்கிணைக்கிறது, இது மிகவும் விலை உயர்ந்த செயல்பாடுகளைக் கண்டறிய உதவுகிறது.
• அழைப்பு மரம் (Call Tree): அழைப்பு அடுக்கை ஒரு படிநிலை வடிவத்தில் காட்டுகிறது, இது செயலாக்க ஓட்டத்தின் தெளிவான பார்வையை வழங்குகிறது.

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

2. ரியாக்ட் டெவ்டூல்ஸ் விவரக்குறிப்பு கருவி (Profiler)

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

நிறுவல்:

ரியாக்ட் டெவ்டூல்ஸ் விவரக்குறிப்பு கருவி குரோம், ஃபயர்பாக்ஸ் மற்றும் எட்ஜ் ஆகியவற்றிற்கான உலாவி நீட்டிப்பாக கிடைக்கிறது. நீங்கள் அதை அந்தந்த உலாவியின் நீட்டிப்பு ஸ்டோரிலிருந்து நிறுவலாம்.

பயன்பாடு:

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

விவரக்குறிப்பு கருவி கைப்பற்றப்பட்ட தரவைப் பகுப்பாய்வு செய்ய இரண்டு முக்கிய காட்சிகளை வழங்குகிறது:

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

ரியாக்ட் டெவ்டூல்ஸ் விவரக்குறிப்பு கருவி பின்வரும் அம்சங்களையும் வழங்குகிறது:

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

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. மெதுவாக ரெண்டரிங் ஆகும் கூறுகளை அடையாளம் காணுதல்

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

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

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

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

ரியாக்ட் டெவ்டூல்ஸ் அமைப்புகளில் "கூறுகள் ரெண்டர் ஆகும்போது புதுப்பிப்புகளை முன்னிலைப்படுத்து" விருப்பத்தை இயக்கவும். இது மறு-ரெண்டரிங் செய்யும் கூறுகளை பார்வைக்கு முன்னிலைப்படுத்தி, தேவையற்ற மறு-ரெண்டர்களைக் கண்டறிவதை எளிதாக்கும். இந்தக் கூறுகள் ஏன் மறு-ரெண்டரிங் செய்கின்றன என்பதற்கான காரணங்களை ஆராய்ந்து, 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. மெய்நிகராக்கம் (Virtualization)

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

3. குறியீடு பிரித்தல் (Code Splitting)

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

import React, { Suspense } from 'react';

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

function App() {
  return (
    Loading...