ரியாக்ட் ஷெட்யூலர் கூட்டுறவு பல்பணி: பணி விட்டுக்கொடுக்கும் உத்தியில் தேர்ச்சி பெறுதல்

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

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

ஜாவாஸ்கிரிப்டின் ஒற்றை-திரி இயல்பு மற்றும் தடுப்பதின் சிக்கலைப் புரிந்துகொள்ளுதல்

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

• பயனர் உள்ளீட்டிற்கு பதிலளித்தல் (கிளிக்குகள், தட்டச்சு செய்தல், ஸ்க்ரோலிங்)
• அனிமேஷன்களை இயக்குதல்
• UI புதுப்பிப்புகள் உட்பட மற்ற ஜாவாஸ்கிரிப்ட் பணிகளை செயல்படுத்துதல்
• நெட்வொர்க் கோரிக்கைகளைக் கையாளுதல்

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

பாரம்பரிய ஒத்திசைவான ரெண்டரிங்கின் வரம்புகள்

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

கூட்டுறவு பல்பணி ஏன் தீர்வு

கூட்டுறவு பல்பணி என்பது பணிகள் தானாக முன்வந்து CPU-ன் கட்டுப்பாட்டை மற்ற பணிகளுக்கு விட்டுக்கொடுக்கும் ஒரு அமைப்பாகும். முன்கூட்டிய பல்பணிக்கு (இயக்க முறைமைகளில் பயன்படுத்தப்படுகிறது, அங்கு OS எந்த நேரத்திலும் ஒரு பணியை குறுக்கிடலாம்) மாறாக, கூட்டுறவு பல்பணி எப்போது இடைநிறுத்தம் செய்வது மற்றும் மற்றவர்களை இயக்க அனுமதிப்பது என்பதை பணிகளே தீர்மானிப்பதை நம்பியுள்ளது. ஜாவாஸ்கிரிப்ட் மற்றும் ரியாக்ட் சூழலில், இதன் பொருள் ஒரு நீண்ட ரெண்டரிங் பணியை சிறிய துண்டுகளாக உடைக்க முடியும், மேலும் ஒரு துண்டை முடித்த பிறகு, அது நிகழ்வு வளையத்திற்கு (event loop) கட்டுப்பாட்டை "விட்டுக்கொடுக்க" முடியும், இது பயனர் உள்ளீடு அல்லது அனிமேஷன்கள் போன்ற பிற பணிகளைச் செயலாக்க அனுமதிக்கிறது. ரியாக்ட் ஷெட்யூலர் இதை அடைய ஒரு அதிநவீன கூட்டுறவு பல்பணி வடிவத்தை செயல்படுத்துகிறது.

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

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

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

நிகழ்வு வளையம் (Event Loop) மற்றும் அது ஷெட்யூலருடன் எவ்வாறு தொடர்பு கொள்கிறது

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

ஒருங்கியல்பான ரெண்டரிங் விளக்கப்பட்டது

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

• ரியாக்ட் ஒரு கூறு மரத்தை (component tree) ரெண்டர் செய்யத் தொடங்கலாம்.
• அதிக முன்னுரிமை கொண்ட புதுப்பிப்பு ஏற்பட்டால் (எ.கா., பயனர் மற்றொரு பொத்தானைக் கிளிக் செய்தால்), ரியாக்ட் தற்போதைய ரெண்டரிங்கை இடைநிறுத்தி, புதிய புதுப்பிப்பைக் கையாண்டு, பின்னர் முந்தைய ரெண்டரிங்கை மீண்டும் தொடரலாம்.
• இது UI உறைவதைத் தடுக்கிறது, பயனர் தொடர்புகள் எப்போதும் உடனடியாக செயலாக்கப்படுவதை உறுதி செய்கிறது.

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

பணி விட்டுக்கொடுக்கும் உத்தி: கூட்டுறவு பல்பணியின் இதயம்

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

விட்டுக்கொடுத்தல் திரைக்குப் பின்னால் எவ்வாறு செயல்படுகிறது

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

பழைய ஜாவாஸ்கிரிப்ட் சூழல்களில், இது `setTimeout(..., 0)` அல்லது `requestIdleCallback` ஐப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம். ரியாக்ட் ஷெட்யூலர், `requestAnimationFrame` மற்றும் கவனமான நேரக்கணிப்பு உள்ளிட்ட அதிநவீன பொறிமுறைகளைப் பயன்படுத்தி, வேலையைத் திறமையாக விட்டுக்கொடுத்து மீண்டும் தொடங்குகிறது, இது உலாவியின் பிரதான நிகழ்வு வளையத்திற்கு முற்றிலும் வேலையை நிறுத்தும் விதத்தில் விட்டுக்கொடுக்க வேண்டிய அவசியமில்லை. இது அடுத்த வேலைத் துண்டை அடுத்த கிடைக்கும் அனிமேஷன் பிரேமிற்குள் அல்லது ஒரு செயலற்ற தருணத்தில் இயக்க திட்டமிடலாம்.

`shouldYield` செயல்பாடு (கருத்தியல்)

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

• நேரத் துண்டுகள்: தற்போதைய பணி இந்த பிரேமிற்கான அதன் ஒதுக்கப்பட்ட நேர பட்ஜெட்டை மீறிவிட்டதா?
• பணி முன்னுரிமை: உடனடி கவனம் தேவைப்படும் அதிக முன்னுரிமை கொண்ட பணிகள் காத்திருக்கின்றனவா?
• உலாவி நிலை: உலாவி வரைதல் போன்ற பிற முக்கியமான செயல்பாடுகளில் பிஸியாக உள்ளதா?

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

பயன்: தடுக்காத UI புதுப்பிப்புகள்

பணி விட்டுக்கொடுக்கும் உத்தியின் முதன்மை நன்மை, பிரதான திரியைத் தடுக்காமல் UI புதுப்பிப்புகளைச் செய்யும் திறன் ஆகும். இது பின்வருவனவற்றிற்கு வழிவகுக்கிறது:

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

நடைமுறை தாக்கங்கள் மற்றும் பணி விட்டுக்கொடுத்தலை எவ்வாறு பயன்படுத்துவது

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

ஒருங்கியல்பான பயன்முறையுடன் தானியங்கி விட்டுக்கொடுத்தல்

நீங்கள் ஒருங்கியல்பான ரெண்டரிங்கைத் தேர்வுசெய்யும்போது (ரியாக்ட் 18+ ஐப் பயன்படுத்தி உங்கள் `ReactDOM`-ஐ பொருத்தமாக உள்ளமைப்பதன் மூலம்), ரியாக்ட் ஷெட்யூலர் பொறுப்பேற்கிறது. இது தானாகவே ரெண்டரிங் வேலையை உடைத்து, தேவைக்கேற்ப விட்டுக்கொடுக்கிறது. இதன் பொருள் கூட்டுறவு பல்பணியிலிருந்து பல செயல்திறன் ஆதாயங்கள் உங்களுக்கு உடனடியாகக் கிடைக்கின்றன.

நீண்டகால ரெண்டரிங் பணிகளைக் கண்டறிதல்

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

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

விட்டுக்கொடுத்தலுடன் உகந்ததாக்குவதற்கும் வேலை செய்வதற்கும் உத்திகள்

ரியாக்ட் விட்டுக்கொடுத்தலைக் கையாளும்போது, உங்கள் கூறுகளை அதிலிருந்து最大限ம் பயனடையும் வழிகளில் எழுதலாம்:

1. பெரிய பட்டியல்களுக்கான மெய்நிகராக்கம் (Virtualization): மிக நீண்ட பட்டியல்களுக்கு, `react-window` அல்லது `react-virtualized` போன்ற நூலகங்களைப் பயன்படுத்தவும். இந்த நூலகங்கள் தற்போது வியூபோர்ட்டில் தெரியும் உருப்படிகளை மட்டுமே ரெண்டர் செய்கின்றன, இது எந்த நேரத்திலும் ரியாக்ட் செய்ய வேண்டிய வேலையின் அளவைக் கணிசமாகக் குறைக்கிறது. இது இயற்கையாகவே அடிக்கடி விட்டுக்கொடுக்கும் வாய்ப்புகளுக்கு வழிவகுக்கிறது.
2. மெமோயிசேஷன் (`React.memo`, `useMemo`, `useCallback`): உங்கள் கூறுகளும் மதிப்புகளும் தேவைப்படும்போது மட்டுமே மீண்டும் கணக்கிடப்படுவதை உறுதிசெய்யவும். `React.memo` செயல்பாட்டுக் கூறுகளின் தேவையற்ற மறு-ரெண்டர்களைத் தடுக்கிறது. `useMemo` விலையுயர்ந்த கணக்கீடுகளை கேச் செய்கிறது, மற்றும் `useCallback` செயல்பாட்டு வரையறைகளை கேச் செய்கிறது. இது ரியாக்ட் செய்ய வேண்டிய வேலையின் அளவைக் குறைக்கிறது, விட்டுக்கொடுத்தலை மிகவும் பயனுள்ளதாக்குகிறது.
3. குறியீடு பிரித்தல் (`React.lazy` மற்றும் `Suspense`): உங்கள் பயன்பாட்டை தேவைக்கேற்ப ஏற்றப்படும் சிறிய துண்டுகளாக உடைக்கவும். இது ஆரம்ப ரெண்டரிங் சுமையைக் குறைத்து, தற்போது தேவைப்படும் UI-ன் பகுதிகளை ரெண்டரிங் செய்வதில் ரியாக்ட் கவனம் செலுத்த அனுமதிக்கிறது.
4. பயனர் உள்ளீட்டை டிபவுன்சிங் மற்றும் த்ராட்லிங் செய்தல்: விலையுயர்ந்த செயல்பாடுகளைத் தூண்டும் உள்ளீட்டு புலங்களுக்கு (எ.கா., தேடல் பரிந்துரைகள்), செயல்பாடு எவ்வளவு அடிக்கடி செய்யப்படுகிறது என்பதைக் கட்டுப்படுத்த டிபவுன்சிங் அல்லது த்ராட்லிங் பயன்படுத்தவும். இது ஷெட்யூலரை மூழ்கடிக்கக்கூடிய புதுப்பிப்புகளின் வெள்ளத்தைத் தடுக்கிறது.
5. விலையுயர்ந்த கணக்கீடுகளை ரெண்டரிலிருந்து வெளியே நகர்த்தவும்: உங்களுக்கு கணக்கீட்டு ரீதியாக தீவிரமான பணிகள் இருந்தால், அவற்றை நிகழ்வு கையாளுபவர்கள், `useEffect` ஹூக்குகள் அல்லது வலைப் பணியாளர்களுக்கு (web workers) நகர்த்துவதைக் கருத்தில் கொள்ளுங்கள். இது ரெண்டரிங் செயல்முறை தானாகவே முடிந்தவரை மெலிதாக வைக்கப்படுவதை உறுதிசெய்கிறது, இது அடிக்கடி விட்டுக்கொடுக்க அனுமதிக்கிறது.
6. புதுப்பிப்புகளைத் தொகுத்தல் (தானியங்கி மற்றும் கைமுறை): ரியாக்ட் 18 நிகழ்வு கையாளுபவர்கள் அல்லது வாக்குறுதிகளுக்குள் (Promises) நிகழும் நிலை புதுப்பிப்புகளை தானாகவே தொகுக்கிறது. இந்த சூழல்களுக்கு வெளியே நீங்கள் கைமுறையாக புதுப்பிப்புகளைத் தொகுக்க வேண்டியிருந்தால், உடனடி, ஒத்திசைவான புதுப்பிப்புகள் முக்கியமான குறிப்பிட்ட சூழ்நிலைகளுக்கு `ReactDOM.flushSync()` ஐப் பயன்படுத்தலாம், ஆனால் இதை மிதமாகப் பயன்படுத்தவும், ஏனெனில் இது ஷெட்யூலரின் விட்டுக்கொடுக்கும் நடத்தையைத் தவிர்க்கிறது.

உதாரணம்: ஒரு பெரிய தரவு அட்டவணையை உகந்ததாக்குதல்

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

விட்டுக்கொடுத்தல் இல்லாமல் (கருத்தியல்):

ஒரு ஒற்றை `renderTable` செயல்பாடு அனைத்து 10,000 வரிசைகளையும் கடந்து, ஒவ்வொன்றிற்கும் `` மற்றும் `` கூறுகளை உருவாக்கி, அவற்றை DOM-ல் சேர்க்கிறது. இந்த முழு செயல்முறையும் அது முடியும் வரை பிரதான திரியைத் தடுக்கிறது.

விட்டுக்கொடுத்தலுடன் (ரியாக்ட் 18+ மற்றும் சிறந்த நடைமுறைகளைப் பயன்படுத்தி):

1. மெய்நிகராக்கம்: `react-window` போன்ற ஒரு நூலகத்தைப் பயன்படுத்தவும். அட்டவணை கூறு வியூபோர்ட்டில் தெரியும், சொல்லப்போனால், 20 வரிசைகளை மட்டுமே ரெண்டர் செய்கிறது.
2. ஷெட்யூலரின் பங்கு: பயனர் ஸ்க்ரோல் செய்யும்போது, ஒரு புதிய வரிசைகளின் தொகுப்பு தெரியும். ரியாக்ட் ஷெட்யூலர் இந்த புதிய வரிசைகளின் ரெண்டரிங்கை சிறிய துண்டுகளாக உடைக்கும்.
3. செயலில் பணி விட்டுக்கொடுத்தல்: ஒவ்வொரு சிறிய வரிசைகளின் துண்டும் ரெண்டர் செய்யப்படும்போது (எ.கா., ஒரு நேரத்தில் 2-5 வரிசைகள்), ஷெட்யூலர் அது விட்டுக்கொடுக்க வேண்டுமா என்று சரிபார்க்கிறது. பயனர் வேகமாக ஸ்க்ரோல் செய்தால், ரியாக்ட் சில வரிசைகளை ரெண்டர் செய்த பிறகு விட்டுக்கொடுக்கலாம், இது ஸ்க்ரோல் நிகழ்வைச் செயலாக்க மற்றும் அடுத்த வரிசைகளின் தொகுப்பை ரெண்டரிங் செய்ய திட்டமிட அனுமதிக்கிறது. இது முழு அட்டவணையும் ஒரே நேரத்தில் ரெண்டர் செய்யப்படாவிட்டாலும், ஸ்க்ரோல் நிகழ்வு மென்மையாகவும் பதிலளிக்கக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது.
4. மெமோயிசேஷன்: தனிப்பட்ட வரிசை கூறுகளை மெமோயிஸ் செய்யலாம் (`React.memo`), இதனால் ஒரே ஒரு வரிசைக்கு மட்டுமே புதுப்பிப்பு தேவைப்பட்டால், மற்றவை தேவையற்ற முறையில் மீண்டும் ரெண்டர் ஆகாது.

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

உலகளாவிய பரிசீலனைகள் மற்றும் எதிர்கால திசைகள்

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

• மாறுபடும் சாதன செயல்திறன்: உலகெங்கிலும் உள்ள பயனர்கள் உயர்நிலை டெஸ்க்டாப்புகள் முதல் குறைந்த சக்தி கொண்ட மொபைல் போன்கள் வரை பரந்த அளவிலான சாதனங்களில் வலைப் பயன்பாடுகளை அணுகுகிறார்கள். கூட்டுறவு பல்பணி, வேலை பிரிக்கப்பட்டு மிகவும் திறமையாகப் பகிரப்படுவதால், குறைந்த சக்தி வாய்ந்த சாதனங்களில் கூட பயன்பாடுகள் பதிலளிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது.
• நெட்வொர்க் தாமதம்: பணி விட்டுக்கொடுத்தல் முதன்மையாக CPU-சார்ந்த ரெண்டரிங் பணிகளைக் கையாண்டாலும், UI-ஐத் தடுக்கும் திறனானது புவியியல் ரீதியாக விநியோகிக்கப்பட்ட சேவையகங்களிலிருந்து அடிக்கடி தரவைப் பெறும் பயன்பாடுகளுக்கும் முக்கியமானது. ஒரு பதிலளிக்கக்கூடிய UI, நெட்வொர்க் கோரிக்கைகள் செயல்பாட்டில் இருக்கும்போது (ஏற்றல் சுழற்சிகள் போன்றவை) பின்னூட்டத்தை வழங்க முடியும், உறைந்ததாகத் தோன்றுவதற்குப் பதிலாக.
• அணுகல்தன்மை: ஒரு பதிலளிக்கக்கூடிய UI இயல்பாகவே அதிக அணுகல்தன்மை கொண்டது. ஊடாடுதல்களுக்கு குறைவான துல்லியமான நேரத்தைக் கொண்டிருக்கக்கூடிய இயக்கக் குறைபாடுகள் உள்ள பயனர்கள், உறைந்து அவர்களின் உள்ளீட்டைப் புறக்கணிக்காத ஒரு பயன்பாட்டிலிருந்து பயனடைவார்கள்.

ரியாக்டின் ஷெட்யூலரின் பரிணாமம்

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

முடிவுரை

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

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

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