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

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

செயல்திறன் கண்காணிப்பு API என்றால் என்ன?

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

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

முக்கிய கருத்துக்கள் மற்றும் சொற்களஞ்சியம்

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

• PerformanceEntry: இது ஒரு செயல்திறன் அளவீடு அல்லது நிகழ்வைக் குறிக்கும் ஒரு அடிப்படை இடைமுகம். இது name, entryType, startTime, மற்றும் duration போன்ற பொதுவான பண்புகளைக் கொண்டுள்ளது.
• PerformanceObserver: இது செயல்திறன் பதிவுகளுக்குப் பதிவுசெய்து, அவை குறித்த அறிவிப்புகளைப் பெறுவதற்குப் பொறுப்பான முக்கிய இடைமுகம்.
• entryTypes: இது கண்காணிப்பாளர் எந்த வகையான செயல்திறன் பதிவுகளைக் கண்காணிக்க வேண்டும் என்பதைக் குறிப்பிடும் சரங்களின் அணிவரிசை. பொதுவான நுழைவு வகைகளில் 'longtask', 'resource', 'layout-shift', 'paint', மற்றும் 'navigation' ஆகியவை அடங்கும்.
• buffered: இது ஒரு பூலியன் கொடி, இது கண்காணிப்பாளர் உருவாக்கப்படுவதற்கு முன்பு ஏற்பட்ட செயல்திறன் பதிவுகளுக்கான அறிவிப்புகளைப் பெற வேண்டுமா என்பதைக் குறிக்கிறது.
• observe(): செயல்திறன் பதிவுகளைக் கவனிக்கத் தொடங்கப் பயன்படுத்தப்படும் முறை இது. இது entryTypes மற்றும் buffered கொடியைக் குறிப்பிடும் ஒரு விருப்பங்கள் பொருளை எடுக்கும்.
• disconnect(): செயல்திறன் பதிவுகளைக் கவனிப்பதை நிறுத்தப் பயன்படுத்தப்படும் முறை இது.

ஒரு செயல்திறன் கண்காணிப்பை அமைத்தல்

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry);
    // நீண்ட பணிப் பதிவைச் செயலாக்கவும்
  });
});

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

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

குறியீட்டின் விளக்கம்:

• new PerformanceObserver((list) => { ... }): ஒரு கால்பேக் செயல்பாட்டுடன் ஒரு புதிய கண்காணிப்பாளர் நிகழ்வை உருவாக்குகிறது. கால்பேக் ஒரு `list` வாதத்தைப் பெறுகிறது.
• list.getEntries().forEach((entry) => { ... }): `list`-இல் இருந்து அனைத்து PerformanceEntry பொருட்களையும் பெற்று, அவற்றின் மீது சுழற்சி செய்கிறது.
• console.log('Long Task:', entry);: நீண்ட பணிப் பதிவை கன்சோலில் பதிவு செய்கிறது. இதை உங்கள் சொந்த செயலாக்க தர்க்கத்துடன் மாற்றுவீர்கள்.
• observer.observe({ entryTypes: ['longtask'] });: 'longtask' வகை செயல்திறன் பதிவுகளைக் கவனிக்கத் தொடங்குகிறது.

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

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

1. நீண்ட பணிகள் (Long Tasks)

நுழைவு வகை: 'longtask'

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

எடுத்துக்காட்டு பயன்பாட்டு வழக்குகள்:

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry.duration);
    // சாத்தியமான இடையூறுகளை அடையாளம் காண நீண்ட பணியின் கால அளவைப் பகுப்பாய்வு செய்யுங்கள்.
  });
});

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

2. வள நேரக்கணிப்பு (Resource Timing)

நுழைவு வகை: 'resource'

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

எடுத்துக்காட்டு பயன்பாட்டு வழக்குகள்:

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Resource:', entry.name, entry.duration);
    // வள ஏற்றுதல் நேரத்தைப் பகுப்பாய்வு செய்து, வள விநியோகத்தை மேம்படுத்துங்கள்.
  });
});

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

3. தளவமைப்பு மாற்றங்கள் (Layout Shifts)

நுழைவு வகை: 'layout-shift'

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

எடுத்துக்காட்டு பயன்பாட்டு வழக்குகள்:

• தளவமைப்பு மாற்றங்களை ஏற்படுத்தும், குறிப்பிடப்பட்ட பரிமாணங்கள் இல்லாத படங்களைக் கண்டறிதல்.
• தளவமைப்பு மாற்றங்களைக் குறைக்க, மாறும் வகையில் உட்செலுத்தப்பட்ட உள்ளடக்கத்தை ஏற்றுவதை மேம்படுத்துதல்.
• எழுத்துரு ஏற்றுதல் தளவமைப்பு மாற்றங்களை ஏற்படுத்துவதைத் தடுக்க எழுத்துரு காட்சி உத்திகளைப் பயன்படுத்துதல்.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Layout Shift:', entry.value);
    // தளவமைப்பு மாற்ற மதிப்பெண்ணைப் பகுப்பாய்வு செய்து, மாற்றங்களை ஏற்படுத்தும் கூறுகளை அடையாளம் காணுங்கள்.
  });
});

observer.observe({ entryTypes: ['layout-shift'] });

4. பெயிண்ட் நேரக்கணிப்பு (Paint Timing)

நுழைவு வகை: 'paint'

பெயிண்ட் நேரக்கணிப்பு API, முதல் பெயிண்ட் (FP) மற்றும் முதல் உள்ளடக்க பெயிண்ட் (FCP) ஆகியவற்றிற்கான அளவீடுகளை வழங்குகிறது, இவை பயனரின் உணரப்பட்ட ஏற்றுதல் செயல்திறனின் முக்கிய குறிகாட்டிகளாகும். பெயிண்ட் நேரக்கணிப்பைக் கண்காணிப்பது, உங்கள் பயன்பாட்டின் ரெண்டரிங்கை மேம்படுத்தி, வேகமான மற்றும் மிகவும் பார்வைக்கு ஈர்க்கும் அனுபவத்தை வழங்க உங்களை அனுமதிக்கிறது.

எடுத்துக்காட்டு பயன்பாட்டு வழக்குகள்:

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Paint:', entry.name, entry.startTime);
    // பெயிண்ட் நேரத்தைப் பகுப்பாய்வு செய்து, ரெண்டரிங் பைப்லைனை மேம்படுத்துங்கள்.
  });
});

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

5. வழிசெலுத்தல் நேரக்கணிப்பு (Navigation Timing)

நுழைவு வகை: 'navigation'

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

எடுத்துக்காட்டு பயன்பாட்டு வழக்குகள்:

• DNS தீர்வு நேரம், TCP இணைப்பு நேரம் மற்றும் TLS பேச்சுவார்த்தை நேரத்தைப் பகுப்பாய்வு செய்தல்.
• சேவையகப் பக்க செயலாக்க இடையூறுகளை அடையாளம் காணுதல்.
• முதல் பைட்டிற்கான நேரத்தைக் (TTFB) குறைக்க HTML உள்ளடக்கத்தின் விநியோகத்தை மேம்படுத்துதல்.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Navigation:', entry.duration);
    // வழிசெலுத்தல் நேரத்தைப் பகுப்பாய்வு செய்து, பக்க ஏற்றுதல் செயல்முறையை மேம்படுத்துங்கள்.
  });
});

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

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

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

1. மின்வணிக இணையதளம்: தயாரிப்புப் படங்களை ஏற்றுவதை மேம்படுத்துதல்

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

2. செய்தி இணையதளம்: விளம்பரம் ஏற்றுவதால் ஏற்படும் தளவமைப்பு மாற்றங்களைக் குறைத்தல்

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

3. சமூக ஊடகத் தளம்: ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளால் ஏற்படும் நீண்ட பணிகளைப் பகுப்பாய்வு செய்தல்

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

4. வலை அடிப்படையிலான விளையாட்டு: பிரேம் ரெண்டரிங் நேரங்களைக் கண்காணித்தல்

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

5. ஆன்லைன் கற்றல் தளம்: வழிசெலுத்தல் மற்றும் பக்க மாற்றங்களை மேம்படுத்துதல்

ஒரு ஆன்லைன் கற்றல் தளம், பக்க வழிசெலுத்தல் செயல்முறையின் வெவ்வேறு நிலைகளைப் பகுப்பாய்வு செய்யவும், ஒட்டுமொத்த பக்க ஏற்றுதல் அனுபவத்தை பாதிக்கும் இடையூறுகளை அடையாளம் காணவும் வழிசெலுத்தல் நேரக்கணிப்பு API-ஐப் பயன்படுத்தலாம். சேவையகப் பக்க செயலாக்கத்தை மேம்படுத்துதல், HTML உள்ளடக்கத்தின் விநியோகத்தை மேம்படுத்துதல் மற்றும் உலாவி கேச்சிங்கைப் பயன்படுத்துதல் ஆகியவற்றின் மூலம், அந்தத் தளம் வேகமான மற்றும் மேலும் தடையற்ற கற்றல் அனுபவத்தை வழங்க முடியும். உதாரணமாக, கனடாவை அடிப்படையாகக் கொண்ட ஒரு கல்வித் தளம், உலகெங்கிலும் உள்ள மாணவர்களுக்கு சேவை செய்கிறது, περιορισμένη இணைய உள்கட்டமைப்பு கொண்ட நாடுகளில் உள்ள மாணவர்கள் பாடங்களுக்கு இடையில் செல்லும்போது ஏற்றுக்கொள்ளக்கூடிய ஏற்றுதல் நேரங்களை அனுபவிப்பதை உறுதிசெய்ய வழிசெலுத்தல் நேரங்களைப் பகுப்பாய்வு செய்யலாம். குறிப்பிட்ட பிராந்தியங்களில் மெதுவான சேவையக பதில்களை அடையாளம் காண்பது, அவர்களின் உள்ளடக்க விநியோக நெட்வொர்க் (CDN) உள்ளமைவை மேம்படுத்த அனுமதிக்கிறது.

செயல்திறன் கண்காணிப்பு API-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

செயல்திறன் கண்காணிப்பு API-ஐ திறம்படப் பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

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

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

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

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

இங்கே ஒரு எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டு:

1. ஒரு வலைப் பணியாளர் ஸ்கிரிப்டை உருவாக்கவும் (உதாரணமாக, `performance-worker.js`):

// performance-worker.js
self.addEventListener('message', (event) => {
  const performanceData = event.data;
  // உங்கள் சிக்கலான பகுப்பாய்வை இங்கே செய்யவும்
  const processedData = processPerformanceData(performanceData);  // உங்கள் உண்மையான செயல்பாட்டுடன் மாற்றவும்
  self.postMessage(processedData);
});

function processPerformanceData(data) {
  // உங்கள் சிக்கலான செயலாக்க தர்க்கம் இங்கே
  return data; // செயலாக்கப்பட்ட தரவுடன் மாற்றவும்
}

2. உங்கள் முக்கிய ஸ்கிரிப்டில்:

const worker = new Worker('performance-worker.js');

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  // செயலாக்கத்திற்காக பதிவுகளைப் பணியாளருக்கு அனுப்பவும்
  worker.postMessage(entries);
});

worker.addEventListener('message', (event) => {
  const processedData = event.data;
  // பணியாளரிடமிருந்து செயலாக்கப்பட்ட தரவைக் கையாளவும்
  console.log('Processed Data from Worker:', processedData);
});

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

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

2. செயல்திறன் தரவை பயனர் செயல்களுடன் தொடர்புபடுத்துதல்

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

// எடுத்துக்காட்டு: ஒரு பொத்தான் கிளிக்கைக் கண்காணித்து அதை நீண்ட பணிகளுடன் தொடர்புபடுத்துதல்

document.getElementById('myButton').addEventListener('click', () => {
  const clickTimestamp = Date.now();

  // உங்கள் பொத்தான் கிளிக் தர்க்கம் இங்கே
  performSomeAction();

  // கிளிக்கிற்குப் பிறகு நீண்ட பணிகளைக் கவனிக்கவும்
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.startTime >= clickTimestamp) {
        console.log('Long Task after button click:', entry);
        // நீண்ட பணித் தரவை, clickTimestamp உடன், உங்கள் பகுப்பாய்வு சேவைக்கு அனுப்பவும்
      }
    });
  });

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

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

3. செயல்திறன் குறிகள் மற்றும் அளவீடுகளைப் பயன்படுத்துதல்

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

// எடுத்துக்காட்டு: ஒரு தனிப்பயன் கூறுகளின் செயல்திறனை அளவிடுதல்

performance.mark('componentStart');

// உங்கள் கூறு ரெண்டரிங் தர்க்கம் இங்கே
renderMyComponent();

performance.mark('componentEnd');

performance.measure('componentRenderTime', 'componentStart', 'componentEnd');

const measure = performance.getEntriesByName('componentRenderTime')[0];
console.log('Component Render Time:', measure.duration);

'measure' நுழைவு வகையைக் கவனிப்பதன் மூலம் நீங்கள் இந்த தனிப்பயன் அளவீடுகளை செயல்திறன் கண்காணிப்பு API-ஐப் பயன்படுத்திக் கவனிக்கலாம்.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === 'measure') {
      console.log('Custom Measure:', entry.name, entry.duration);
    }
  });
});

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

செயல்திறன் கண்காணிப்பு API-க்கான மாற்று வழிகள்

செயல்திறன் கண்காணிப்பு API ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், செயல்திறன் கண்காணிப்பிற்கான ஒரே விருப்பம் இதுவல்ல. இங்கே சில மாற்று வழிகள் உள்ளன:

• கூகிள் லைட்ஹவுஸ்: விரிவான செயல்திறன் அறிக்கைகள் மற்றும் மேம்பாட்டிற்கான பரிந்துரைகளை வழங்கும் ஒரு முழுமையான தணிக்கைக் கருவி.
• WebPageTest: பல்வேறு இடங்கள் மற்றும் உலாவிகளில் இருந்து இணையதள செயல்திறனைச் சோதிப்பதற்கான ஒரு சக்திவாய்ந்த ஆன்லைன் கருவி.
• உலாவி டெவலப்பர் கருவிகள்: Chrome DevTools, Firefox Developer Tools மற்றும் பிற உலாவி டெவலப்பர் கருவிகள், விவரக்குறிப்பு, காலவரிசைப் பதிவு மற்றும் நெட்வொர்க் பகுப்பாய்வு உள்ளிட்ட ஏராளமான செயல்திறன் பகுப்பாய்வு அம்சங்களை வழங்குகின்றன.
• உண்மையான பயனர் கண்காணிப்பு (RUM) கருவிகள்: RUM கருவிகள் உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைச் சேகரித்து, உண்மையான பயனர் அனுபவம் குறித்த மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகின்றன. எடுத்துக்காட்டுகளில் New Relic, Datadog மற்றும் Sentry ஆகியவை அடங்கும்.
• செயற்கை கண்காணிப்புக் கருவிகள்: செயற்கை கண்காணிப்புக் கருவிகள், உண்மையான பயனர்களைப் பாதிக்கும் முன் செயல்திறன் சிக்கல்களை முன்கூட்டியே அடையாளம் காண பயனர் ஊடாடல்களை உருவகப்படுத்துகின்றன.

முடிவுரை

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

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

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