ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിലെ ഓരോ ഘട്ടത്തെയും ജാവാസ്ക്രിപ്റ്റ് എങ്ങനെ ബാധിക്കുന്നു എന്ന് മനസ്സിലാക്കുക, മെച്ചപ്പെട്ട വെബ് പ്രകടനത്തിനായി നിങ്ങളുടെ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള വഴികൾ കണ്ടെത്തുക.
ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ: വെബ് പ്രകടനത്തെ ജാവാസ്ക്രിപ്റ്റ് എങ്ങനെ ബാധിക്കുന്നു
വെബ് ബ്രൗസർ ഒരു ഉപയോക്താവിന്റെ സ്ക്രീനിൽ ദൃശ്യവൽക്കരണത്തിനായി HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് കോഡ് എന്നിവയെ പരിവർത്തനം ചെയ്യുന്നതിനുള്ള ഘട്ടങ്ങളുടെ ഒരു ശ്രേണിയാണ് ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ. ഉയർന്ന പ്രകടനമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ ലക്ഷ്യമിടുന്ന ഏതൊരു വെബ് ഡെവലപ്പർക്കും ഈ പൈപ്പ്‌ലൈൻ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ശക്തവും ഡൈനാമിക്കുമായ ഒരു ഭാഷ എന്ന നിലയിൽ ജാവാസ്ക്രിപ്റ്റ് ഈ പൈപ്പ്‌ലൈനിന്റെ ഓരോ ഘട്ടത്തെയും ഗണ്യമായി സ്വാധീനിക്കുന്നു. ഈ ലേഖനം ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ വിശദീകരിക്കുകയും ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ പ്രകടനത്തെ എങ്ങനെ ബാധിക്കുന്നു എന്ന് പരിശോധിക്കുകയും ഒപ്റ്റിമൈസേഷനായി പ്രവർത്തനക്ഷമമായ തന്ത്രങ്ങൾ നൽകുകയും ചെയ്യും.
ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ മനസ്സിലാക്കുക
റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ താഴെപ്പറയുന്ന ഘട്ടങ്ങളായി വിഭജിക്കാം:- HTML പാർസിംഗ്: ബ്രൗസർ HTML മാർക്കപ്പ് പാർസ് ചെയ്യുകയും ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) നിർമ്മിക്കുകയും ചെയ്യുന്നു. ഇത് HTML ഘടകങ്ങളെയും അവയുടെ ബന്ധങ്ങളെയും പ്രതിനിധീകരിക്കുന്ന ഒരു ട്രീ പോലുള്ള ഘടനയാണ്.
- CSS പാർസിംഗ്: ബ്രൗസർ CSS സ്റ്റൈൽഷീറ്റുകൾ (ബാഹ്യവും ഇൻലൈനും) പാർസ് ചെയ്യുകയും CSS ഒബ്ജക്റ്റ് മോഡൽ (CSSOM) സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. ഇത് CSS നിയമങ്ങളെയും അവയുടെ പ്രോപ്പർട്ടികളെയും പ്രതിനിധീകരിക്കുന്ന മറ്റൊരു ട്രീ പോലുള്ള ഘടനയാണ്.
- അറ്റാച്ച്‌മെന്റ്: ബ്രൗസർ DOM, CSSOM എന്നിവ സംയോജിപ്പിച്ച് റെൻഡർ ട്രീ സൃഷ്ടിക്കുന്നു. റെൻഡർ ട്രീ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാൻ ആവശ്യമായ നോഡുകൾ മാത്രം ഉൾക്കൊള്ളുന്നു, കൂടാതെ <head> പോലുള്ള ഘടകങ്ങളെയും `display: none` ഉള്ള ഘടകങ്ങളെയും ഒഴിവാക്കുന്നു. ഓരോ ദൃശ്യമായ DOM നോഡിനും അനുബന്ധ CSSOM നിയമങ്ങൾ ഘടിപ്പിച്ചിരിക്കുന്നു.
- ലേഔട്ട് (റീഫ്ലോ): റെൻഡർ ട്രീയിലെ ഓരോ ഘടകത്തിന്റെയും സ്ഥാനവും വലുപ്പവും ബ്രൗസർ കണക്കാക്കുന്നു. ഈ പ്രക്രിയ "റീഫ്ലോ" എന്നും അറിയപ്പെടുന്നു.
- പെയിന്റിംഗ് (റീപെയിന്റ്): കണക്കാക്കിയ ലേഔട്ട് വിവരങ്ങളും പ്രയോഗിച്ച സ്റ്റൈലുകളും ഉപയോഗിച്ച് ബ്രൗസർ റെൻഡർ ട്രീയിലെ ഓരോ ഘടകത്തെയും സ്ക്രീനിൽ പെയിന്റ് ചെയ്യുന്നു. ഈ പ്രക്രിയ "റീപെയിന്റ്" എന്നും അറിയപ്പെടുന്നു.
- കോമ്പോസിറ്റിംഗ്: സ്ക്രീനിൽ പ്രദർശിപ്പിക്കേണ്ട അവസാന ചിത്രമായി വിവിധ ലെയറുകളെ ബ്രൗസർ സംയോജിപ്പിക്കുന്നു. പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനായി ആധുനിക ബ്രൗസറുകൾ പലപ്പോഴും കോമ്പോസിറ്റിംഗിനായി ഹാർഡ്‌വെയർ ആക്സിലറേഷൻ ഉപയോഗിക്കുന്നു.
റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിലെ ജാവാസ്ക്രിപ്റ്റിന്റെ സ്വാധീനം
വിവിധ ഘട്ടങ്ങളിൽ ജാവാസ്ക്രിപ്റ്റിന് റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിനെ ഗണ്യമായി സ്വാധീനിക്കാൻ കഴിയും. മോശമായി എഴുതിയതോ കാര്യക്ഷമമല്ലാത്തതോ ആയ ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രകടനപരമായ തടസ്സങ്ങൾ ഉണ്ടാക്കുകയും പേജ് ലോഡ് സമയം കൂട്ടുകയും മോശം ഉപയോക്തൃ അനുഭവം നൽകുകയും ചെയ്യും.1. പാർസറിനെ ബ്ലോക്ക് ചെയ്യുന്നു
HTML-ൽ ഒരു <script> ടാഗ് ബ്രൗസർ കാണുമ്പോൾ, ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഡൗൺലോഡ് ചെയ്യാനും എക്സിക്യൂട്ട് ചെയ്യാനും അത് സാധാരണയായി HTML ഡോക്യുമെന്റ് പാർസിംഗ് നിർത്തിവെക്കുന്നു. കാരണം ജാവാസ്ക്രിപ്റ്റിന് DOM പരിഷ്കരിക്കാൻ കഴിയും, കൂടാതെ തുടരുന്നതിന് മുമ്പ് DOM അപ്-ടു-ഡേറ്റ് ആണെന്ന് ബ്രൗസറിന് ഉറപ്പാക്കേണ്ടതുണ്ട്. ഈ ബ്ലോക്കിംഗ് സ്വഭാവം പേജിന്റെ ആദ്യ റെൻഡറിംഗ് ഗണ്യമായി വൈകിപ്പിക്കും.
ഉദാഹരണം:
നിങ്ങളുടെ HTML ഡോക്യുമെന്റിന്റെ <head>-ൽ വലിയൊരു ജാവാസ്ക്രിപ്റ്റ് ഫയൽ ഉണ്ടെന്ന് കരുതുക:
<!DOCTYPE html>
<html>
<head>
<title>എൻ്റെ വെബ്സൈറ്റ്</title>
<script src="large-script.js"></script>
</head>
<body>
<h1>എൻ്റെ വെബ്സൈറ്റിലേക്ക് സ്വാഗതം</h1>
<p>ഇവിടെ കുറച്ച് ഉള്ളടക്കം</p>
</body>
</html>
ഈ സാഹചര്യത്തിൽ, ബ്രൗസർ HTML പാർസ് ചെയ്യുന്നത് നിർത്തുകയും <h1> ഉം <p> ഘടകങ്ങളും റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് `large-script.js` ഡൗൺലോഡ് ചെയ്യാനും എക്സിക്യൂട്ട് ചെയ്യാനും കാത്തിരിക്കുകയും ചെയ്യും. ഇത് ആദ്യ പേജ് ലോഡ് സമയത്ത് ശ്രദ്ധേയമായ കാലതാമസത്തിന് കാരണമാകും.
പാർസർ ബ്ലോക്കിംഗ് കുറയ്ക്കാനുള്ള പരിഹാരങ്ങൾ:
- `async` അല്ലെങ്കിൽ `defer` ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക: `async` ആട്രിബ്യൂട്ട് സ്ക്രിപ്റ്റിനെ പാർസറിനെ ബ്ലോക്ക് ചെയ്യാതെ ഡൗൺലോഡ് ചെയ്യാൻ അനുവദിക്കുന്നു, ഡൗൺലോഡ് ചെയ്തയുടൻ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യും. `defer` ആട്രിബ്യൂട്ടും സ്ക്രിപ്റ്റിനെ പാർസറിനെ ബ്ലോക്ക് ചെയ്യാതെ ഡൗൺലോഡ് ചെയ്യാൻ അനുവദിക്കുന്നു, എന്നാൽ HTML പാർസിംഗ് പൂർത്തിയായ ശേഷം, HTML-ൽ കാണുന്ന ക്രമത്തിൽ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യും.
- സ്ക്രിപ്റ്റുകൾ <body> ടാഗിന്റെ അവസാനം സ്ഥാപിക്കുക: സ്ക്രിപ്റ്റുകൾ <body> ടാഗിന്റെ അവസാനം സ്ഥാപിക്കുന്നതിലൂടെ, സ്ക്രിപ്റ്റുകൾ കാണുന്നതിന് മുമ്പ് ബ്രൗസറിന് HTML പാർസ് ചെയ്യാനും DOM നിർമ്മിക്കാനും കഴിയും. ഇത് പേജിന്റെ ആദ്യ ഉള്ളടക്കം വേഗത്തിൽ റെൻഡർ ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു.
`async` ഉപയോഗിച്ചുള്ള ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>എൻ്റെ വെബ്സൈറ്റ്</title>
<script src="large-script.js" async></script>
</head>
<body>
<h1>എൻ്റെ വെബ്സൈറ്റിലേക്ക് സ്വാഗതം</h1>
<p>ഇവിടെ കുറച്ച് ഉള്ളടക്കം</p>
</body>
</html>
ഈ സാഹചര്യത്തിൽ, ബ്രൗസർ `large-script.js` അസിൻക്രണസായി ഡൗൺലോഡ് ചെയ്യും, HTML പാർസിംഗിനെ ബ്ലോക്ക് ചെയ്യാതെ. സ്ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്തയുടൻ എക്സിക്യൂട്ട് ചെയ്യും, ഒരുപക്ഷേ മുഴുവൻ HTML ഡോക്യുമെന്റും പാർസ് ചെയ്യുന്നതിന് മുമ്പായി.
`defer` ഉപയോഗിച്ചുള്ള ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>എൻ്റെ വെബ്സൈറ്റ്</title>
<script src="large-script.js" defer></script>
</head>
<body>
<h1>എൻ്റെ വെബ്സൈറ്റിലേക്ക് സ്വാഗതം</h1>
<p>ഇവിടെ കുറച്ച് ഉള്ളടക്കം</p>
</body>
</html>
ഈ സാഹചര്യത്തിൽ, ബ്രൗസർ `large-script.js` അസിൻക്രണസായി ഡൗൺലോഡ് ചെയ്യും, HTML പാർസിംഗിനെ ബ്ലോക്ക് ചെയ്യാതെ. സ്ക്രിപ്റ്റ് മുഴുവൻ HTML ഡോക്യുമെന്റും പാർസ് ചെയ്തതിന് ശേഷം, HTML-ൽ കാണുന്ന ക്രമത്തിൽ എക്സിക്യൂട്ട് ചെയ്യും.
2. DOM മാനിപുലേഷൻ
ജാവാസ്ക്രിപ്റ്റ് പലപ്പോഴും DOM മാനിപുലേറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു, ഘടകങ്ങളെയും അവയുടെ ആട്രിബ്യൂട്ടുകളെയും ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ പരിഷ്കരിക്കുകയോ ചെയ്യുന്നു. ധാരാളം അല്ലെങ്കിൽ സങ്കീർണ്ണമായ DOM മാനിപുലേഷനുകൾ റീഫ്ലോസ്, റീപെയിന്റുകൾ എന്നിവ ട്രിഗർ ചെയ്യും. ഇവ പ്രകടനത്തെ ഗണ്യമായി ബാധിക്കുന്ന വിലകൂടിയ പ്രവർത്തനങ്ങളാണ്.
ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>DOM മാനിപുലേഷൻ ഉദാഹരണം</title>
</head>
<body>
<ul id="myList">
<li>ഇനം 1</li>
<li>ഇനം 2</li>
</ul>
<script>
const myList = document.getElementById('myList');
for (let i = 3; i <= 10; i++) {
const listItem = document.createElement('li');
listItem.textContent = `ഇനം ${i}`;
myList.appendChild(listItem);
}
</script>
</body>
</html>
ഈ ഉദാഹരണത്തിൽ, സ്ക്രിപ്റ്റ് അൺഓർഡേർഡ് ലിസ്റ്റിലേക്ക് എട്ട് പുതിയ ലിസ്റ്റ് ഇനങ്ങൾ ചേർക്കുന്നു. ഓരോ `appendChild` ഓപ്പറേഷനും ഒരു റീഫ്ലോയും റീപെയിന്റും ട്രിഗർ ചെയ്യുന്നു, കാരണം ബ്രൗസറിന് ലേഔട്ട് വീണ്ടും കണക്കാക്കുകയും ലിസ്റ്റ് വീണ്ടും വരയ്ക്കുകയും വേണം.
DOM മാനിപുലേഷൻ ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള പരിഹാരങ്ങൾ:
- DOM മാനിപുലേഷനുകൾ കുറയ്ക്കുക: സാധ്യമാകുന്നത്ര DOM മാനിപുലേഷനുകളുടെ എണ്ണം കുറയ്ക്കുക. DOM പലതവണ പരിഷ്കരിക്കുന്നതിന് പകരം, മാറ്റങ്ങൾ ഒരുമിച്ച് കൂട്ടാൻ ശ്രമിക്കുക.
- DocumentFragment ഉപയോഗിക്കുക: ഒരു DocumentFragment സൃഷ്ടിക്കുക, എല്ലാ DOM മാനിപുലേഷനുകളും ഫ്രാഗ്മെന്റിൽ ചെയ്യുക, എന്നിട്ട് ഫ്രാഗ്മെന്റ് യഥാർത്ഥ DOM-ലേക്ക് ഒരിക്കൽ മാത്രം ചേർക്കുക. ഇത് റീഫ്ലോകളുടെയും റീപെയിന്റുകളുടെയും എണ്ണം കുറയ്ക്കുന്നു.
- DOM ഘടകങ്ങൾ കാഷെ ചെയ്യുക: ഒരേ ഘടകങ്ങൾക്കായി DOM വീണ്ടും വീണ്ടും ക്വറി ചെയ്യുന്നത് ഒഴിവാക്കുക. വേരിയബിളുകളിൽ ഘടകങ്ങൾ സംഭരിക്കുകയും അവ വീണ്ടും ഉപയോഗിക്കുകയും ചെയ്യുക.
- കാര്യക്ഷമമായ സെലക്ടറുകൾ ഉപയോഗിക്കുക: ഘടകങ്ങളെ ലക്ഷ്യമിടാൻ നിർദ്ദിഷ്ടവും കാര്യക്ഷമവുമായ സെലക്ടറുകൾ (ഉദാ., ID-കൾ) ഉപയോഗിക്കുക. സങ്കീർണ്ണമോ കാര്യക്ഷമമല്ലാത്തതോ ആയ സെലക്ടറുകൾ (ഉദാ., DOM ട്രീയെ അനാവശ്യമായി ട്രാവേഴ്സ് ചെയ്യുന്നത്) ഒഴിവാക്കുക.
- അനാവശ്യ റീഫ്ലോകളും റീപെയിന്റുകളും ഒഴിവാക്കുക: ചില CSS പ്രോപ്പർട്ടികൾ, `width`, `height`, `margin`, `padding` എന്നിവ പോലെ, മാറ്റുമ്പോൾ റീഫ്ലോകൾക്കും റീപെയിന്റുകൾക്കും കാരണമാകും. ഇവയെ പതിവായി മാറ്റുന്നത് ഒഴിവാക്കാൻ ശ്രമിക്കുക.
DocumentFragment ഉപയോഗിച്ചുള്ള ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>DOM മാനിപുലേഷൻ ഉദാഹരണം</title>
</head>
<body>
<ul id="myList">
<li>ഇനം 1</li>
<li>ഇനം 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 = `ഇനം ${i}`;
fragment.appendChild(listItem);
}
myList.appendChild(fragment);
</script>
</body>
</html>
ഈ ഉദാഹരണത്തിൽ, എല്ലാ പുതിയ ലിസ്റ്റ് ഇനങ്ങളും ആദ്യം ഒരു DocumentFragment-ൽ ചേർക്കുകയും തുടർന്ന് ഫ്രാഗ്മെന്റ് അൺഓർഡേർഡ് ലിസ്റ്റിലേക്ക് ചേർക്കുകയും ചെയ്യുന്നു. ഇത് റീഫ്ലോകൾക്കും റീപെയിന്റുകൾക്കും ഒരു തവണ മാത്രം പരിമിതപ്പെടുത്തുന്നു.
3. വിലകൂടിയ പ്രവർത്തനങ്ങൾ
ചില ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തനങ്ങൾ സ്വാഭാവികമായും വിലകൂടിയതും പ്രകടനത്തെ ബാധിക്കുന്നതുമാണ്. ഇവ ഉൾപ്പെടുന്നു:
- സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾ: ജാവാസ്ക്രിപ്റ്റിൽ സങ്കീർണ്ണമായ ഗണിത കണക്കുകൂട്ടലുകളോ ഡാറ്റാ പ്രോസസ്സിംഗോ നടത്തുന്നത് signifikan CPU വിഭവങ്ങൾ ഉപയോഗിക്കാൻ സാധ്യതയുണ്ട്.
- വലിയ ഡാറ്റാ ഘടനകൾ: വലിയ അറേകളോ ഒബ്ജക്റ്റുകളോ ഉപയോഗിക്കുന്നത് മെമ്മറി ഉപയോഗം കൂട്ടാനും പ്രോസസ്സിംഗ് സാവധാനത്തിലാക്കാനും ഇടയാക്കും.
- റെഗുലർ എക്സ്പ്രഷനുകൾ: സങ്കീർണ്ണമായ റെഗുലർ എക്സ്പ്രഷനുകൾ എക്സിക്യൂട്ട് ചെയ്യാൻ സാവധാനത്തിലാകാം, പ്രത്യേകിച്ച് വലിയ സ്ട്രിംഗുകളിൽ.
ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>വിലകൂടിയ പ്രവർത്തന ഉദാഹരണം</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(); // വിലകൂടിയ പ്രവർത്തനം
const endTime = performance.now();
const executionTime = endTime - startTime;
resultDiv.textContent = `എക്സിക്യൂഷൻ സമയം: ${executionTime} ms`;
</script>
</body>
</html>
ഈ ഉദാഹരണത്തിൽ, സ്ക്രിപ്റ്റ് വലിയൊരു റാൻഡം നമ്പറുകളുടെ അറേ സൃഷ്ടിക്കുകയും അതിനെ സോർട്ട് ചെയ്യുകയും ചെയ്യുന്നു. വലിയൊരു അറേ സോർട്ട് ചെയ്യുന്നത് ഗണ്യമായ സമയമെടുക്കുന്ന ഒരു വിലകൂടിയ പ്രവർത്തനമാണ്.
വിലകൂടിയ പ്രവർത്തനങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള പരിഹാരങ്ങൾ:
- അൽഗോരിതങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: ആവശ്യമായ പ്രോസസ്സിംഗിന്റെ അളവ് കുറയ്ക്കാൻ കാര്യക്ഷമമായ അൽഗോരിതങ്ങളും ഡാറ്റാ ഘടനകളും ഉപയോഗിക്കുക.
- Web Workers ഉപയോഗിക്കുക: പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യാതെ പശ്ചാത്തലത്തിൽ പ്രവർത്തിക്കുന്ന Web Workers-ലേക്ക് വിലകൂടിയ പ്രവർത്തനങ്ങൾ ഓഫ്‌ലോഡ് ചെയ്യുക.
- ഫലങ്ങൾ കാഷെ ചെയ്യുക: വിലകൂടിയ പ്രവർത്തനങ്ങളുടെ ഫലങ്ങൾ കാഷെ ചെയ്യുക, അതിനാൽ അവ ഓരോ തവണയും വീണ്ടും കണക്കാക്കേണ്ടതില്ല.
- Debouncing and Throttling: ഫംഗ്ഷൻ കോളുകളുടെ ആവൃത്തി പരിമിതപ്പെടുത്താൻ debouncing അല്ലെങ്കിൽ throttling ടെക്നിക്കുകൾ നടപ്പിലാക്കുക. ഇത് പലപ്പോഴും ട്രിഗർ ചെയ്യുന്ന ഇവൻ്റ് ഹാൻഡ്ലറുകൾക്ക് (സ്ക്രോൾ ഇവന്റുകൾ അല്ലെങ്കിൽ റീസൈസ് ഇവന്റുകൾ പോലുള്ളവ) ഉപയോഗപ്രദമാണ്.
Web Worker ഉപയോഗിച്ചുള്ള ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>വിലകൂടിയ പ്രവർത്തന ഉദാഹരണം</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 = `എക്സിക്യൂഷൻ സമയം: ${executionTime} ms`;
};
myWorker.postMessage(''); // വർക്കർ ആരംഭിക്കുക
} else {
resultDiv.textContent = 'ഈ ബ്രൗസറിൽ വെബ് വർക്കേഴ്സ് പിന്തുണയ്ക്കുന്നില്ല.';
}
</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(); // വിലകൂടിയ പ്രവർത്തനം
const endTime = performance.now();
const executionTime = endTime - startTime;
self.postMessage(executionTime);
}
ഈ ഉദാഹരണത്തിൽ, സോർട്ടിംഗ് പ്രവർത്തനം ഒരു വെബ് വർക്കറിൽ നടത്തുന്നു, ഇത് പശ്ചാത്തലത്തിൽ പ്രവർത്തിക്കുന്നു, പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യുന്നില്ല. ഇത് സോർട്ടിംഗ് നടക്കുമ്പോൾ UI പ്രതികരിക്കുന്നതായി തുടരാൻ അനുവദിക്കുന്നു.
4. മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകൾ
നിരവധി വെബ് ആപ്ലിക്കേഷനുകൾ അനലിറ്റിക്സ്, പരസ്യം, സോഷ്യൽ മീഡിയ സംയോജനം, മറ്റ് ഫീച്ചറുകൾ എന്നിവയ്ക്കായി മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകളെ ആശ്രയിക്കുന്നു. ഇവ മോശമായി ഒപ്റ്റിമൈസ് ചെയ്തവയോ, വലിയ അളവിൽ ഡാറ്റ ഡൗൺലോഡ് ചെയ്യുന്നവയോ, വിലകൂടിയ പ്രവർത്തനങ്ങൾ നടത്തുന്നവയോ ആയതിനാൽ പ്രകടന ഓവർഹെഡിന്റെ ഒരു പ്രധാന ഉറവിടമായി മാറാറുണ്ട്.
ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റ് ഉദാഹരണം</title>
<script src="https://example.com/analytics.js"></script>
</head>
<body>
<h1>എൻ്റെ വെബ്സൈറ്റിലേക്ക് സ്വാഗതം</h1>
<p>ഇവിടെ കുറച്ച് ഉള്ളടക്കം</p>
</body>
</html>
ഈ ഉദാഹരണത്തിൽ, സ്ക്രിപ്റ്റ് ഒരു മൂന്നാം കക്ഷി ഡൊമെയ്‌നിൽ നിന്ന് ഒരു അനലിറ്റിക്സ് സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യുന്നു. ഈ സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യാനോ എക്സിക്യൂട്ട് ചെയ്യാനോ സാവധാനമാണെങ്കിൽ, അത് പേജിന്റെ പ്രകടനത്തെ പ്രതികൂലമായി ബാധിക്കും.
മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകൾ ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള പരിഹാരങ്ങൾ:
- സ്ക്രിപ്റ്റുകൾ അസിൻക്രണസായി ലോഡ് ചെയ്യുക: മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകളെ പാർസറിനെ ബ്ലോക്ക് ചെയ്യാതെ അസിൻക്രണസായി ലോഡ് ചെയ്യാൻ `async` അല്ലെങ്കിൽ `defer` ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക.
- ആവശ്യമുള്ളപ്പോൾ മാത്രം സ്ക്രിപ്റ്റുകൾ ലോഡ് ചെയ്യുക: മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകൾ യഥാർത്ഥത്തിൽ ആവശ്യമുള്ളപ്പോൾ മാത്രം ലോഡ് ചെയ്യുക. ഉദാഹരണത്തിന്, ഉപയോക്താവ് അവയുമായി സംവദിക്കുമ്പോൾ മാത്രം സോഷ്യൽ മീഡിയ വിഡ്ജറ്റുകൾ ലോഡ് ചെയ്യുക.
- ഒരു കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്ക് (CDN) ഉപയോഗിക്കുക: ഉപയോക്താവിന് ഭൂമിശാസ്ത്രപരമായി സമീപമുള്ള സ്ഥലത്ത് നിന്ന് മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകൾ നൽകാൻ ഒരു CDN ഉപയോഗിക്കുക.
- മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റ് പ്രകടനം നിരീക്ഷിക്കുക: മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റുകളുടെ പ്രകടനം ട്രാക്ക് ചെയ്യാനും ഏതെങ്കിലും തടസ്സങ്ങൾ തിരിച്ചറിയാനും പ്രകടനം നിരീക്ഷണ ടൂളുകൾ ഉപയോഗിക്കുക.
- മാറ്റുകൾ പരിഗണിക്കുക: കൂടുതൽ പ്രകടനമുള്ളതോ ചെറിയ ഫുട്പ്രിന്റ് ഉള്ളതോ ആയ ബദൽ പരിഹാരങ്ങൾ കണ്ടെത്തുക.
5. ഇവന്റ് ലിസണേഴ്സ്
ഇവന്റ് ലിസണേഴ്സ് ജാവാസ്ക്രിപ്റ്റ് കോഡിനെ ഉപയോക്തൃ ഇടപെടലുകൾക്കും മറ്റ് ഇവന്റുകൾക്കും പ്രതികരിക്കാൻ അനുവദിക്കുന്നു. എന്നിരുന്നാലും, അമിതമായ ഇവന്റ് ലിസണേഴ്സ് അറ്റാച്ച് ചെയ്യുന്നതോ കാര്യക്ഷമമല്ലാത്ത ഇവന്റ് ഹാൻഡ്ലറുകൾ ഉപയോഗിക്കുന്നതോ പ്രകടനത്തെ ബാധിക്കാം.
ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>ഇവന്റ് ലിസണർ ഉദാഹരണം</title>
</head>
<body>
<ul id="myList">
<li>ഇനം 1</li>
<li>ഇനം 2</li>
<li>ഇനം 3</li>
</ul>
<script>
const listItems = document.querySelectorAll('#myList li');
for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', function() {
alert(`നിങ്ങൾ ഇനം ${i + 1} ക്ലിക്ക് ചെയ്തു`);
});
}
</script>
</body>
</html>
ഈ ഉദാഹരണത്തിൽ, സ്ക്രിപ്റ്റ് ഓരോ ലിസ്റ്റ് ഇനത്തിലേക്കും ഒരു ക്ലിക്ക് ഇവന്റ് ലിസണർ അറ്റാച്ച് ചെയ്യുന്നു. ഇത് പ്രവർത്തിക്കുമെങ്കിലും, ലിസ്റ്റിൽ ധാരാളം ഇനങ്ങൾ ഉണ്ടെങ്കിൽ പോലും ഇത് ഏറ്റവും കാര്യക്ഷമമായ സമീപനമല്ല.
ഇവന്റ് ലിസണേഴ്സ് ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള പരിഹാരങ്ങൾ:
- ഇവന്റ് ഡെലിഗേഷൻ ഉപയോഗിക്കുക: ഓരോ ഘടകത്തിലേക്കും ഇവന്റ് ലിസണേഴ്സ് അറ്റാച്ച് ചെയ്യുന്നതിന് പകരം, ഒരു പാരൻ്റ് ഘടകത്തിലേക്ക് ഒരു ഇവന്റ് ലിസണർ അറ്റാച്ച് ചെയ്യുകയും അതിന്റെ കുട്ടികളിലെ ഇവന്റുകൾ കൈകാര്യം ചെയ്യാൻ ഇവന്റ് ഡെലിഗേഷൻ ഉപയോഗിക്കുകയും ചെയ്യുക.
- അനാവശ്യ ഇവന്റ് ലിസണേഴ്സ് നീക്കം ചെയ്യുക: ഇവന്റ് ലിസണേഴ്സ് ഇനി ആവശ്യമില്ലാത്തപ്പോൾ നീക്കം ചെയ്യുക.
- കാര്യക്ഷമമായ ഇവന്റ് ഹാൻഡ്ലറുകൾ ഉപയോഗിക്കുക: ആവശ്യമായ പ്രോസസ്സിംഗ് കുറയ്ക്കാൻ നിങ്ങളുടെ ഇവന്റ് ഹാൻഡ്ലറുകൾക്കുള്ളിൽ കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക.
- ഇവന്റ് ഹാൻഡ്ലറുകൾ ത്രോട്ടിൽ ചെയ്യുക അല്ലെങ്കിൽ ഡീബൗൺസ് ചെയ്യുക: ഇവന്റ് ഹാൻഡ്ലർ കോളുകളുടെ ആവൃത്തി പരിമിതപ്പെടുത്താൻ ത്രോട്ടലിംഗ് അല്ലെങ്കിൽ ഡീബൗൺസിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിക്കുക, പ്രത്യേകിച്ച് സ്ക്രോൾ ഇവന്റുകൾ അല്ലെങ്കിൽ റീസൈസ് ഇവന്റുകൾ പോലുള്ളവ ഇടയ്ക്കിടെ ട്രിഗർ ചെയ്യുന്ന ഇവന്റുകൾക്ക്.
ഇവന്റ് ഡെലിഗേഷൻ ഉപയോഗിച്ചുള്ള ഉദാഹരണം:
<!DOCTYPE html>
<html>
<head>
<title>ഇവന്റ് ലിസണർ ഉദാഹരണം</title>
</head>
<body>
<ul id="myList">
<li>ഇനം 1</li>
<li>ഇനം 2</li>
<li>ഇനം 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(`നിങ്ങൾ ഇനം ${index + 1} ക്ലിക്ക് ചെയ്തു`);
}
});
</script>
</body>
</html>
ഈ ഉദാഹരണത്തിൽ, അൺഓർഡേർഡ് ലിസ്റ്റിലേക്ക് ഒരു ക്ലിക്ക് ഇവന്റ് ലിസണർ അറ്റാച്ച് ചെയ്തിരിക്കുന്നു. ഒരു ലിസ്റ്റ് ഇനം ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഇവന്റ് ലിസണർ ഇവന്റ് ലക്ഷ്യം ഒരു ലിസ്റ്റ് ഇനമാണോ എന്ന് പരിശോധിക്കുന്നു. ആണെങ്കിൽ, ഇവന്റ് ലിസണർ ഇവന്റ് കൈകാര്യം ചെയ്യുന്നു. ഇത് ഓരോ ലിസ്റ്റ് ഇനത്തിലേക്കും ഒരു ക്ലിക്ക് ഇവന്റ് ലിസണർ അറ്റാച്ച് ചെയ്യുന്നതിനേക്കാൾ കാര്യക്ഷമമായ ഒരു സമീപനമാണ്.
ജാവാസ്ക്രിപ്റ്റ് പ്രകടനം അളക്കുന്നതിനും മെച്ചപ്പെടുത്തുന്നതിനുമുള്ള ടൂളുകൾ
ജാവാസ്ക്രിപ്റ്റ് പ്രകടനം അളക്കാനും മെച്ചപ്പെടുത്താനും നിങ്ങളെ സഹായിക്കുന്ന നിരവധി ടൂളുകൾ ലഭ്യമാണ്:- ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ: ആധുനിക ബ്രൗസറുകളിൽ ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രൊഫൈൽ ചെയ്യാനും പ്രകടനപരമായ തടസ്സങ്ങൾ തിരിച്ചറിയാനും റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ വിശകലനം ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്ന ബിൽറ്റ്-ഇൻ ഡെവലപ്പർ ടൂളുകൾ ഉണ്ട്.
- Lighthouse: വെബ് പേജുകളുടെ ഗുണമേന്മ മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഒരു ഓപ്പൺ-സോഴ്സ്, ഓട്ടോമേറ്റഡ് ടൂളാണ് Lighthouse. പ്രകടനം, ലഭ്യത, പ്രോഗ്രസീവ് വെബ് ആപ്പുകൾ, SEO എന്നിവയ്ക്കുള്ള ഓഡിറ്റുകൾ ഇതിലുണ്ട്.
- WebPageTest: വിവിധ സ്ഥലങ്ങളിൽ നിന്നും ബ്രൗസറുകളിൽ നിന്നും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പരിശോധിക്കാൻ അനുവദിക്കുന്ന ഒരു സൗജന്യ ടൂളാണ് WebPageTest.
- PageSpeed Insights: PageSpeed Insights ഒരു വെബ് പേജിന്റെ ഉള്ളടക്കം വിശകലനം ചെയ്യുകയും പേജ് വേഗത്തിലാക്കാൻ നിർദ്ദേശങ്ങൾ നൽകുകയും ചെയ്യുന്നു.
- പ്രകടന നിരീക്ഷണ ടൂളുകൾ: നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ പ്രകടനം റിയൽ-ടൈമിൽ ട്രാക്ക് ചെയ്യാൻ സഹായിക്കുന്ന നിരവധി വാണിജ്യ പ്രകടന നിരീക്ഷണ ടൂളുകൾ ലഭ്യമാണ്.
ഉപസംഹാരം
ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിൽ ജാവാസ്ക്രിപ്റ്റ് ഒരു നിർണായക പങ്ക് വഹിക്കുന്നു. ഉയർന്ന പ്രകടനമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ പ്രകടനത്തെ എങ്ങനെ ബാധിക്കുന്നു എന്ന് മനസ്സിലാക്കുന്നത് അത്യാവശ്യമാണ്. ഈ ലേഖനത്തിൽ വിവരിച്ചിട്ടുള്ള ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ പിന്തുടർന്ന്, നിങ്ങൾക്ക് റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിലെ ജാവാസ്ക്രിപ്റ്റിന്റെ സ്വാധീനം കുറയ്ക്കാനും സുഗമവും പ്രതികരിക്കുന്നതുമായ ഉപയോക്തൃ അനുഭവം നൽകാനും കഴിയും. ഏതെങ്കിലും തടസ്സങ്ങൾ തിരിച്ചറിയാനും പരിഹരിക്കാനും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം എപ്പോഴും അളക്കുകയും നിരീക്ഷിക്കുകയും ചെയ്യുക.
ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിലെ ജാവാസ്ക്രിപ്റ്റിന്റെ സ്വാധീനം മനസ്സിലാക്കുന്നതിന് ഈ ഗൈഡ് ഒരു solid അടിത്തറ നൽകുന്നു. ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്കായി മികച്ച ഉപയോക്തൃ അനുഭവങ്ങൾ നിർമ്മിക്കാനും നിങ്ങളുടെ വെബ് ഡെവലപ്‌മെന്റ് കഴിവുകൾ മെച്ചപ്പെടുത്താനും ഈ ടെക്നിക്കുകൾ പരീക്ഷിക്കുകയും പര്യവേക്ഷണം ചെയ്യുകയും ചെയ്യുക.