ஜாவாஸ்கிரிப்ட் செயல்திறன் விவரக்குறிப்பு: Chrome DevTools ஒருங்கிணைப்பில் தேர்ச்சி பெறுதல்

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

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

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

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

மோசமான செயல்திறனின் தாக்கம்

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

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

Chrome DevTools என்பது Chrome உலாவியில் நேரடியாக கட்டமைக்கப்பட்ட சக்திவாய்ந்த வலை மேம்பாட்டுக் கருவிகளின் தொகுப்பாகும். அதன் செயல்திறன் பேனல் ஜாவாஸ்கிரிப்ட் செயல்திறனைப் பகுப்பாய்வு செய்வதற்கான விரிவான அம்சங்களை வழங்குகிறது. செயல்திறன் பேனலின் முக்கிய கூறுகளை ஆராய்வோம்:

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

Chrome DevTools செயல்திறன் விவரக்குறிப்புடன் தொடங்குதல்

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

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

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

செயல்திறன் காலக்கோடு உங்கள் பயன்பாட்டின் செயல்பாடு பற்றிய ஏராளமான தகவல்களை வழங்குகிறது. காலக்கோட்டின் முக்கிய கூறுகளை ஆராய்வோம்:

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

ஃபிளேம் விளக்கப்படத்தைப் புரிந்துகொள்ளுதல்

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

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

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

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

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

நடைமுறை உதாரணம்: மெதுவாக ஏற்றும் வலைத்தளத்தை மேம்படுத்துதல்

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

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

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

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

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

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

மேலே விவாதிக்கப்பட்ட அடிப்படை விவரக்குறிப்பு நுட்பங்களுடன் கூடுதலாக, Chrome DevTools ஆழமான செயல்திறன் பகுப்பாய்விற்கான பல மேம்பட்ட அம்சங்களை வழங்குகிறது:

• நினைவக விவரக்குறிப்பு: நினைவகக் கசிவுகளைக் கண்டறியவும், அதிகப்படியான நினைவகப் பயன்பாட்டு பகுதிகளை அடையாளம் காணவும் நினைவகப் பேனலைப் பயன்படுத்தவும்.
• ரெண்டரிங் புள்ளிவிவரங்கள்: ரெண்டரிங் பைப்லைனில் உள்ள தடைகளை அடையாளம் காண ரெண்டரிங் புள்ளிவிவரங்களைப் பகுப்பாய்வு செய்யவும்.
• நெட்வொர்க் த்ராட்லிங்: பல்வேறு சூழ்நிலைகளின் கீழ் உங்கள் பயன்பாட்டின் செயல்திறனைச் சோதிக்க வெவ்வேறு நெட்வொர்க் நிலைமைகளை உருவகப்படுத்தவும். சில வளரும் நாடுகளில் 3G அல்லது 2G இணைப்புகள் இன்னும் प्रचलितாக இருக்கும் மெதுவான இணைய அணுகல் உள்ள பிராந்தியங்களில் உள்ள பயனர்களை இலக்காகக் கொள்ளும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.
• CPU த்ராட்லிங்: குறைந்த சக்தி கொண்ட சாதனங்களில் உங்கள் பயன்பாட்டின் செயல்திறனைச் சோதிக்க வெவ்வேறு CPU வேகங்களை உருவகப்படுத்தவும்.
• நீண்ட பணிகள்: முதன்மையான த்ரெட்டைத் தடுக்கும் நீண்ட பணிகளை அடையாளம் காணவும்.
• பயனர் நேர API: குறிப்பிட்ட குறியீட்டுப் பிரிவுகளின் செயல்திறனை அளவிட பயனர் நேர API-ஐப் பயன்படுத்தவும்.

நினைவக விவரக்குறிப்பு ஆழமான பார்வை

Chrome DevTools இல் உள்ள நினைவகப் பேனல் நினைவகப் பயன்பாட்டைப் பகுப்பாய்வு செய்வதற்கான சக்திவாய்ந்த கருவிகளை வழங்குகிறது. நீங்கள் இதைப் பயன்படுத்தலாம்:

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

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

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

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

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

உலகளாவிய CDN உத்தி

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

முடிவுரை

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

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

மேலும் வளங்கள்

• Chrome DevTools ஆவணங்கள்
• Web.dev அளவீடு
• முன்-முனை செயல்திறன் சரிபார்ப்புப் பட்டியல் 2018