JavaScript விருப்பத் சங்கிலி செயல்திறன் மேம்படுத்தல்: அணுகல் மாதிரி கேச்சிங்

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

விருப்பத் சங்கிலி மற்றும் அதன் செயல்திறன் தாக்கங்களைப் புரிந்துகொள்வது

விருப்பத் சங்கிலி இது போன்ற பண்புகளை அணுக உங்களை அனுமதிக்கிறது:

            const user = {
  profile: {
    address: {
      city: 'London'
    }
  }
};

const city = user?.profile?.address?.city; // city will be 'London'
const country = user?.profile?.address?.country; // country will be undefined

            

              
                Copy
              
            
          

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

            let city;
if (user && user.profile && user.profile.address) {
  city = user.profile.address.city;
}

            

              
                Copy
              
            
          

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

அணுகல் மாதிரி கேச்சிங்கை அறிமுகப்படுத்துகிறோம்

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

உதாரணம்: பயனர் விவர அணுகலை மேம்படுத்துதல்

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

            function displayUserCity(user) {
  const city = user?.profile?.address?.city;
  if (city) {
    console.log(`User's city: ${city}`);
  } else {
    console.log('City not available');
  }
}

            

              
                Copy
              
            
          

அணுகல் மாதிரி கேச்சிங்கை பயன்படுத்தி இதை மேம்படுத்த, நீங்கள் user?.profile?.address பொருளை தற்காலிக சேமிப்பில் வைக்கலாம்:

            function displayUserCityOptimized(user) {
  const address = user?.profile?.address;
  const city = address?.city;
  if (city) {
    console.log(`User's city: ${city}`);
  } else {
    console.log('City not available');
  }
}

            

              
                Copy
              
            
          

இந்த மேம்படுத்தப்பட்ட பதிப்பில், user?.profile?.address வெளிப்பாடு ஒரு முறை மட்டுமே மதிப்பீடு செய்யப்படுகிறது, மேலும் முடிவு address மாறியாக சேமிக்கப்படுகிறது. நகரத்திற்கு அடுத்தடுத்த அணுகல் பின்னர் கேச் செய்யப்பட்ட address மதிப்பை பயன்படுத்துகிறது.

எப்போது அணுகல் மாதிரி கேச்சிங்கை பயன்படுத்துவது

பின்வரும் காட்சிகளில் அணுகல் மாதிரி கேச்சிங் மிகவும் பயனுள்ளதாக இருக்கும்:

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

உதாரணம்: ஒரு React கூறுகளை மேம்படுத்துதல்

பயனரின் முகவரியைக் காட்டும் ஒரு React கூறுகளைக் கவனியுங்கள். ஒரு அப்பாவியான செயல்படுத்தல் இதுபோல் இருக்கலாம்:

            function UserAddress({ user }) {
  return (
    <div>
      <p>City: {user?.profile?.address?.city}</p>
      <p>Country: {user?.profile?.address?.country}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

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

            function UserAddressOptimized({ user }) {
  const address = user?.profile?.address;
  return (
    <div>
      <p>City: {address?.city}</p>
      <p>Country: {address?.country}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

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

நடைமுறை பரிசீலனைகள் மற்றும் வர்த்தகங்கள்

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

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

உலகளாவிய எடுத்துக்காட்டுகள் மற்றும் கருத்தாய்வுகள்

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

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

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

மாற்றுகள் மற்றும் தொடர்புடைய நுட்பங்கள்

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

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

அணுகல் மாதிரி கேச்சிங்கை செயல்படுத்திய பின்னரும் அதற்கு முன்னும், செயல்திறன் மேம்பாடுகளை அளவிடுவது அவசியம். உங்கள் குறியீட்டை சுயவிவரப்படுத்தவும், செயல்திறன் தடைகளை அடையாளம் காணவும் Chrome DevTools Performance தாவல் போன்ற கருவிகளைப் பயன்படுத்தலாம்.

console.time மற்றும் console.timeEnd ஐப் பயன்படுத்தி ஒரு செயல்பாட்டின் செயல்திறனை அளவிடுவதற்கான ஒரு எளிய எடுத்துக்காட்டு இங்கே:

            console.time('withoutCaching');
for (let i = 0; i < 100000; i++) {
  displayUserCity(user);
}
console.timeEnd('withoutCaching');

console.time('withCaching');
for (let i = 0; i < 100000; i++) {
  displayUserCityOptimized(user);
}
console.timeEnd('withCaching');

            

              
                Copy
              
            
          

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

முடிவுரை

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

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