JavaScript Performance

உங்கள் JavaScript குறியீட்டின் வேகத்தை எவ்வாறு அதிகரிப்பது

JavaScript செயல்திறன்

உங்கள் JavaScript குறியீட்டின் வேகத்தை எவ்வாறு அதிகரிப்பது.

வேக உதவிக்குறிப்பு:

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

சுழல்களில் செயல்பாட்டைக் குறைக்கவும்

சுழல்கள் பெரும்பாலும் நிரலாக்கத்தில் பயன்படுத்தப்படுகின்றன.

சுழலின் ஒவ்வொரு மறு செய்கையிலும் for அறிக்கை உட்பட, சுழலில் உள்ள ஒவ்வொரு அறிக்கையும் செயல்படுத்தப்படுகிறது.

சுழலுக்கு வெளியே வைக்கக்கூடிய அறிக்கைகள் அல்லது ஒதுக்கீடுகள் சுழலை வேகமாக இயக்கும்.

மோசமான குறியீடு:

for (let i = 0; i < arr.length; i++) {

சிறந்த குறியீடு:

let l = arr.length;
for (let i = 0; i < l; i++) {

மோசமான குறியீடு சுழல் ஒவ்வொரு முறையும் மறு செய்கை செய்யப்படும் போது ஒரு வரிசையின் length பண்புகளை அணுகுகிறது.

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

DOM அணுகலைக் குறைக்கவும்

மற்ற JavaScript அறிக்கைகளுடன் ஒப்பிடும்போது HTML DOM ஐ அணுகுவது மிகவும் மெதுவானது.

நீங்கள் ஒரு DOM உறுப்பை பல முறை அணுகுவீர்கள் என்று எதிர்பார்க்கிறீர்கள் என்றால், அதை ஒரு முறை அணுகவும், மற்றும் அதை உள்ளூர் மாறியாகப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

const obj = document.getElementById("demo");
obj.innerHTML = "Hello";

DOM அளவைக் குறைக்கவும்

HTML DOM இல் உள்ள உறுப்புகளின் எண்ணிக்கையை சிறியதாக வைத்திருங்கள்.

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

DOM ஐத் தேடும் ஒவ்வொரு முயற்சியும் (getElementsByTagName போன்றவை) சிறிய DOM இலிருந்து பயன் பெறும்.

தேவையற்ற மாறிகளைத் தவிர்க்கவும்

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

பெரும்பாலும் நீங்கள் இதுபோன்ற குறியீட்டை மாற்றலாம்:

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

இதனுடன்:

document.getElementById("demo").innerHTML = firstName + " " + lastName;

JavaScript ஏற்றுதலை தாமதப்படுத்தவும்

உங்கள் நிரல்களை பக்க உடலின் அடிப்பகுதியில் வைப்பது உலாவிக்கு முதலில் பக்கத்தை ஏற்ற அனுமதிக்கிறது.

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

உலாவிகள் இரண்டுக்கு மேற்பட்ட கூறுகளை இணையாக பதிவிறக்கக்கூடாது என்று HTTP விவரக்குறிப்பு வரையறுக்கிறது.

ஒரு மாற்று வழி நிரல் குறியில் defer="true" பயன்படுத்த வேண்டும். defer பண்பு பக்கம் பாகுபடுத்தப்பட்ட பிறகு நிரல் செயல்படுத்தப்பட வேண்டும் என்பதை குறிப்பிடுகிறது, ஆனால் அது வெளிப்புற நிரல்களுக்கு மட்டுமே வேலை செய்கிறது.

முடிந்தால், பக்கம் ஏற்றப்பட்ட பிறகு, குறியீட்டின் மூலம் உங்கள் நிரலை பக்கத்தில் சேர்க்கலாம்:

எடுத்துக்காட்டு

<script>
window.onload = function() {
  const element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

with பயன்படுத்துவதைத் தவிர்க்கவும்

with விசையைப் பயன்படுத்துவதைத் தவிர்க்கவும். இது வேகத்தில் எதிர்மறையான விளைவைக் கொண்டுள்ளது. இது JavaScript நோக்கங்களையும் குழப்புகிறது.

with விசை கண்டிப்பான பயன்முறையில் அனுமதிக்கப்படுவதில்லை.

JavaScript செயல்திறன் பயிற்சி

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

பின்வரும் எந்த வளைய குறியீடு சிறந்த செயல்திறனைக் கொண்டுள்ளது?

for (let i = 0; i < document.getElementsByClassName('item').length; i++) {}
✗ தவறு! இது ஒவ்வொரு மறு செய்கையிலும் DOM கேள்வியை இயக்குகிறது, இது மெதுவானது
const items = document.getElementsByClassName('item'); for (let i = 0; i < items.length; i++) {}
✓ சரி! இது DOM கேள்வியை ஒரு முறை மட்டும் இயக்கி, முடிவை மாறியில் சேமிக்கிறது
for (let i = 0; i < 1000000; i++) { console.log(i); }
✗ தவறு! இது ஒரு மில்லியன் முறை console.log() ஐ அழைக்கிறது, இது மிகவும் மெதுவானது
let i = 0; while(true) { if(i++ > 100) break; }
✗ தவறு! இது முடிவில்லா வளையத்தைத் தவிர்க்க பிரேக் அறிக்கையை நம்பியுள்ளது