JavaScript செயல்திறன் மேம்பாடு: குறியீடு பிரித்தல் vs. சோம்பேறி மதிப்பீடு

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

இந்த எடுத்துக்காட்டில், OtherComponent அது ரெண்டர் செய்யப்படும்போது மட்டுமே ஏற்றப்படும். அது ஏற்றப்படும்போது, பயனர் "ஏற்றுகிறது..." செய்தியைக் காண்பார்.

குறியீடு பிரித்தலுக்கான கருவிகள்

• Webpack: பல்வேறு குறியீடு பிரித்தல் நுட்பங்களை ஆதரிக்கும் ஒரு பிரபலமான தொகுதி மூட்டைக்கட்டி.
• Rollup: சிறிய, திறமையான மூட்டைகளை உருவாக்குவதில் கவனம் செலுத்தும் மற்றொரு தொகுதி மூட்டைக்கட்டி.
• Parcel: தானாக குறியீடு பிரித்தலைக் கையாளும் பூஜ்ஜிய கட்டமைப்பு மூட்டைக்கட்டி.
• Vite: வேகமான மேம்பாடு மற்றும் மேம்படுத்தப்பட்ட உற்பத்தி கட்டமைப்புகளுக்கு சொந்த ES தொகுதிகளைப் பயன்படுத்தும் ஒரு பில்ட் கருவி.

சோம்பேறி மதிப்பீடு: கணக்கீட்டை ஒத்திவைத்தல்

சோம்பேறி மதிப்பீடு என்றால் என்ன?

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

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

சோம்பேறி மதிப்பீடு எப்படி வேலை செய்கிறது

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

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

சோம்பேறி மதிப்பீட்டின் நன்மைகள்

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

உதாரணம்: சோம்பேறி படங்களை ஏற்றுதல்

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

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

இந்த எடுத்துக்காட்டு ஒரு படம் வியூபோர்ட்டில் நுழையும்போது கண்டறிய IntersectionObserver API ஐப் பயன்படுத்துகிறது. ஒரு படம் தெரியும் போது, அதன் src பண்புக்கூறு அதன் data-src பண்புக்கூறின் மதிப்பாக அமைக்கப்படுகிறது, இது படம் ஏற்றப்படுவதைத் தூண்டுகிறது. படத்தை மீண்டும் ஏற்றுவதைத் தடுக்க பார்வையாளர் பின்னர் படத்தைக் கவனிக்காமல் செய்கிறார்.

உதாரணம்: மெமோயிசேஷன்

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

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

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

குறியீடு பிரித்தல் vs. சோம்பேறி மதிப்பீடு: முக்கிய வேறுபாடுகள்

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

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

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

குறியீடு பிரித்தல் vs. சோம்பேறி மதிப்பீட்டை எப்போது பயன்படுத்துவது

குறியீடு பிரித்தல்

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

சோம்பேறி மதிப்பீடு

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

குறியீடு பிரித்தல் மற்றும் சோம்பேறி மதிப்பீட்டை இணைத்தல்

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

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

குறியீடு பிரித்தல் மற்றும் சோம்பேறி மதிப்பீட்டைத் தாண்டி: கூடுதல் மேம்பாட்டு நுட்பங்கள்

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

• சுருக்கம்: உங்கள் குறியீட்டின் அளவைக் குறைக்க தேவையற்ற எழுத்துக்களை (எ.கா., இடைவெளி, கருத்துகள்) அகற்றவும்.
• அழுத்தம்: உங்கள் குறியீட்டின் அளவை மேலும் குறைக்க Gzip அல்லது Brotli போன்ற கருவிகளைப் பயன்படுத்தி சுருக்கவும்.
• சேமிப்பு: உங்கள் சேவையகத்திற்கான கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க உலாவி கேச்சிங் மற்றும் CDN கேச்சிங் ஆகியவற்றைப் பயன்படுத்தவும்.
• மரம் அசைத்தல்: உங்கள் மூட்டைகளின் அளவைக் குறைக்க பயன்படுத்தப்படாத குறியீட்டை அகற்றவும்.
• பட மேம்பாடு: படங்களை சுருக்குவதன் மூலமும், பொருத்தமான பரிமாணங்களுக்கு அவற்றின் அளவை மாற்றுவதன் மூலமும், WebP போன்ற நவீன பட வடிவங்களைப் பயன்படுத்துவதன் மூலமும் மேம்படுத்தவும்.
• டெபவுன்சிங் மற்றும் த்ராட்லிங்: செயல்திறன் சிக்கல்களைத் தடுக்க நிகழ்வு கையாளுபவர்கள் செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்தவும்.
• திறமையான DOM கையாளுதல்: DOM கையாளுதல்களைக் குறைத்து திறமையான DOM கையாளுதல் நுட்பங்களைப் பயன்படுத்தவும்.
• வலை தொழிலாளர்கள்: முக்கிய தடையைத் தடுப்பதைத் தடுக்க கணக்கீட்டு தீவிர பணிகளை வலை பணியாளர்களுக்கு ஆஃப்லோட் செய்யவும்.

முடிவுரை

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

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

மேலும் கற்றல் ஆதாரங்கள்

• Webpack ஆவணங்கள்: https://webpack.js.org/
• Rollup ஆவணங்கள்: https://rollupjs.org/guide/en/
• Vite ஆவணங்கள்: https://vitejs.dev/
• MDN வலை ஆவணங்கள் - குறுக்குவெட்டு கண்காணிப்பாளர் API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google டெவலப்பர்கள் - JavaScript செயலாக்கத்தை மேம்படுத்துதல்: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/