ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് എപിഐ: റൺടൈം മെട്രിക്സ് ശേഖരണത്തിൽ വൈദഗ്ദ്ധ്യം നേടാം

ഇന്നത്തെ വേഗതയേറിയ ഡിജിറ്റൽ ലോകത്ത്, വെബ്സൈറ്റുകളുടെയും വെബ് ആപ്ലിക്കേഷനുകളുടെയും പ്രകടനം വളരെ പ്രധാനമാണ്. ഉപയോക്താക്കൾ തൽക്ഷണ പ്രതികരണവും തടസ്സമില്ലാത്ത അനുഭവങ്ങളും പ്രതീക്ഷിക്കുന്നു. വേഗത കുറഞ്ഞ ലോഡിംഗ് സമയങ്ങളോ മന്ദഗതിയിലുള്ള പ്രവർത്തനങ്ങളോ നിരാശയിലേക്കും ഒടുവിൽ ഉപേക്ഷിക്കലിലേക്കും നയിക്കും. മികച്ച പ്രകടനം ഉറപ്പാക്കാൻ, ഡെവലപ്പർമാർക്ക് അവരുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡിന്റെ റൺടൈം സ്വഭാവം അളക്കാനും വിശകലനം ചെയ്യാനും മെച്ചപ്പെടുത്താനും ടൂളുകൾ ആവശ്യമാണ്. ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് എപിഐ റൺടൈം മെട്രിക്സ് ശേഖരിക്കുന്നതിന് ശക്തവും നിലവാരമുള്ളതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു, ഇത് പ്രകടനത്തിലെ തടസ്സങ്ങൾ തിരിച്ചറിയാനും സുഗമമായ ഉപയോക്തൃ അനുഭവത്തിനായി അവരുടെ ആപ്ലിക്കേഷനുകൾ ഒപ്റ്റിമൈസ് ചെയ്യാനും ഡെവലപ്പർമാരെ സഹായിക്കുന്നു.

എന്താണ് ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് എപിഐ?

ആധുനിക വെബ് ബ്രൗസറുകളിൽ ലഭ്യമായ ഇന്റർഫേസുകളുടെയും മെത്തേഡുകളുടെയും ഒരു ശേഖരമാണ് ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് എപിഐ, ഇത് ഡെവലപ്പർമാർക്ക് പ്രകടനവുമായി ബന്ധപ്പെട്ട വിവിധ ഡാറ്റ ആക്‌സസ് ചെയ്യാനും അളക്കാനും അനുവദിക്കുന്നു. റൺടൈം സ്വഭാവത്തിന്റെ വിവിധ വശങ്ങളെക്കുറിച്ചുള്ള വിവരങ്ങൾ ഇത് നൽകുന്നു, അവയിൽ ഉൾപ്പെടുന്നവ:

• നാവിഗേഷൻ ടൈമിംഗ്: പേജ് ലോഡിംഗിന്റെ വിവിധ ഘട്ടങ്ങൾ, അതായത് ഡിഎൻഎസ് ലുക്കപ്പ്, ടിസിപി കണക്ഷൻ, അഭ്യർത്ഥന, പ്രതികരണ സമയം എന്നിവയ്ക്കെടുക്കുന്ന സമയം അളക്കുന്നു.
• റിസോഴ്സ് ടൈമിംഗ്: ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈൽഷീറ്റുകൾ പോലുള്ള പേജ് ലോഡ് ചെയ്യുന്ന ഓരോ റിസോഴ്സിനും വിശദമായ ടൈമിംഗ് വിവരങ്ങൾ നൽകുന്നു.
• യൂസർ ടൈമിംഗ്: ഡെവലപ്പർമാർക്ക് അവരുടെ ആപ്ലിക്കേഷന്റെ ലോജിക്കിന് പ്രത്യേകമായ കസ്റ്റം പ്രകടന മെട്രിക്സുകൾ നിർവചിക്കാനും അളക്കാനും അനുവദിക്കുന്നു.
• ലോംഗ് ടാസ്ക്കുകൾ: മെയിൻ ത്രെഡിനെ ദീർഘനേരം തടസ്സപ്പെടുത്തുന്ന ടാസ്ക്കുകൾ തിരിച്ചറിയുന്നു, ഇത് യുഐ ഫ്രീസ് ആവാൻ കാരണമായേക്കാം.
• മെമ്മറി മെഷർമെൻ്റ്: (ചില ബ്രൗസറുകളിൽ ലഭ്യമാണ്) പേജിന്റെ മെമ്മറി ഉപയോഗത്തെക്കുറിച്ചുള്ള വിവരങ്ങൾ നൽകുന്നു.
• എലമെൻ്റ് ടൈമിംഗ്: നിർദ്ദിഷ്‌ട എച്ച്ടിഎംഎൽ ഘടകങ്ങൾ എപ്പോഴാണ് ഉപയോക്താവിന് ദൃശ്യമാകുന്നതെന്നതിനെക്കുറിച്ചുള്ള ടൈമിംഗ് മെട്രിക്സ് നൽകുന്നു.
• ഇവന്റ് ടൈമിംഗ്: ക്ലിക്കുകൾ, കീ പ്രസ്സുകൾ, മറ്റ് ഉപയോക്തൃ ഇടപെടലുകൾ പോലുള്ള ഇവന്റുകളുടെ ദൈർഘ്യം അളക്കുന്നു.

ഈ കഴിവുകൾ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് അവരുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡ് യഥാർത്ഥ സാഹചര്യങ്ങളിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ആഴത്തിൽ മനസ്സിലാക്കാനും ഒപ്റ്റിമൈസേഷനുള്ള മേഖലകൾ കണ്ടെത്താനും കഴിയും.

പെർഫോമൻസ് എപിഐയുടെ പ്രധാന ഘടകങ്ങൾ

1. performance ഒബ്ജക്റ്റ്

പെർഫോമൻസ് എപിഐ ആക്‌സസ് ചെയ്യുന്നതിനുള്ള പ്രധാന എൻട്രി പോയിന്റാണ് performance ഒബ്ജക്റ്റ്. ഇത് window ഒബ്ജക്റ്റിന്റെ ഒരു പ്രോപ്പർട്ടിയാണ്, കൂടാതെ പ്രകടന ഡാറ്റ അളക്കുന്നതിനും വിശകലനം ചെയ്യുന്നതിനും വിവിധ മെത്തേഡുകളും പ്രോപ്പർട്ടികളും നൽകുന്നു. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന പ്രോപ്പർട്ടികൾ performance.timing, performance.now() എന്നിവയാണ്.

2. performance.now()

performance.now() ഒരു ഉയർന്ന റെസല്യൂഷനുള്ള ടൈംസ്റ്റാമ്പ് (മില്ലിസെക്കൻഡിൽ) നൽകുന്നു, ഇത് ഡോക്യുമെന്റിന്റെ നാവിഗേഷൻ ആരംഭിച്ചതിന് ശേഷമുള്ള സമയം സൂചിപ്പിക്കുന്നു. കോഡ് എക്സിക്യൂഷന്റെ ദൈർഘ്യം അളക്കുന്നതിനുള്ള അടിസ്ഥാനമാണിത്. Date.now()-ൽ നിന്ന് വ്യത്യസ്തമായി, performance.now() മോണോടോണിക് ആണ്, അതായത് സിസ്റ്റം ക്ലോക്ക് ക്രമീകരണങ്ങൾ ഇതിനെ ബാധിക്കില്ല.

ഉദാഹരണം: ഒരു ഫംഗ്ഷന്റെ എക്സിക്യൂഷൻ സമയം അളക്കുന്നു

            const startTime = performance.now();
// Code to be measured
for (let i = 0; i < 1000000; i++) {
  // Perform some operation
}
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`Execution time: ${executionTime} milliseconds`);

            

              
                Copy
              
            
          

3. പെർഫോമൻസ് ടൈംലൈൻ

ഒരു പേജിന്റെ പ്രവർത്തന സമയത്ത് സംഭവിക്കുന്ന പ്രകടനവുമായി ബന്ധപ്പെട്ട ഇവന്റുകളുടെ ഒരു രേഖയാണ് പെർഫോമൻസ് ടൈംലൈൻ. ഇതിൽ നാവിഗേഷൻ ടൈമിംഗ്, റിസോഴ്സ് ടൈമിംഗ്, യൂസർ ടൈമിംഗ് എന്നിവയും അതിലേറെയും ഉൾപ്പെടുന്നു. performance.getEntries(), performance.getEntriesByType(), performance.getEntriesByName() പോലുള്ള മെത്തേഡുകൾ ഉപയോഗിച്ച് പെർഫോമൻസ് ടൈംലൈൻ ആക്‌സസ് ചെയ്യാൻ കഴിയും.

4. പെർഫോമൻസ് എൻട്രി ഇന്റർഫേസ്

പെർഫോമൻസ് ടൈംലൈനിലെ ഓരോ എൻട്രിയും ഒരു PerformanceEntry ഒബ്ജക്റ്റാണ് പ്രതിനിധീകരിക്കുന്നത്. ഈ ഇന്റർഫേസ് പ്രകടന ഇവന്റിനെ വിവരിക്കുന്ന പ്രോപ്പർട്ടികൾ നൽകുന്നു, അതായത് അതിന്റെ പേര്, ആരംഭ സമയം, ദൈർഘ്യം, എൻട്രി തരം എന്നിവ. വിവിധതരം പെർഫോമൻസ് എൻട്രികൾക്ക് അവയുടെ ഇവന്റ് തരത്തിന് പ്രത്യേകമായ അധിക പ്രോപ്പർട്ടികൾ ഉണ്ടായിരിക്കും.

റൺടൈം മെട്രിക്സ് ശേഖരിക്കുകയും വിശകലനം ചെയ്യുകയും ചെയ്യുന്നു

ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് എപിഐ റൺടൈം മെട്രിക്സ് ശേഖരിക്കുന്നതിനും വിശകലനം ചെയ്യുന്നതിനും വിവിധ മാർഗ്ഗങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു. ചില സാധാരണ ഉപയോഗങ്ങൾ ഇതാ:

1. പേജ് ലോഡ് സമയം അളക്കുന്നു

performance.timing ഒബ്ജക്റ്റ് പേജ് ലോഡിംഗിന്റെ വിവിധ ഘട്ടങ്ങളെക്കുറിച്ചുള്ള വിശദമായ വിവരങ്ങൾ നൽകുന്നു. തടസ്സങ്ങൾ തിരിച്ചറിയാനും ലോഡിംഗ് പ്രക്രിയ ഒപ്റ്റിമൈസ് ചെയ്യാനും നിങ്ങൾക്ക് ഈ ഡാറ്റ ഉപയോഗിക്കാം.

ഉദാഹരണം: DOMContentLoaded ഇവന്റ് സമയം കണക്കാക്കുന്നു

            window.addEventListener('load', () => {
  const loadTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
  console.log(`DOMContentLoaded event time: ${loadTime} milliseconds`);
});

            

              
                Copy
              
            
          

ഫലങ്ങൾ വ്യാഖ്യാനിക്കുന്നു: ഉയർന്ന domContentLoadedEventEnd മൂല്യം, ബ്രൗസർ ജാവാസ്ക്രിപ്റ്റ് കോഡ് പാഴ്‌സ് ചെയ്യുന്നതിനും എക്സിക്യൂട്ട് ചെയ്യുന്നതിനും, ഡോം റെൻഡർ ചെയ്യുന്നതിനും, അല്ലെങ്കിൽ റിസോഴ്സുകൾ ലോഡ് ചെയ്യാൻ കാത്തിരിക്കുന്നതിനും ധാരാളം സമയം ചെലവഴിക്കുന്നുവെന്ന് സൂചിപ്പിക്കാം. ഓരോ റിസോഴ്സ് ടൈമിംഗുകളും വിശകലനം ചെയ്യുന്നത് (താഴെ കാണുക) കാലതാമസത്തിന് കാരണമാകുന്ന നിർദ്ദിഷ്ട റിസോഴ്സുകൾ കണ്ടെത്താൻ സഹായിക്കും.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ: സാധ്യമായ പരിഹാരങ്ങളിൽ അപ്രധാനമായ ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ മാറ്റിവയ്ക്കുക, സിഎസ്എസ് ഡെലിവറി ഒപ്റ്റിമൈസ് ചെയ്യുക, ഡോം ഘടകങ്ങളുടെ എണ്ണം കുറയ്ക്കുക എന്നിവ ഉൾപ്പെടുന്നു.

2. റിസോഴ്സ് ലോഡ് സമയം അളക്കുന്നു

റിസോഴ്സ് ടൈമിംഗ് എപിഐ പേജ് ലോഡ് ചെയ്യുന്ന ഓരോ റിസോഴ്സിനും വിശദമായ ടൈമിംഗ് വിവരങ്ങൾ നൽകുന്നു. ഇത് വേഗത കുറഞ്ഞ റിസോഴ്സുകൾ തിരിച്ചറിയാനും അവയുടെ ഡെലിവറി ഒപ്റ്റിമൈസ് ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം: റിസോഴ്സ് ടൈമിംഗ് വിവരങ്ങൾ നേടുന്നു

            const resourceEntries = performance.getEntriesByType('resource');

resourceEntries.forEach(entry => {
  console.log(`Resource: ${entry.name}`);
  console.log(`  Duration: ${entry.duration} milliseconds`);
  console.log(`  Fetch Start: ${entry.fetchStart}`);
  console.log(`  Response End: ${entry.responseEnd}`);
});

            

              
                Copy
              
            
          

ഫലങ്ങൾ വ്യാഖ്യാനിക്കുന്നു: ഓരോ റിസോഴ്സ് എൻട്രിയുടെയും duration പ്രോപ്പർട്ടി പരിശോധിക്കുന്നത് വേഗത കുറഞ്ഞ റിസോഴ്സുകൾ തിരിച്ചറിയാൻ സഹായിക്കും. ഉയർന്ന duration നെറ്റ്വർക്ക് ലേറ്റൻസി, വലിയ ഫയൽ വലുപ്പങ്ങൾ, അല്ലെങ്കിൽ കാര്യക്ഷമമല്ലാത്ത സെർവർ-സൈഡ് പ്രോസസ്സിംഗ് എന്നിവയെ സൂചിപ്പിക്കാം.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ: സാധ്യമായ പരിഹാരങ്ങളിൽ ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യുക, ജാവാസ്ക്രിപ്റ്റ്, സിഎസ്എസ് ഫയലുകൾ മിനിഫൈ ചെയ്യുക, ഒരു കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്ക് (സിഡിഎൻ) ഉപയോഗിക്കുക, സെർവർ-സൈഡ് കാഷിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുക എന്നിവ ഉൾപ്പെടുന്നു.

ആഗോള ഉദാഹരണം: പരിമിതമായ ബാൻഡ്‌വിഡ്ത്ത് ഉള്ള പ്രദേശങ്ങളിലെ (ഉദാഹരണത്തിന്, തെക്കുകിഴക്കൻ ഏഷ്യ, ആഫ്രിക്കയുടെ ഭാഗങ്ങൾ) ഉപയോക്താക്കൾക്ക് ഉയർന്ന റെസല്യൂഷനുള്ള ചിത്രങ്ങൾ നൽകുന്ന ഒരു വെബ്സൈറ്റിന് ആ ഉപയോക്താക്കൾക്ക് കാര്യമായ ലോഡിംഗ് കാലതാമസം അനുഭവപ്പെട്ടേക്കാം. ഉപയോക്താവിൻ്റെ കണക്ഷൻ വേഗതയ്ക്കും സ്ക്രീൻ വലുപ്പത്തിനും അനുസരിച്ച് പ്രതികരിക്കുന്ന ചിത്രങ്ങൾ നടപ്പിലാക്കുന്നത് പ്രകടനം വളരെയധികം മെച്ചപ്പെടുത്തും.

3. ഉപയോക്തൃ ഇടപെടലുകൾ അളക്കുന്നു

യൂസർ ടൈമിംഗ് എപിഐ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ലോജിക്കിന് പ്രത്യേകമായ കസ്റ്റം പ്രകടന മെട്രിക്സുകൾ നിർവചിക്കാനും അളക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. ഫോം സമർപ്പണങ്ങൾ, തിരയലുകൾ, നാവിഗേഷൻ മാറ്റങ്ങൾ തുടങ്ങിയ നിർണായക ഉപയോക്തൃ ഇടപെടലുകളുടെ പ്രകടനം ട്രാക്ക് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം: ഒരു ഫോം സമർപ്പിക്കാൻ എടുക്കുന്ന സമയം അളക്കുന്നു

            const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  performance.mark('formSubmitStart');
  // Simulate form submission delay
  setTimeout(() => {
    performance.mark('formSubmitEnd');
    performance.measure('formSubmitDuration', 'formSubmitStart', 'formSubmitEnd');

    const measure = performance.getEntriesByName('formSubmitDuration')[0];
    console.log(`Form submission duration: ${measure.duration} milliseconds`);
  }, 1000); //Simulate network request taking 1 second

  event.preventDefault();
});

            

              
                Copy
              
            
          

ഫലങ്ങൾ വ്യാഖ്യാനിക്കുന്നു: ഉയർന്ന formSubmitDuration, വേഗത കുറഞ്ഞ സെർവർ-സൈഡ് പ്രോസസ്സിംഗ്, നെറ്റ്വർക്ക് ലേറ്റൻസി, അല്ലെങ്കിൽ കാര്യക്ഷമമല്ലാത്ത ക്ലയിന്റ്-സൈഡ് വാലിഡേഷൻ എന്നിവയെ സൂചിപ്പിക്കാം.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ: സാധ്യമായ പരിഹാരങ്ങളിൽ സെർവർ-സൈഡ് കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക, നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾ കുറയ്ക്കുക, ക്ലയിന്റ്-സൈഡ് വാലിഡേഷൻ മെച്ചപ്പെടുത്തുക എന്നിവ ഉൾപ്പെടുന്നു.

4. ലോംഗ് ടാസ്ക്കുകൾ തിരിച്ചറിയുന്നു

ലോംഗ് ടാസ്ക്കുകൾ എന്നത് മെയിൻ ത്രെഡിനെ ദീർഘനേരം (സാധാരണയായി 50 മില്ലിസെക്കൻഡിൽ കൂടുതൽ) തടസ്സപ്പെടുത്തുന്ന ടാസ്ക്കുകളാണ്, ഇത് യുഐ ഫ്രീസ് ആവാനും മോശം ഉപയോക്തൃ അനുഭവത്തിനും കാരണമായേക്കാം. ലോംഗ് ടാസ്ക്ക്സ് എപിഐ ഈ ടാസ്ക്കുകൾ തിരിച്ചറിയാനും അവ തടയാൻ നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യാനും അനുവദിക്കുന്നു.

ഉദാഹരണം: ലോംഗ് ടാസ്ക്കുകൾ തിരിച്ചറിയുന്നു

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`Long task: ${entry.name}`);
    console.log(`  Duration: ${entry.duration} milliseconds`);
  });
});

observer.observe({ entryTypes: ['longtask'] });

// Simulate a long task
setTimeout(() => {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  console.log(`Long task complete: ${sum}`);
}, 0);

            

              
                Copy
              
            
          

ഫലങ്ങൾ വ്യാഖ്യാനിക്കുന്നു: ഒരു ലോംഗ് ടാസ്ക്കിന്റെ ദൈർഘ്യം, ബ്രൗസറിനെ യുഐ സുഗമമായി അപ്ഡേറ്റ് ചെയ്യുന്നതിൽ നിന്ന് തടയുന്ന കോഡിനെ എടുത്തുകാണിക്കുന്നു.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ: കോഡ് സ്പ്ലിറ്റിംഗ്, ഡിബൗൺസിംഗ്, ത്രോട്ടിലിംഗ്, വെബ് വർക്കറുകളിലേക്ക് ടാസ്ക്കുകൾ ഓഫ്‌ലോഡ് ചെയ്യുക എന്നിവ ലോംഗ് ടാസ്ക്ക് ദൈർഘ്യം കുറയ്ക്കുന്നതിനുള്ള തന്ത്രങ്ങളാണ്.

5. എലമെൻ്റ് ദൃശ്യപരത അളക്കുന്നു

എലമെൻ്റ് ടൈമിംഗ് എപിഐ, നിർദ്ദിഷ്ട എച്ച്ടിഎംഎൽ ഘടകങ്ങൾ എപ്പോഴാണ് ഉപയോക്താവിന് ദൃശ്യമാകുന്നതെന്ന് അളക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഹീറോ ഇമേജുകൾ അല്ലെങ്കിൽ പ്രധാനപ്പെട്ട ഉള്ളടക്ക വിഭാഗങ്ങൾ പോലുള്ള നിർണായക ഘടകങ്ങളുടെ ലോഡിംഗും റെൻഡറിംഗ് പ്രകടനവും ട്രാക്ക് ചെയ്യുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം: എലമെൻ്റ് ദൃശ്യപരത സമയം അളക്കുന്നു

            <img src="hero-image.jpg" elementtiming="hero-image" id="heroImage">

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'hero-image') {
      console.log(`Hero image render start: ${entry.renderStart} milliseconds`);
    }
  });
});

observer.observe({ type: 'element', buffered: true });

            

              
                Copy
              
            
          

ഫലങ്ങൾ വ്യാഖ്യാനിക്കുന്നു: വൈകിയുള്ള renderStart മൂല്യം, എലമെൻ്റ് ദൃശ്യമാകാൻ വളരെയധികം സമയമെടുക്കുന്നുവെന്ന് സൂചിപ്പിക്കുന്നു, ഇത് വേഗത കുറഞ്ഞ ലോഡിംഗ് അല്ലെങ്കിൽ റെൻഡറിംഗ് പ്രക്രിയകൾ മൂലമാകാം.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ: ഇമേജ് കംപ്രഷൻ ഒപ്റ്റിമൈസ് ചെയ്യുക, ലേസി ലോഡിംഗ് ഉപയോഗിക്കുക, നിർണായക റിസോഴ്സുകളുടെ ലോഡിംഗിന് മുൻഗണന നൽകുക.

6. ഇവൻ്റ് ലേറ്റൻസി അളക്കുന്നു

ഇവന്റ് ടൈമിംഗ് എപിഐ, ഇവന്റ് ലിസണറുകൾ എക്സിക്യൂട്ട് ചെയ്യാൻ എടുക്കുന്ന സമയം അളക്കുന്നു. ഉപയോക്തൃ ഇടപെടലുകളെ മന്ദഗതിയിലാക്കുന്ന ഇവന്റ് ഹാൻഡ്‌ലറുകളെ തിരിച്ചറിയുന്നതിന് ഇത് വിലപ്പെട്ടതാണ്.

ഉദാഹരണം: ക്ലിക്ക് ഇവൻ്റ് ലേറ്റൻസി അളക്കുന്നു

            <button id="myButton">Click Me</button>

const button = document.getElementById('myButton');

button.addEventListener('click', (event) => {
  performance.mark('clickStart');
  // Simulate some processing
  for (let i = 0; i < 1000000; i++) {
    // Perform some operation
  }
  performance.mark('clickEnd');
  performance.measure('clickDuration', 'clickStart', 'clickEnd');

  const measure = performance.getEntriesByName('clickDuration')[0];
  console.log(`Click event duration: ${measure.duration} milliseconds`);
});

            

              
                Copy
              
            
          

ഫലങ്ങൾ വ്യാഖ്യാനിക്കുന്നു: ദൈർഘ്യമേറിയ clickDuration, ഇവന്റ് ഹാൻഡ്‌ലർ എക്സിക്യൂട്ട് ചെയ്യാൻ വളരെയധികം സമയമെടുക്കുന്നുവെന്ന് സൂചിപ്പിക്കുന്നു, ഇത് യുഐ പ്രതികരണത്തിൽ കാലതാമസത്തിന് കാരണമായേക്കാം.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ: ഇവന്റ് ഹാൻഡ്‌ലർ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക, ഇവന്റ് ലിസണറുകൾ ഡിബൗൺസ് ചെയ്യുകയോ ത്രോട്ടിൽ ചെയ്യുകയോ ചെയ്യുക, കനത്ത പ്രോസസ്സിംഗ് വെബ് വർക്കറുകളിലേക്ക് ഓഫ്‌ലോഡ് ചെയ്യുക.

പെർഫോമൻസ് എപിഐ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

• കൃത്യമായ സമയ അളവുകൾക്കായി performance.now() ഉപയോഗിക്കുക. ഇത് ഉയർന്ന കൃത്യത നൽകുന്നു, കൂടാതെ മോണോടോണിക് ആയതുകൊണ്ട് കോഡ് എക്സിക്യൂഷൻ സമയം അളക്കാൻ അനുയോജ്യമാണ്.
• പ്രകടന ഇവന്റുകൾ വിശകലനം ചെയ്യാൻ പെർഫോമൻസ് ടൈംലൈൻ പ്രയോജനപ്പെടുത്തുക. ഒരു പേജിന്റെ പ്രവർത്തന സമയത്ത് സംഭവിക്കുന്ന പ്രകടനവുമായി ബന്ധപ്പെട്ട ഇവന്റുകളുടെ സമഗ്രമായ ഒരു രേഖ പെർഫോമൻസ് ടൈംലൈൻ നൽകുന്നു.
• കസ്റ്റം പ്രകടന മെട്രിക്സുകൾ നിർവചിക്കാൻ യൂസർ ടൈമിംഗ് എപിഐ ഉപയോഗിക്കുക. നിർണായക ഉപയോക്തൃ ഇടപെടലുകളുടെയും ആപ്ലിക്കേഷന്-പ്രത്യേകമായ ലോജിക്കിന്റെയും പ്രകടനം ട്രാക്ക് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
• യഥാർത്ഥ സാഹചര്യങ്ങളിൽ പ്രകടനം നിരീക്ഷിക്കുക. യഥാർത്ഥ ഉപയോക്താക്കളിൽ നിന്ന് പ്രകടന ഡാറ്റ ശേഖരിക്കാൻ ഗൂഗിൾ അനലിറ്റിക്സ്, ന്യൂ റെലിക്, അല്ലെങ്കിൽ സെൻട്രി പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനത്തിന്റെ കൂടുതൽ കൃത്യമായ ചിത്രം നൽകും.
• പെർഫോമൻസ് ബജറ്റുകൾ സജ്ജമാക്കി കാലക്രമേണ പുരോഗതി ട്രാക്ക് ചെയ്യുക. നിങ്ങളുടെ ആപ്ലിക്കേഷനായി പ്രകടന ലക്ഷ്യങ്ങൾ നിർവചിക്കുകയും കാലക്രമേണ നിങ്ങളുടെ പുരോഗതി ട്രാക്ക് ചെയ്യുകയും ചെയ്യുക. പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാനും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഉപയോക്താക്കളുടെ പ്രതീക്ഷകൾ നിറവേറ്റുന്നുവെന്ന് ഉറപ്പാക്കാനും ഇത് നിങ്ങളെ സഹായിക്കും.
• പെർഫോമൻസ് എപിഐയെ മറ്റ് ഡീബഗ്ഗിംഗ് ടൂളുകളുമായി സംയോജിപ്പിക്കുക. ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രൊഫൈൽ ചെയ്യുന്നതിനും ഡീബഗ്ഗ് ചെയ്യുന്നതിനും ശക്തമായ കഴിവുകൾ വാഗ്ദാനം ചെയ്യുന്നു. ഈ ടൂളുകളെ പെർഫോമൻസ് എപിഐയുമായി സംയോജിപ്പിക്കുന്നത് പ്രകടനത്തിലെ തടസ്സങ്ങളെക്കുറിച്ച് കൂടുതൽ ആഴത്തിലുള്ള ഉൾക്കാഴ്ച നൽകും.

പെർഫോമൻസ് നിരീക്ഷണത്തിനുള്ള ടൂളുകളും ലൈബ്രറികളും

പെർഫോമൻസ് എപിഐ അസംസ്കൃത ഡാറ്റ നൽകുമ്പോൾ തന്നെ, ഈ ഡാറ്റ കൂടുതൽ ഫലപ്രദമായി വിശകലനം ചെയ്യാനും ദൃശ്യവൽക്കരിക്കാനും നിങ്ങളെ സഹായിക്കുന്ന നിരവധി ടൂളുകളും ലൈബ്രറികളുമുണ്ട്:

• ഗൂഗിൾ ലൈറ്റ്ഹൗസ്: വെബ്സൈറ്റ് പ്രകടനം, പ്രവേശനക്ഷമത, എസ്ഇഒ എന്നിവ ഓഡിറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു ഓട്ടോമേറ്റഡ് ടൂൾ. ഇത് മെട്രിക്സ് ശേഖരിക്കാൻ പെർഫോമൻസ് എപിഐ ഉപയോഗിക്കുകയും മെച്ചപ്പെടുത്തുന്നതിനുള്ള പ്രായോഗിക നിർദ്ദേശങ്ങൾ നൽകുകയും ചെയ്യുന്നു.
• വെബ്പേജ്ടെസ്റ്റ്: വിവിധ സ്ഥലങ്ങളിൽ നിന്നും ബ്രൗസറുകളിൽ നിന്നും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പരിശോധിക്കാൻ അനുവദിക്കുന്ന ഒരു സൗജന്യ വെബ്സൈറ്റ് സ്പീഡ് ടെസ്റ്റിംഗ് ടൂൾ.
• ന്യൂ റെലിക് ബ്രൗസർ: പേജ് ലോഡ് സമയം, ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ, ഉപയോക്തൃ അനുഭവം എന്നിവയുൾപ്പെടെ വെബ്സൈറ്റ് പ്രകടനത്തെക്കുറിച്ചുള്ള തത്സമയ വിവരങ്ങൾ നൽകുന്ന ഒരു സമഗ്രമായ പ്രകടന നിരീക്ഷണ ടൂൾ.
• സെൻട്രി: നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡിലെ പ്രശ്നങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും സഹായിക്കുന്ന ഒരു പിശക് ട്രാക്കിംഗ്, പ്രകടന നിരീക്ഷണ പ്ലാറ്റ്ഫോം.
• പെർഫ്യൂം.ജെഎസ്: പ്രകടന മെട്രിക്സ് ശേഖരിക്കുന്നതിനും റിപ്പോർട്ട് ചെയ്യുന്നതിനും ലളിതമായ ഒരു എപിഐ നൽകുന്ന ഒരു ചെറിയ, ഓപ്പൺ സോഴ്സ് ലൈബ്രറി.

ഉപസംഹാരം

ഉയർന്ന പ്രകടനമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ ആഗ്രഹിക്കുന്ന ഏതൊരു വെബ് ഡെവലപ്പർക്കും ഒഴിവാക്കാനാവാത്ത ഒരു ഉപകരണമാണ് ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസ് എപിഐ. പെർഫോമൻസ് എപിഐയുടെ കഴിവുകൾ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ റൺടൈം സ്വഭാവത്തെക്കുറിച്ച് ആഴത്തിൽ മനസ്സിലാക്കാനും, പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്താനും, സുഗമമായ ഉപയോക്തൃ അനുഭവത്തിനായി നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യാനും കഴിയും. ഈ പ്രകടന നിരീക്ഷണ രീതികൾ നടപ്പിലാക്കുകയും നിങ്ങളുടെ കോഡിൽ തുടർച്ചയായി മെച്ചപ്പെടുത്തലുകൾ വരുത്തുകയും ചെയ്യുന്നത് ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കളെ സന്തോഷിപ്പിക്കുന്ന വേഗതയേറിയതും പ്രതികരണശേഷിയുള്ളതുമായ വെബ്സൈറ്റുകൾക്കും വെബ് ആപ്പുകൾക്കും കാരണമാകും. എല്ലാവർക്കും ഒരുപോലെ മികച്ച ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നതിന്, നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ വൈവിധ്യമാർന്ന നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളും ഉപകരണ ശേഷികളും പരിഗണിക്കാൻ ഓർക്കുക.