உலாவி செயல்திறன் விவரக்குறிப்பு: ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரப் பகுப்பாய்வு

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

ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரம் ஏன் முக்கியமானது

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

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

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

ஜாவாஸ்கிரிப்ட் செயல்திறன் விவரக்குறிப்புக்கான கருவிகள்

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

• Chrome DevTools: Chrome உலாவியில் கட்டமைக்கப்பட்ட ஒரு விரிவான கருவிகளின் தொகுப்பு.
• Firefox Developer Tools: Firefox-ல் கிடைக்கும் இதே போன்ற கருவிகளின் தொகுப்பு.

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

சுயவிவரக்குறிப்புக்கு Chrome DevTools-ஐப் பயன்படுத்துதல்

Chrome DevTools-ல் ஜாவாஸ்கிரிப்ட் செயல்படுத்தலை சுயவிவரக்குறிப்பு செய்ய, இந்த வழிமுறைகளைப் பின்பற்றவும்:

1. DevTools-ஐத் திறக்கவும்: வலைப்பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுக்கவும் அல்லது F12 (அல்லது Windows/Linux-ல் Ctrl+Shift+I, macOS-ல் Cmd+Opt+I) ஐ அழுத்தவும்.
2. "Performance" பேனலுக்குச் செல்லவும்: இந்தப் பேனல் செயல்திறன் சுயவிவரங்களைப் பதிவு செய்வதற்கும் பகுப்பாய்வு செய்வதற்கும் கருவிகளை வழங்குகிறது.
3. பதிவைத் தொடங்கவும்: செயல்திறன் தரவைப் பிடிக்கத் தொடங்க "Record" பொத்தானை (ஒரு வட்டம்) கிளிக் செய்யவும். ஒரு பக்கத்தை ஏற்றுவது, UI கூறுகளுடன் தொடர்புகொள்வது அல்லது குறிப்பிட்ட ஜாவாஸ்கிரிப்ட் செயல்பாடுகளைத் தூண்டுவது போன்ற நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் செயல்களைச் செய்யவும்.
4. பதிவை நிறுத்தவும்: பதிவை நிறுத்த மீண்டும் "Record" பொத்தானைக் கிளிக் செய்யவும். DevTools பின்னர் கைப்பற்றப்பட்ட தரவைச் செயலாக்கி விரிவான செயல்திறன் சுயவிவரத்தைக் காண்பிக்கும்.

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

Chrome DevTools-ல் உள்ள Performance பேனல் ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் பற்றிய ஏராளமான தகவல்களை வழங்குகிறது. செயல்திறன் சிக்கல்களைக் கண்டறிந்து நிவர்த்தி செய்வதற்கு இந்தத் தரவை எவ்வாறு விளக்குவது என்பதைப் புரிந்துகொள்வது முக்கியம். Performance பேனலின் முக்கிய பிரிவுகள் பின்வருமாறு:

• Timeline: முழுப் பதிவு காலத்தின் காட்சி மேலோட்டத்தை வழங்குகிறது, இது CPU பயன்பாடு, நெட்வொர்க் செயல்பாடு மற்றும் காலப்போக்கில் பிற செயல்திறன் அளவீடுகளைக் காட்டுகிறது.
• Summary: ஸ்கிரிப்டிங், ரெண்டரிங் மற்றும் பெயிண்டிங் போன்ற வெவ்வேறு செயல்பாடுகளில் செலவழித்த மொத்த நேரம் உட்பட, பதிவின் சுருக்கத்தைக் காட்டுகிறது.
• Bottom-Up: செயல்பாட்டு அழைப்புகளின் படிநிலை முறிவைக் காட்டுகிறது, இது அதிக நேரத்தை எடுத்துக்கொள்ளும் செயல்பாடுகளைக் கண்டறிய உங்களை அனுமதிக்கிறது.
• Call Tree: ஒரு கால் ட்ரீ காட்சியைக் காட்டுகிறது, இது செயல்பாட்டு அழைப்புகளின் வரிசை மற்றும் அவற்றின் செயல்படுத்தும் நேரங்களை விளக்குகிறது.
• Event Log: செயல்பாட்டு அழைப்புகள், DOM நிகழ்வுகள் மற்றும் குப்பை சேகரிப்பு சுழற்சிகள் போன்ற பதிவின் போது நிகழ்ந்த அனைத்து நிகழ்வுகளையும் பட்டியலிடுகிறது.

முக்கிய அளவீடுகளை விளக்குதல்

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

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

பொதுவான ஜாவாஸ்கிரிப்ட் செயல்திறன் சிக்கல்களைக் கண்டறிதல்

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

1. திறமையற்ற DOM கையாளுதல்

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

உதாரணம்: ஒரு சுழற்சிக்குள் பல கூறுகளின் உரை உள்ளடக்கத்தை புதுப்பிக்கும் பின்வரும் ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கவனியுங்கள்:

for (let i = 0; i < 1000; i++) {
  const element = document.getElementById(`item-${i}`);
  element.textContent = `New text for item ${i}`;
}

இந்தக் குறியீடு 1000 DOM செயல்பாடுகளைச் செய்கிறது, ஒவ்வொன்றும் ஒரு reflow மற்றும் repaint-ஐத் தூண்டுகிறது. இது செயல்திறனை கணிசமாக பாதிக்கலாம், குறிப்பாக பழைய சாதனங்களில் அல்லது சிக்கலான DOM கட்டமைப்புகளுடன்.

மேம்படுத்தல் நுட்பங்கள்:

• DOM அணுகலைக் குறைத்தல்: புதுப்பிப்புகளைத் தொகுப்பதன் மூலமோ அல்லது டாக்குமெண்ட் ஃபிராக்மென்ட்ஸ் போன்ற நுட்பங்களைப் பயன்படுத்துவதன் மூலமோ DOM செயல்பாடுகளின் எண்ணிக்கையைக் குறைக்கவும்.
• DOM கூறுகளை கேச் செய்யவும்: அடிக்கடி அணுகப்படும் DOM கூறுகளுக்கான குறிப்புகளை மாறிகளில் சேமித்து, மீண்டும் மீண்டும் தேடுவதைத் தவிர்க்கவும்.
• திறமையான DOM கையாளுதல் முறைகளைப் பயன்படுத்தவும்: முடிந்தவரை `innerHTML`-ஐ விட `textContent` போன்ற முறைகளைத் தேர்ந்தெடுக்கவும், ஏனெனில் அவை பொதுவாக வேகமானவை.
• ஒரு விர்ச்சுவல் DOM-ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்: React, Vue.js, மற்றும் Angular போன்ற கட்டமைப்புகள் நேரடி DOM கையாளுதலைக் குறைக்கவும் மற்றும் புதுப்பிப்புகளை மேம்படுத்தவும் ஒரு விர்ச்சுவல் DOM-ஐப் பயன்படுத்துகின்றன.

மேம்படுத்தப்பட்ட உதாரணம்:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  element.textContent = `New text for item ${i}`;
  fragment.appendChild(element);
}
const container = document.getElementById('container');
container.appendChild(fragment);

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

2. நீண்ட நேரம் இயங்கும் சுழற்சிகள் மற்றும் சிக்கலான அல்காரிதம்கள்

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

உதாரணம்: ஒரு பெரிய வரிசையில் ஒரு சிக்கலான கணக்கீட்டைச் செய்யும் பின்வரும் ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கவனியுங்கள்:

function processData(data) {
  let result = 0;
  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data.length; j++) {
      result += Math.sqrt(data[i] * data[j]);
    }
  }
  return result;
}

const largeArray = Array.from({ length: 1000 }, () => Math.random());
const result = processData(largeArray);
console.log(result);

இந்தக் குறியீடு O(n^2) நேரச் சிக்கலுடன் ஒரு உள்ளமைக்கப்பட்ட சுழற்சியைச் செய்கிறது, இது பெரிய வரிசைகளுக்கு மிகவும் மெதுவாக இருக்கும்.

மேம்படுத்தல் நுட்பங்கள்:

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

மேம்படுத்தப்பட்ட உதாரணம் (`setTimeout`-ஐப் பயன்படுத்தி):

function processData(data, callback) {
  let result = 0;
  let i = 0;

  function processChunk() {
    const chunkSize = 100;
    const start = i;
    const end = Math.min(i + chunkSize, data.length);

    for (; i < end; i++) {
      for (let j = 0; j < data.length; j++) {
        result += Math.sqrt(data[i] * data[j]);
      }
    }

    if (i < data.length) {
      setTimeout(processChunk, 0); // Schedule the next chunk
    } else {
      callback(result); // Call the callback with the final result
    }
  }

  processChunk(); // Start processing
}

const largeArray = Array.from({ length: 1000 }, () => Math.random());
processData(largeArray, (result) => {
  console.log(result);
});

இந்த மேம்படுத்தப்பட்ட குறியீடு கணக்கீட்டை சிறிய பகுதிகளாக உடைத்து, `setTimeout`-ஐப் பயன்படுத்தி அவற்றை திட்டமிடுகிறது, இது பிரதான திரெட் நீண்ட காலத்திற்கு தடுக்கப்படுவதைத் தடுக்கிறது.

3. அதிகப்படியான நினைவக ஒதுக்கீடு மற்றும் குப்பை சேகரிப்பு

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

உதாரணம்: அதிக எண்ணிக்கையிலான தற்காலிக பொருட்களை உருவாக்கும் பின்வரும் ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கவனியுங்கள்:

function createObjects() {
  for (let i = 0; i < 1000000; i++) {
    const obj = { x: i, y: i * 2 };
  }
}

createObjects();

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

மேம்படுத்தல் நுட்பங்கள்:

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

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

const objectPool = [];
const POOL_SIZE = 1000;

// Initialize the object pool
for (let i = 0; i < POOL_SIZE; i++) {
  objectPool.push({ x: 0, y: 0, used: false });
}

function getObject() {
  for (let i = 0; i < POOL_SIZE; i++) {
    if (!objectPool[i].used) {
      objectPool[i].used = true;
      return objectPool[i];
    }
  }
  return { x: 0, y: 0, used: true }; // Handle pool exhaustion if needed
}

function releaseObject(obj) {
  obj.used = false;
  obj.x = 0;
  obj.y = 0;
}

function processObjects() {
  const objects = [];
  for (let i = 0; i < 1000; i++) {
    const obj = getObject();
    obj.x = i;
    obj.y = i * 2;
    objects.push(obj);
  }

  // ... do something with the objects ...

  // Release the objects back to the pool
  for (const obj of objects) {
    releaseObject(obj);
  }
}

processObjects();

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

4. திறமையற்ற நிகழ்வு கையாளுதல்

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

உதாரணம்: பக்கத்தில் உள்ள ஒவ்வொரு உறுப்புக்கும் ஒரு நிகழ்வு கேட்பவரை இணைக்கும் பின்வரும் ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கவனியுங்கள்:

const elements = document.querySelectorAll('*');
for (let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function() {
    console.log('Element clicked!');
  });
}

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

மேம்படுத்தல் நுட்பங்கள்:

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

மேம்படுத்தப்பட்ட உதாரணம் (நிகழ்வுப் பிரதிநிதித்துவத்தைப் பயன்படுத்தி):

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('clickable-element')) {
    console.log('Clickable element clicked!');
  }
});

இந்த மேம்படுத்தப்பட்ட குறியீடு டாக்குமென்டிற்கு ஒரே ஒரு கிளிக் நிகழ்வு கேட்பவரை இணைத்து, `clickable-element` என்ற வகுப்பைக் கொண்ட கூறுகளின் கிளிக்குகளைக் கையாள நிகழ்வுப் பிரதிநிதித்துவத்தைப் பயன்படுத்துகிறது.

5. பெரிய படங்கள் மற்றும் மேம்படுத்தப்படாத சொத்துக்கள்

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

மேம்படுத்தல் நுட்பங்கள்:

• படங்களை மேம்படுத்துங்கள்: தரத்தை இழக்காமல் கோப்பு அளவைக் குறைக்க படங்களை சுருக்கவும். பொருத்தமான பட வடிவங்களைப் பயன்படுத்தவும் (எ.கா., புகைப்படங்களுக்கு JPEG, கிராஃபிக்ஸுக்கு PNG).
• சோம்பேறி ஏற்றுதலைப் பயன்படுத்தவும்: பார்வைப் பகுதியில் தெரியும் போது மட்டுமே படங்களை ஏற்றவும்.
• ஜாவாஸ்கிரிப்ட் மற்றும் CSS-ஐ சிறிதாக்கி சுருக்கவும்: தேவையற்ற எழுத்துக்களை அகற்றுவதன் மூலமும், Gzip அல்லது Brotli போன்ற சுருக்க அல்காரிதம்களைப் பயன்படுத்துவதன் மூலமும் ஜாவாஸ்கிரிப்ட் மற்றும் CSS கோப்புகளின் அளவைக் குறைக்கவும்.
• உலாவி கேச்சிங்கைப் பயன்படுத்தவும்: உலாவிகள் நிலையான சொத்துக்களை கேச் செய்யவும் மற்றும் கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கவும் சர்வர் பக்க கேச்சிங் தலைப்புகளை உள்ளமைக்கவும்.
• ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தவும்: வெவ்வேறு புவியியல் இருப்பிடங்களில் உள்ள பயனர்களுக்கு ஏற்றுதல் நேரங்களை மேம்படுத்த உலகெங்கிலும் உள்ள பல சேவையகங்களில் நிலையான சொத்துக்களை விநியோகிக்கவும்.

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

செயல்திறன் சிக்கல்களின் பகுப்பாய்வு மற்றும் அடையாளத்தின் அடிப்படையில், ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரம் மற்றும் ஒட்டுமொத்த வலைப் பயன்பாட்டு செயல்திறனை மேம்படுத்த பல செயல் நடவடிக்கைகளை நீங்கள் எடுக்கலாம்:

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

மேம்பட்ட சுயவிவரக்குறிப்பு நுட்பங்கள்

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

• நினைவக சுயவிவரக்குறிப்பு: நினைவகப் பயன்பாட்டை பகுப்பாய்வு செய்யவும் மற்றும் நினைவகக் கசிவுகளை அடையாளம் காணவும் Chrome DevTools-ல் உள்ள Memory பேனலைப் பயன்படுத்தவும்.
• CPU த்ராட்டிலிங்: குறைந்த தர சாதனங்களில் செயல்திறனைச் சோதிக்க மெதுவான CPU வேகத்தை உருவகப்படுத்தவும்.
• நெட்வொர்க் த்ராட்டிலிங்: நம்பமுடியாத நெட்வொர்க்குகளில் செயல்திறனைச் சோதிக்க மெதுவான நெட்வொர்க் இணைப்புகளை உருவகப்படுத்தவும்.
• காலவரிசை குறிப்பான்கள்: செயல்திறன் சுயவிவரத்தில் குறிப்பிட்ட நிகழ்வுகள் அல்லது குறியீட்டின் பகுதிகளை அடையாளம் காண காலவரிசை குறிப்பான்களைப் பயன்படுத்தவும்.
• ரிமோட் பிழைத்திருத்தம்: ரிமோட் சாதனங்களில் அல்லது பிற உலாவிகளில் இயங்கும் ஜாவாஸ்கிரிப்ட் குறியீட்டை பிழைத்திருத்தம் மற்றும் சுயவிவரக்குறிப்பு செய்யவும்.

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

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

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

முடிவுரை

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