பிரவுசர் ரெண்டரிங் பைப்லைனின் ஒவ்வொரு கட்டத்தையும் ஜாவாஸ்கிரிப்ட் எவ்வாறு பாதிக்கிறது என்பதை ஆராய்ந்து, மேம்பட்ட வலை செயல்திறன் மற்றும் பயனர் அனுபவத்திற்காக உங்கள் குறியீட்டை மேம்படுத்தும் உத்திகளைக் கற்றுக்கொள்ளுங்கள்.
பிரவுசர் ரெண்டரிங் பைப்லைன்: ஜாவாஸ்கிரிப்ட் வலை செயல்திறனை எவ்வாறு பாதிக்கிறது
பிரவுசர் ரெண்டரிங் பைப்லைன் என்பது ஒரு வலை உலாவி HTML, CSS, மற்றும் ஜாவாஸ்கிரிப்ட் குறியீட்டை பயனரின் திரையில் ஒரு காட்சிப் பிரதிநிதிப்பாக மாற்றுவதற்கு எடுக்கும் தொடர்ச்சியான படிகள் ஆகும். உயர் செயல்திறன் கொண்ட வலைப் பயன்பாடுகளை உருவாக்க விரும்பும் எந்தவொரு வலை உருவாக்குநருக்கும் இந்தப் பைப்லைனைப் புரிந்துகொள்வது மிகவும் முக்கியம். ஜாவாஸ்கிரிப்ட், ஒரு சக்திவாய்ந்த மற்றும் மாறும் மொழியாக இருப்பதால், இந்தப் பைப்லைனின் ஒவ்வொரு கட்டத்திலும் குறிப்பிடத்தக்க தாக்கத்தை ஏற்படுத்துகிறது. இந்தக் கட்டுரை பிரவுசர் ரெண்டரிங் பைப்லைனை ஆராய்ந்து, ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் செயல்திறனை எவ்வாறு பாதிக்கிறது என்பதையும், மேம்படுத்துவதற்கான செயல்திறன் மிக்க உத்திகளையும் வழங்கும்.
பிரவுசர் ரெண்டரிங் பைப்லைனைப் புரிந்துகொள்ளுதல்
ரெண்டரிங் பைப்லைனைப் பரவலாகப் பின்வரும் நிலைகளாகப் பிரிக்கலாம்:- HTML ஐப் பாகுபடுத்துதல் (Parsing): உலாவி HTML மார்க்கப்பைப் பாகுபடுத்தி, HTML கூறுகளையும் அவற்றின் உறவுகளையும் பிரதிநிதித்துவப்படுத்தும் ஒரு மரம் போன்ற அமைப்பான ஆவணப் பொருள் மாதிரியை (DOM) உருவாக்குகிறது.
- CSS ஐப் பாகுபடுத்துதல் (Parsing): உலாவி CSS ஸ்டைல்ஷீட்களை (வெளிப்புற மற்றும் இன்லைன் இரண்டும்) பாகுபடுத்தி, CSS விதிகள் மற்றும் அவற்றின் பண்புகளைப் பிரதிநிதித்துவப்படுத்தும் மற்றொரு மரம் போன்ற அமைப்பான CSS பொருள் மாதிரியை (CSSOM) உருவாக்குகிறது.
- இணைப்பு (Attachment): உலாவி DOM மற்றும் CSSOM ஐ ஒன்றிணைத்து ரெண்டர் மரத்தை (Render Tree) உருவாக்குகிறது. ரெண்டர் மரம் உள்ளடக்கத்தைக் காண்பிக்கத் தேவையான முனைகளை மட்டுமே உள்ளடக்கியது, <head> போன்ற கூறுகள் மற்றும் `display: none` உள்ள கூறுகளைத் தவிர்த்துவிடும். ஒவ்வொரு தெரியும் DOM முனைக்கும் அதனுடன் தொடர்புடைய CSSOM விதிகள் இணைக்கப்பட்டுள்ளன.
- லேஅவுட் (Reflow): உலாவி ரெண்டர் மரத்தில் உள்ள ஒவ்வொரு உறுப்பின் நிலை மற்றும் அளவைக் கணக்கிடுகிறது. இந்த செயல்முறை "ரீஃப்ளோ" என்றும் அழைக்கப்படுகிறது.
- பெயிண்டிங் (Repaint): உலாவி ரெண்டர் மரத்தில் உள்ள ஒவ்வொரு உறுப்பையும் திரையில் வரைகிறது, கணக்கிடப்பட்ட லேஅவுட் தகவல் மற்றும் பயன்படுத்தப்பட்ட ஸ்டைல்களைப் பயன்படுத்தி. இந்த செயல்முறை "ரீபெயின்ட்" என்றும் அழைக்கப்படுகிறது.
- கம்போசிட்டிங் (Compositing): உலாவி வெவ்வேறு அடுக்குகளை ஒன்றிணைத்து திரையில் காண்பிக்கப்படும் இறுதிப் படத்தை உருவாக்குகிறது. நவீன உலாவிகள் பெரும்பாலும் கம்போசிட்டிங்கிற்காக வன்பொருள் முடுக்கத்தைப் பயன்படுத்துகின்றன, இது செயல்திறனை மேம்படுத்துகிறது.
ரெண்டரிங் பைப்லைனில் ஜாவாஸ்கிரிப்டின் தாக்கம்
ஜாவாஸ்கிரிப்ட் பல்வேறு நிலைகளில் ரெண்டரிங் பைப்லைனை கணிசமாக பாதிக்கலாம். மோசமாக எழுதப்பட்ட அல்லது திறமையற்ற ஜாவாஸ்கிரிப்ட் குறியீடு செயல்திறன் சிக்கல்களை அறிமுகப்படுத்தலாம், இது மெதுவான பக்க ஏற்றுதல் நேரங்கள், தடுமாறும் அனிமேஷன்கள் மற்றும் ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.1. பாகுபடுத்தியைத் தடுப்பது (Blocking the Parser)
உலாவி HTML இல் ஒரு <script> குறிச்சொல்லை எதிர்கொள்ளும்போது, அது பொதுவாக ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பதிவிறக்கம் செய்து செயல்படுத்த HTML ஆவணத்தைப் பாகுபடுத்துவதை இடைநிறுத்துகிறது. ஏனென்றால், ஜாவாஸ்கிரிப்ட் DOM ஐ மாற்றியமைக்க முடியும், மேலும் உலாவி தொடர்வதற்கு முன் DOM புதுப்பித்த நிலையில் இருப்பதை உறுதி செய்ய வேண்டும். இந்தத் தடுக்கும் நடத்தை பக்கத்தின் ஆரம்ப ரெண்டரிங்கை கணிசமாக தாமதப்படுத்தலாம்.
உதாரணம்:
உங்கள் HTML ஆவணத்தின் <head> பகுதியில் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் கோப்பு இருக்கும் ஒரு சூழ்நிலையைக் கவனியுங்கள்:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="large-script.js"></script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Some content here.</p>
</body>
</html>
இந்த வழக்கில், உலாவி HTML ஐப் பாகுபடுத்துவதை நிறுத்திவிட்டு, `large-script.js` பதிவிறக்கம் செய்யப்பட்டு செயல்படுத்தப்படும் வரை காத்திருக்கும், அதற்குப் பிறகே <h1> மற்றும் <p> கூறுகளை ரெண்டர் செய்யும். இது ஆரம்பப் பக்க ஏற்றத்தில் குறிப்பிடத்தக்க தாமதத்திற்கு வழிவகுக்கும்.
பாகுபடுத்தித் தடுப்பைக் குறைப்பதற்கான தீர்வுகள்:
- `async` அல்லது `defer` பண்புக்கூறுகளைப் பயன்படுத்தவும்: `async` பண்புக்கூறு ஸ்கிரிப்டைப் பாகுபடுத்தியைத் தடுக்காமல் பதிவிறக்கம் செய்ய அனுமதிக்கிறது, மேலும் ஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டவுடன் செயல்படுத்தப்படும். `defer` பண்புக்கூறும் ஸ்கிரிப்டைப் பாகுபடுத்தியைத் தடுக்காமல் பதிவிறக்கம் செய்ய அனுமதிக்கிறது, ஆனால் HTML பாகுபடுத்துதல் முடிந்த பிறகு, அவை HTML இல் தோன்றும் வரிசையில் ஸ்கிரிப்ட் செயல்படுத்தப்படும்.
- <body> குறிச்சொல்லின் முடிவில் ஸ்கிரிப்ட்களை வைக்கவும்: <body> குறிச்சொல்லின் முடிவில் ஸ்கிரிப்ட்களை வைப்பதன் மூலம், உலாவி ஸ்கிரிப்ட்களை சந்திப்பதற்கு முன் HTML ஐப் பாகுபடுத்தி DOM ஐ உருவாக்க முடியும். இது பக்கத்தின் ஆரம்ப உள்ளடக்கத்தை விரைவாக ரெண்டர் செய்ய உலாவியை அனுமதிக்கிறது.
`async` ஐப் பயன்படுத்தும் உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="large-script.js" async></script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Some content here.</p>
</body>
</html>
இந்த வழக்கில், உலாவி `large-script.js` ஐ HTML பாகுபடுத்துதலைத் தடுக்காமல், ஒத்திசைவற்ற முறையில் பதிவிறக்கும். ஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டவுடன் செயல்படுத்தப்படும், முழு HTML ஆவணம் பாகுபடுத்தப்படுவதற்கு முன்பே கூட சாத்தியமாகும்.
`defer` ஐப் பயன்படுத்தும் உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="large-script.js" defer></script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Some content here.</p>
</body>
</html>
இந்த வழக்கில், உலாவி `large-script.js` ஐ HTML பாகுபடுத்துதலைத் தடுக்காமல், ஒத்திசைவற்ற முறையில் பதிவிறக்கும். முழு HTML ஆவணம் பாகுபடுத்தப்பட்ட பிறகு, அது HTML இல் தோன்றும் வரிசையில் ஸ்கிரிப்ட் செயல்படுத்தப்படும்.
2. DOM கையாளுதல்
ஜாவாஸ்கிரிப்ட் பெரும்பாலும் DOM ஐக் கையாள, கூறுகள் மற்றும் அவற்றின் பண்புகளைச் சேர்க்க, அகற்ற அல்லது மாற்றியமைக்கப் பயன்படுத்தப்படுகிறது. அடிக்கடி அல்லது சிக்கலான DOM கையாளுதல்கள் ரீஃப்ளோக்கள் மற்றும் ரீபெயின்ட்களைத் தூண்டலாம், அவை செயல்திறனை கணிசமாக பாதிக்கும் செலவுமிக்க செயல்பாடுகள் ஆகும்.
உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const myList = document.getElementById('myList');
for (let i = 3; i <= 10; i++) {
const listItem = document.createElement('li');
listItem.textContent = `Item ${i}`;
myList.appendChild(listItem);
}
</script>
</body>
</html>
இந்த எடுத்துக்காட்டில், ஸ்கிரிப்ட் வரிசைப்படுத்தப்படாத பட்டியலுக்கு எட்டு புதிய பட்டியல் உருப்படிகளைச் சேர்க்கிறது. ஒவ்வொரு `appendChild` செயல்பாடும் ஒரு ரீஃப்ளோ மற்றும் ரீபெயின்ட்டைத் தூண்டுகிறது, ஏனெனில் உலாவி லேஅவுட்டைக் கணக்கிட்டு பட்டியலை மீண்டும் வரைய வேண்டும்.
DOM கையாளுதலை மேம்படுத்துவதற்கான தீர்வுகள்:
- DOM கையாளுதல்களைக் குறைத்தல்: DOM கையாளுதல்களின் எண்ணிக்கையை முடிந்தவரை குறைக்கவும். DOM ஐ பலமுறை மாற்றுவதற்குப் பதிலாக, மாற்றங்களை ஒன்றாகத் தொகுக்க முயற்சிக்கவும்.
- DocumentFragment ஐப் பயன்படுத்தவும்: ஒரு DocumentFragment ஐ உருவாக்கி, அனைத்து DOM கையாளுதல்களையும் அந்த ஃபிராக்மெண்டில் செய்து, பின்னர் அந்த ஃபிராக்மெண்ட்டை உண்மையான DOM இல் ஒருமுறை சேர்க்கவும். இது ரீஃப்ளோக்கள் மற்றும் ரீபெயின்ட்களின் எண்ணிக்கையைக் குறைக்கிறது.
- DOM கூறுகளை கேச் செய்யவும்: ஒரே கூறுகளுக்கு மீண்டும் மீண்டும் DOM ஐ வினவுவதைத் தவிர்க்கவும். கூறுகளை மாறிகளில் சேமித்து அவற்றை மீண்டும் பயன்படுத்தவும்.
- திறமையான தேர்வுகளைப் பயன்படுத்தவும்: கூறுகளை இலக்காகக் கொள்ள குறிப்பிட்ட மற்றும் திறமையான தேர்வுகளை (எ.கா., ஐடிகள்) பயன்படுத்தவும். சிக்கலான அல்லது திறமையற்ற தேர்வுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும் (எ.கா., தேவையில்லாமல் DOM மரத்தைக் கடப்பது).
- தேவையற்ற ரீஃப்ளோக்கள் மற்றும் ரீபெயின்ட்களைத் தவிர்க்கவும்: `width`, `height`, `margin`, மற்றும் `padding` போன்ற சில CSS பண்புகள் மாற்றப்படும்போது ரீஃப்ளோக்கள் மற்றும் ரீபெயின்ட்களைத் தூண்டலாம். இந்தப் பண்புகளை அடிக்கடி மாற்றுவதைத் தவிர்க்க முயற்சிக்கவும்.
DocumentFragment ஐப் பயன்படுத்தும் உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const myList = document.getElementById('myList');
const fragment = document.createDocumentFragment();
for (let i = 3; i <= 10; i++) {
const listItem = document.createElement('li');
listItem.textContent = `Item ${i}`;
fragment.appendChild(listItem);
}
myList.appendChild(fragment);
</script>
</body>
</html>
இந்த எடுத்துக்காட்டில், அனைத்து புதிய பட்டியல் உருப்படிகளும் முதலில் ஒரு DocumentFragment இல் சேர்க்கப்பட்டு, பின்னர் அந்த ஃபிராக்மெண்ட் வரிசைப்படுத்தப்படாத பட்டியலில் சேர்க்கப்படுகிறது. இது ரீஃப்ளோக்கள் மற்றும் ரீபெயின்ட்களின் எண்ணிக்கையை ஒன்றுக்கு குறைக்கிறது.
3. செலவுமிக்க செயல்பாடுகள் (Expensive Operations)
சில ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் இயல்பாகவே செலவுமிக்கவை மற்றும் செயல்திறனை பாதிக்கலாம். இவற்றில் அடங்குபவை:
- சிக்கலான கணக்கீடுகள்: ஜாவாஸ்கிரிப்டில் சிக்கலான கணிதக் கணக்கீடுகள் அல்லது தரவு செயலாக்கத்தைச் செய்வது குறிப்பிடத்தக்க CPU வளங்களைப் பயன்படுத்தக்கூடும்.
- பெரிய தரவு கட்டமைப்புகள்: பெரிய அணிகள் அல்லது பொருட்களுடன் பணிபுரிவது நினைவகப் பயன்பாட்டை அதிகரித்து, மெதுவான செயலாக்கத்திற்கு வழிவகுக்கும்.
- ரெகுலர் எக்ஸ்பிரஷன்கள்: சிக்கலான ரெகுலர் எக்ஸ்பிரஷன்கள் செயல்பட மெதுவாக இருக்கலாம், குறிப்பாக பெரிய சரங்களில்.
உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>Expensive Operation Example</title>
</head>
<body>
<div id="result"></div>
<script>
const resultDiv = document.getElementById('result');
let largeArray = [];
for (let i = 0; i < 1000000; i++) {
largeArray.push(Math.random());
}
const startTime = performance.now();
largeArray.sort(); // Expensive operation
const endTime = performance.now();
const executionTime = endTime - startTime;
resultDiv.textContent = `Execution time: ${executionTime} ms`;
</script>
</body>
</html>
இந்த எடுத்துக்காட்டில், ஸ்கிரிப்ட் ஒரு பெரிய ரேண்டம் எண்களின் வரிசையை உருவாக்கி அதை வரிசைப்படுத்துகிறது. ஒரு பெரிய வரிசையை வரிசைப்படுத்துவது ஒரு செலவுமிக்க செயலாகும், இது குறிப்பிடத்தக்க நேரத்தை எடுக்கலாம்.
செலவுமிக்க செயல்பாடுகளை மேம்படுத்துவதற்கான தீர்வுகள்:
- அல்காரிதம்களை மேம்படுத்துதல்: தேவையான செயலாக்கத்தின் அளவைக் குறைக்க திறமையான அல்காரிதம்கள் மற்றும் தரவு கட்டமைப்புகளைப் பயன்படுத்தவும்.
- Web Workers ஐப் பயன்படுத்தவும்: செலவுமிக்க செயல்பாடுகளை Web Workers க்கு மாற்றவும், அவை பின்னணியில் இயங்குகின்றன மற்றும் பிரதான த்ரெட்டைத் தடுக்காது.
- முடிவுகளை கேச் செய்யவும்: செலவுமிக்க செயல்பாடுகளின் முடிவுகளை கேச் செய்யவும், இதனால் அவை ஒவ்வொரு முறையும் மீண்டும் கணக்கிடப்பட வேண்டியதில்லை.
- Debouncing மற்றும் Throttling: செயல்பாட்டு அழைப்புகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த debouncing அல்லது throttling நுட்பங்களைச் செயல்படுத்தவும். ஸ்க்ரோல் நிகழ்வுகள் அல்லது அளவு மாற்ற நிகழ்வுகள் போன்ற அடிக்கடி தூண்டப்படும் நிகழ்வு கையாளுபவர்களுக்கு இது பயனுள்ளதாக இருக்கும்.
Web Worker ஐப் பயன்படுத்தும் உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>Expensive Operation Example</title>
</head>
<body>
<div id="result"></div>
<script>
const resultDiv = document.getElementById('result');
if (window.Worker) {
const myWorker = new Worker('worker.js');
myWorker.onmessage = function(event) {
const executionTime = event.data;
resultDiv.textContent = `Execution time: ${executionTime} ms`;
};
myWorker.postMessage(''); // Start the worker
} else {
resultDiv.textContent = 'Web Workers are not supported in this browser.';
}
</script>
</body>
</html>
worker.js:
self.onmessage = function(event) {
let largeArray = [];
for (let i = 0; i < 1000000; i++) {
largeArray.push(Math.random());
}
const startTime = performance.now();
largeArray.sort(); // Expensive operation
const endTime = performance.now();
const executionTime = endTime - startTime;
self.postMessage(executionTime);
}
இந்த எடுத்துக்காட்டில், வரிசைப்படுத்தும் செயல்பாடு ஒரு Web Worker இல் செய்யப்படுகிறது, இது பின்னணியில் இயங்குகிறது மற்றும் பிரதான த்ரெட்டைத் தடுக்காது. இது வரிசைப்படுத்தும் செயல்முறை நடந்து கொண்டிருக்கும்போது UI பதிலளிக்கக்கூடியதாக இருக்க அனுமதிக்கிறது.
4. மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள் (Third-Party Scripts)
பல வலைப் பயன்பாடுகள் பகுப்பாய்வு, விளம்பரம், சமூக ஊடக ஒருங்கிணைப்பு மற்றும் பிற அம்சங்களுக்கு மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை நம்பியுள்ளன. இந்த ஸ்கிரிப்ட்கள் பெரும்பாலும் செயல்திறன் மேல்நிலையின் ஒரு குறிப்பிடத்தக்க ஆதாரமாக இருக்கலாம், ஏனெனில் அவை மோசமாக மேம்படுத்தப்படலாம், பெரிய அளவிலான தரவைப் பதிவிறக்கலாம் அல்லது செலவுமிக்க செயல்பாடுகளைச் செய்யலாம்.
உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>Third-Party Script Example</title>
<script src="https://example.com/analytics.js"></script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Some content here.</p>
</body>
</html>
இந்த எடுத்துக்காட்டில், ஸ்கிரிப்ட் ஒரு மூன்றாம் தரப்பு டொமைனில் இருந்து ஒரு பகுப்பாய்வு ஸ்கிரிப்டை ஏற்றுகிறது. இந்த ஸ்கிரிப்ட் ஏற்றுவதற்கு அல்லது செயல்படுத்துவதற்கு மெதுவாக இருந்தால், அது பக்கத்தின் செயல்திறனை எதிர்மறையாக பாதிக்கலாம்.
மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மேம்படுத்துவதற்கான தீர்வுகள்:
- ஸ்கிரிப்ட்களை ஒத்திசைவற்ற முறையில் ஏற்றவும்: மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை பாகுபடுத்தியைத் தடுக்காமல், ஒத்திசைவற்ற முறையில் ஏற்றுவதற்கு `async` அல்லது `defer` பண்புக்கூறுகளைப் பயன்படுத்தவும்.
- தேவைப்படும்போது மட்டுமே ஸ்கிரிப்ட்களை ஏற்றவும்: மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள் உண்மையில் தேவைப்படும்போது மட்டுமே ஏற்றவும். எடுத்துக்காட்டாக, பயனர் சமூக ஊடக விட்ஜெட்களுடன் தொடர்பு கொள்ளும்போது மட்டுமே அவற்றை ஏற்றவும்.
- உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தவும்: பயனருக்கு புவியியல் ரீதியாக நெருக்கமான இடத்திலிருந்து மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை வழங்க CDN ஐப் பயன்படுத்தவும்.
- மூன்றாம் தரப்பு ஸ்கிரிப்ட் செயல்திறனைக் கண்காணிக்கவும்: மூன்றாம் தரப்பு ஸ்கிரிப்ட்களின் செயல்திறனைக் கண்காணிக்க மற்றும் ஏதேனும் தடைகளை அடையாளம் காண செயல்திறன் கண்காணிப்புக் கருவிகளைப் பயன்படுத்தவும்.
- மாற்றுகளைக் கருத்தில் கொள்ளவும்: அதிக செயல்திறன் கொண்ட அல்லது சிறிய தடம் கொண்ட மாற்று தீர்வுகளை ஆராயுங்கள்.
5. நிகழ்வு கேட்பவர்கள் (Event Listeners)
நிகழ்வு கேட்பவர்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை பயனர் தொடர்புகளுக்கும் பிற நிகழ்வுகளுக்கும் பதிலளிக்க அனுமதிக்கின்றன. இருப்பினும், அதிகமான நிகழ்வு கேட்பவர்களை இணைப்பது அல்லது திறமையற்ற நிகழ்வு கையாளுபவர்களைப் பயன்படுத்துவது செயல்திறனை பாதிக்கலாம்.
உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>Event Listener Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const listItems = document.querySelectorAll('#myList li');
for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', function() {
alert(`You clicked on item ${i + 1}`);
});
}
</script>
</body>
</html>
இந்த எடுத்துக்காட்டில், ஸ்கிரிப்ட் ஒவ்வொரு பட்டியல் உருப்படிக்கும் ஒரு கிளிக் நிகழ்வு கேட்பவரை இணைக்கிறது. இது வேலை செய்தாலும், இது மிகவும் திறமையான அணுகுமுறை அல்ல, குறிப்பாக பட்டியல் அதிக எண்ணிக்கையிலான உருப்படிகளைக் கொண்டிருந்தால்.
நிகழ்வு கேட்பவர்களை மேம்படுத்துவதற்கான தீர்வுகள்:
- நிகழ்வுப் பிரதிநிதித்துவத்தைப் (Event Delegation) பயன்படுத்தவும்: தனிப்பட்ட கூறுகளுக்கு நிகழ்வு கேட்பவர்களை இணைப்பதற்குப் பதிலாக, ஒரு பெற்றோர் உறுப்புக்கு ஒரு ஒற்றை நிகழ்வு கேட்பவரை இணைத்து, அதன் குழந்தைகள் மீதான நிகழ்வுகளைக் கையாள நிகழ்வுப் பிரதிநிதித்துவத்தைப் பயன்படுத்தவும்.
- தேவையற்ற நிகழ்வு கேட்பவர்களை அகற்றவும்: நிகழ்வு கேட்பவர்கள் இனி தேவைப்படாதபோது அவற்றை அகற்றவும்.
- திறமையான நிகழ்வு கையாளுபவர்களைப் பயன்படுத்தவும்: தேவையான செயலாக்கத்தின் அளவைக் குறைக்க உங்கள் நிகழ்வு கையாளுபவர்களுக்குள் உள்ள குறியீட்டை மேம்படுத்தவும்.
- நிகழ்வு கையாளுபவர்களை த்ராட்டில் அல்லது டிபவுன்ஸ் செய்யவும்: நிகழ்வு கையாளுபவர்களின் அழைப்புகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த த்ராட்டிலிங் அல்லது டிபவுன்சிங் நுட்பங்களைப் பயன்படுத்தவும், குறிப்பாக ஸ்க்ரோல் நிகழ்வுகள் அல்லது அளவு மாற்ற நிகழ்வுகள் போன்ற அடிக்கடி தூண்டப்படும் நிகழ்வுகளுக்கு.
நிகழ்வுப் பிரதிநிதித்துவத்தைப் பயன்படுத்தும் உதாரணம்:
<!DOCTYPE html>
<html>
<head>
<title>Event Listener Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const myList = document.getElementById('myList');
myList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const index = Array.prototype.indexOf.call(myList.children, event.target);
alert(`You clicked on item ${index + 1}`);
}
});
</script>
</body>
</html>
இந்த எடுத்துக்காட்டில், வரிசைப்படுத்தப்படாத பட்டியலுக்கு ஒரு ஒற்றை கிளிக் நிகழ்வு கேட்பவர் இணைக்கப்பட்டுள்ளது. ஒரு பட்டியல் உருப்படி கிளிக் செய்யப்படும்போது, நிகழ்வு கேட்பவர் நிகழ்வின் இலக்கு ஒரு பட்டியல் உருப்படியா என்பதைச் சரிபார்க்கிறது. அது இருந்தால், நிகழ்வு கேட்பவர் நிகழ்வைக் கையாளுகிறார். இந்த அணுகுமுறை ஒவ்வொரு பட்டியல் உருப்படிக்கும் தனித்தனியாக ஒரு கிளிக் நிகழ்வு கேட்பவரை இணைப்பதை விட திறமையானது.
ஜாவாஸ்கிரிப்ட் செயல்திறனை அளவிடுவதற்கும் மேம்படுத்துவதற்கும் கருவிகள்
ஜாவாஸ்கிரிப்ட் செயல்திறனை அளவிடவும் மேம்படுத்தவும் உங்களுக்கு உதவ பல கருவிகள் உள்ளன:- உலாவி டெவலப்பர் கருவிகள் (Browser Developer Tools): நவீன உலாவிகள் உள்ளமைக்கப்பட்ட டெவலப்பர் கருவிகளுடன் வருகின்றன, அவை ஜாவாஸ்கிரிப்ட் குறியீட்டை சுயவிவரப்படுத்தவும், செயல்திறன் தடைகளை அடையாளம் காணவும், ரெண்டரிங் பைப்லைனை பகுப்பாய்வு செய்யவும் உங்களை அனுமதிக்கின்றன.
- லைட்ஹவுஸ் (Lighthouse): லைட்ஹவுஸ் என்பது வலைப்பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு திறந்த மூல, தானியங்கு கருவியாகும். இது செயல்திறன், அணுகல், முற்போக்கு வலைப் பயன்பாடுகள், எஸ்.இ.ஓ மற்றும் பலவற்றிற்கான தணிக்கைகளைக் கொண்டுள்ளது.
- வெப் பேஜ் டெஸ்ட் (WebPageTest): வெப் பேஜ் டெஸ்ட் என்பது வெவ்வேறு இடங்கள் மற்றும் உலாவிகளில் இருந்து உங்கள் வலைத்தளத்தின் செயல்திறனைச் சோதிக்க உங்களை அனுமதிக்கும் ஒரு இலவச கருவியாகும்.
- பேஜ்ஸ்பீட் இன்சைட்ஸ் (PageSpeed Insights): பேஜ்ஸ்பீட் இன்சைட்ஸ் ஒரு வலைப்பக்கத்தின் உள்ளடக்கத்தை பகுப்பாய்வு செய்து, அந்தப் பக்கத்தை வேகமாக்க பரிந்துரைகளை உருவாக்குகிறது.
- செயல்திறன் கண்காணிப்புக் கருவிகள் (Performance Monitoring Tools): உங்கள் வலைப் பயன்பாட்டின் செயல்திறனை நிகழ்நேரத்தில் கண்காணிக்க உதவும் பல வணிக செயல்திறன் கண்காணிப்புக் கருவிகள் உள்ளன.
முடிவுரை
பிரவுசர் ரெண்டரிங் பைப்லைனில் ஜாவாஸ்கிரிப்ட் ஒரு முக்கிய பங்கு வகிக்கிறது. ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் செயல்திறனை எவ்வாறு பாதிக்கிறது என்பதைப் புரிந்துகொள்வது உயர் செயல்திறன் கொண்ட வலைப் பயன்பாடுகளை உருவாக்குவதற்கு அவசியம். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள மேம்படுத்தல் உத்திகளைப் பின்பற்றுவதன் மூலம், ரெண்டரிங் பைப்லைனில் ஜாவாஸ்கிரிப்டின் தாக்கத்தைக் குறைத்து, ஒரு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்கலாம். ஏதேனும் தடைகளை அடையாளம் கண்டு சரிசெய்ய உங்கள் வலைத்தளத்தின் செயல்திறனை எப்போதும் அளவிடவும் கண்காணிக்கவும் நினைவில் கொள்ளுங்கள்.
இந்த வழிகாட்டி பிரவுசர் ரெண்டரிங் பைப்லைனில் ஜாவாஸ்கிரிப்டின் தாக்கத்தைப் புரிந்துகொள்வதற்கான ஒரு திடமான அடித்தளத்தை வழங்குகிறது. உங்கள் வலை மேம்பாட்டுத் திறன்களைச் செம்மைப்படுத்தவும், உலகளாவிய பார்வையாளர்களுக்காக விதிவிலக்கான பயனர் அனுபவங்களை உருவாக்கவும் இந்த நுட்பங்களை ஆராய்ந்து பரிசோதிப்பதைத் தொடருங்கள்.