React கன்கரண்ட் ரெண்டரிங் மெமரி பிரஷர்: தகவமைப்பு தரக் கட்டுப்பாடு

            
import { throttle } from 'lodash';

function MyComponent() {
  const handleScroll = throttle(() => {
    // Perform expensive calculations or updates
    console.log('Scrolling...');
  }, 200); // Execute at most once every 200ms

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  return (
    

      {/* ... */}
    
  );
}

            

              
                Copy
              
            
          

            
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  

    Row {index}
  
);

function MyListComponent() {
  return (
    
      {Row}
    
  );
}

            

              
                Copy
              
            
          

            
import React, { Suspense, lazy } from 'react';

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

function App() {
  return (
    Loading...

இந்த எடுத்துக்காட்டில், MyComponent கூறு Suspense எல்லைக்குள் ரெண்டர் செய்யப்படும்போது மட்டுமே ஏற்றப்படும். fallback ப்ராப் சோம்பேறி-ஏற்றப்பட்ட கூறு ஏற்றப்படும்போது ரெண்டர் செய்ய ஒரு கூறை குறிப்பிடுகிறது.

படங்களுக்கு, படத்தை சோம்பேறியாக ஏற்ற உலாவிக்கு அறிவுறுத்த <img> குறிச்சொல்லில் loading="lazy" பண்புக்கூற்றைப் பயன்படுத்தலாம். பல மூன்றாம் தரப்பு நூலகங்கள் ஒதுக்கிடங்கள் மற்றும் முற்போக்கான பட ஏற்றுதலுக்கான ஆதரவு போன்ற மேம்பட்ட சோம்பேறி ஏற்றுதல் திறன்களை வழங்குகின்றன.

4. பட மேம்படுத்தல்

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

பட மேம்படுத்தலுக்கான சில நுட்பங்கள் இங்கே:

• சுருக்கம்: அதிக காட்சித் தரத்தை தியாகம் செய்யாமல் படங்களின் கோப்பு அளவைக் குறைக்க பட சுருக்க வழிமுறைகளைப் பயன்படுத்தவும். TinyPNG மற்றும் ImageOptim போன்ற கருவிகள் இதற்கு உதவும்.
• மறுஅளவிடுதல்: படங்களை அவற்றின் நோக்கம் கொண்ட பயன்பாட்டிற்கான பொருத்தமான பரிமாணங்களுக்கு மறுஅளவிடவும். பெரிய படங்களை சிறிய அளவுகளில் காண்பிப்பதைத் தவிர்க்கவும், ஏனெனில் இது அலைவரிசை மற்றும் நினைவகத்தை வீணாக்குகிறது.
• வடிவமைப்புத் தேர்வு: படத்தின் வகைக்கு பொருத்தமான பட வடிவமைப்பைத் தேர்வுசெய்க. JPEG பொதுவாக புகைப்படங்களுக்கு ஏற்றது, அதேசமயம் PNG கூர்மையான கோடுகள் மற்றும் உரையுடன் கூடிய கிராபிக்ஸ்களுக்கு சிறந்தது. WebP ஒரு நவீன பட வடிவமாகும், இது சிறந்த சுருக்கத்தையும் தரத்தையும் வழங்குகிறது மற்றும் பெரும்பாலான நவீன உலாவிகளால் ஆதரிக்கப்படுகிறது.
• சோம்பேறி ஏற்றுதல் (மேலே குறிப்பிட்டபடி)
• பதிலளிக்கக்கூடிய படங்கள்: வெவ்வேறு திரை அளவுகளுக்கு ஒரு படத்தின் வெவ்வேறு பதிப்புகளை வழங்க <picture> உறுப்பு அல்லது <img> குறிச்சொல்லின் srcset பண்புக்கூற்றைப் பயன்படுத்தவும். இது பயனரின் சாதனத்திற்கு பொருத்தமான அளவு படத்தை மட்டும் பதிவிறக்கம் செய்ய உலாவியை அனுமதிக்கிறது.

புவியியல் ரீதியாக விநியோகிக்கப்பட்ட சேவையகங்களிலிருந்து படங்களை வழங்க ஒரு உள்ளடக்க விநியோக வலையமைப்பை (CDN) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இது உலகெங்கிலும் உள்ள பயனர்களுக்கு தாமதத்தைக் குறைத்து ஏற்றுதல் நேரங்களை மேம்படுத்தும்.

5. கூறு சிக்கலைக் குறைத்தல்

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

கூறு சிக்கலைக் குறைப்பதற்கான சில நுட்பங்கள் இங்கே:

• கவலைகளைப் பிரித்தல்: கூறுகளை தெளிவான பொறுப்புகளுடன் சிறிய, மேலும் சிறப்பு வாய்ந்த கூறுகளாகப் பிரிக்கவும்.
• கலவை: சிறிய கூறுகளை பெரிய, சிக்கலான UI-களாக இணைக்க கலவையைப் பயன்படுத்தவும்.
• ஹூக்குகள்: கூறுகளிலிருந்து மீண்டும் பயன்படுத்தக்கூடிய தர்க்கத்தை பிரித்தெடுக்க தனிப்பயன் ஹூக்குகளைப் பயன்படுத்தவும்.
• நிலை மேலாண்மை: தனிப்பட்ட கூறுகளுக்கு வெளியே சிக்கலான பயன்பாட்டு நிலையை நிர்வகிக்க Redux அல்லது Zustand போன்ற ஒரு நிலை மேலாண்மை நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

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

6. சர்வர்-சைட் ரெண்டரிங் (SSR) அல்லது ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG)

சர்வர்-சைட் ரெண்டரிங் (SSR) மற்றும் ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG) ஆகியவை உலாவியில் அல்லாமல், சர்வரில் அல்லது உருவாக்க நேரத்தில் ஆரம்ப HTML-ஐ ரெண்டர் செய்வதன் மூலம் உங்கள் பயன்பாட்டின் ஆரம்ப ஏற்றுதல் நேரம் மற்றும் உணரப்பட்ட செயல்திறனை மேம்படுத்தும். இது உலாவியில் பதிவிறக்கம் செய்யப்பட்டு செயல்படுத்தப்பட வேண்டிய ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைக்கும், இது நினைவக அழுத்தத்தில் குறைப்புக்கு வழிவகுக்கும்.

Next.js மற்றும் Gatsby போன்ற கட்டமைப்புகள் React பயன்பாடுகளில் SSR மற்றும் SSG-ஐ எளிதாகச் செயல்படுத்த உதவுகின்றன.

SSR மற்றும் SSG ஆகியவை SEO-ஐயும் மேம்படுத்தும், ஏனெனில் தேடுபொறி கிராலர்கள் முன்-ரெண்டர் செய்யப்பட்ட HTML உள்ளடக்கத்தை எளிதாக அட்டவணையிட முடியும்.

7. சாதன திறன்களின் அடிப்படையில் தகவமைப்பு ரெண்டரிங்

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

சாதன நினைவகம் மற்றும் CPU செயல்திறனை மதிப்பிட நீங்கள் navigator.deviceMemory API (ஆதரவு குறைவாக இருந்தாலும் மற்றும் தனியுரிமை கவலைகள் காரணமாக கவனமாகக் கையாள வேண்டும்) அல்லது மூன்றாம் தரப்பு நூலகங்களைப் பயன்படுத்தலாம். நெட்வொர்க் தகவல்களை navigator.connection API ஐப் பயன்படுத்திப் பெறலாம்.

எடுத்துக்காட்டு (navigator.deviceMemory ஐப் பயன்படுத்தி - எச்சரிக்கையாக இருங்கள் மற்றும் மாற்று வழிகளைக் கருத்தில் கொள்ளுங்கள்):

            
function App() {
  const deviceMemory = navigator.deviceMemory || 4; // Default to 4GB if not available
  const isLowMemoryDevice = deviceMemory <= 4;

  return (
    

      {isLowMemoryDevice ? (
        
      ) : (
        
      )}
    
  );
}

            

              
                Copy
              
            
          

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

8. கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு வெப் வொர்க்கர்களைப் பயன்படுத்துதல்

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

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

            
// main.js
const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Received message from worker:', event.data);
};

worker.postMessage({ task: 'calculate', data: [1, 2, 3, 4, 5] });

// worker.js
self.onmessage = (event) => {
  const { task, data } = event.data;

  if (task === 'calculate') {
    const result = data.reduce((sum, num) => sum + num, 0);
    self.postMessage({ result });
  }
};

            

              
                Copy
              
            
          

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

உற்பத்தியில் நினைவகப் பயன்பாட்டைக் கண்காணித்தல்

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

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

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

முடிவுரை

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

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