വെബ് കമ്പോണന്റ് പെർഫോമൻസ് ഫ്രെയിംവർക്ക്: ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി നടപ്പിലാക്കുന്നതിനുള്ള ഒരു വഴികാട്ടി

ആധുനികവും ഫ്രെയിംവർക്ക്-അജ്ഞ്ഞോസ്റ്റിക് വെബ് ഡെവലപ്‌മെന്റിന്റെയും ഒരു ആണിക്കല്ലാണ് വെബ് കമ്പോണന്റുകൾ. എൻക്യാപ്‌സുലേഷൻ, പുനരുപയോഗം, പരസ്പരപ്രവർത്തനക്ഷമത എന്നിവയുടെ വാഗ്ദാനം ലോകമെമ്പാടുമുള്ള ടീമുകളെ അളക്കാവുന്ന ഡിസൈൻ സിസ്റ്റങ്ങളും സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകളും നിർമ്മിക്കാൻ പ്രാപ്തരാക്കിയിട്ടുണ്ട്. എന്നിരുന്നാലും, വലിയ ശക്തിക്കൊപ്പം വലിയ ഉത്തരവാദിത്തവും വരുന്നു. ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്തില്ലെങ്കിൽ, സ്വയം ഉൾക്കൊള്ളുന്ന കമ്പോണന്റുകളുടെ നിരുപദ്രവകരമെന്ന് തോന്നുന്ന ഒരു ശേഖരം കാര്യമായ പ്രകടന തകർച്ചയ്ക്ക് കാരണമാകും, ഇത് വേഗത കുറഞ്ഞ ലോഡ് സമയങ്ങൾ, പ്രതികരണശേഷിയില്ലാത്ത ഇന്റർഫേസുകൾ, നിരാശാജനകമായ ഉപയോക്തൃ അനുഭവം എന്നിവയിലേക്ക് നയിക്കുന്നു.

ഇതൊരു സൈദ്ധാന്തിക പ്രശ്നമല്ല. ഇത് ഉപയോക്തൃ ഇടപഴകലും പരിവർത്തന നിരക്കുകളും മുതൽ ഗൂഗിളിന്റെ കോർ വെബ് വൈറ്റൽസ് നിർണ്ണയിക്കുന്ന എസ്.ഇ.ഒ റാങ്കിംഗ് വരെയുള്ള പ്രധാന ബിസിനസ്സ് മെട്രിക്കുകളെ നേരിട്ട് ബാധിക്കുന്നു. വെബ് കമ്പോണന്റ് സ്പെസിഫിക്കേഷന്റെ തനതായ പ്രകടന സവിശേഷതകൾ - കസ്റ്റം എലമെന്റുകളുടെ ലൈഫ് സൈക്കിൾ, ഷാഡോ ഡോമിന്റെ റെൻഡറിംഗ് മോഡൽ, എച്ച്ടിഎംഎൽ ടെംപ്ലേറ്റുകളുടെ ഡെലിവറി എന്നിവ മനസ്സിലാക്കുന്നതിലാണ് വെല്ലുവിളി.

ഈ സമഗ്രമായ ഗൈഡ് ഒരു ഘടനാപരമായ വെബ് കമ്പോണന്റ് പെർഫോമൻസ് ഫ്രെയിംവർക്ക് അവതരിപ്പിക്കുന്നു. ഡെവലപ്പർമാരെയും എഞ്ചിനീയറിംഗ് നേതാക്കളെയും പ്രകടനത്തിലെ തടസ്സങ്ങൾ വ്യവസ്ഥാപിതമായി കണ്ടെത്താനും പരിഹരിക്കാനും തടയാനും സഹായിക്കുന്നതിന് രൂപകൽപ്പന ചെയ്ത ഒരു മാനസിക മാതൃകയാണിത്. ഒറ്റപ്പെട്ട നുറുങ്ങുകളും തന്ത്രങ്ങളും മറികടന്ന്, ഇനീഷ്യലൈസേഷൻ, റെൻഡറിംഗ് മുതൽ നെറ്റ്‌വർക്ക് ലോഡിംഗ്, മെമ്മറി മാനേജ്‌മെന്റ് വരെ എല്ലാം ഉൾക്കൊള്ളുന്ന ഒരു സമഗ്രമായ തന്ത്രം ഞങ്ങൾ നിർമ്മിക്കും. നിങ്ങൾ ഒരു ആഗോള പ്രേക്ഷകർക്കായി ഒരൊറ്റ കമ്പോണന്റോ അല്ലെങ്കിൽ ഒരു വലിയ കമ്പോണന്റ് ലൈബ്രറിയോ നിർമ്മിക്കുകയാണെങ്കിലും, നിങ്ങളുടെ കമ്പോണന്റുകൾ പ്രവർത്തനക്ഷമം മാത്രമല്ല, അസാധാരണമാംവിധം വേഗതയുള്ളതാണെന്ന് ഉറപ്പാക്കാൻ ആവശ്യമായ പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകൾ ഈ ഫ്രെയിംവർക്ക് നൽകും.

വെബ് കമ്പോണന്റുകളുടെ പ്രകടന പശ്ചാത്തലം മനസ്സിലാക്കൽ

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, വെബ് കമ്പോണന്റുകൾക്ക് പ്രകടനം എന്തുകൊണ്ട് സവിശേഷമായി പ്രാധാന്യമർഹിക്കുന്നുവെന്നും അവ അവതരിപ്പിക്കുന്ന പ്രത്യേക വെല്ലുവിളികൾ എന്താണെന്നും മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. മോണോലിത്തിക്ക് ആപ്ലിക്കേഷനുകളിൽ നിന്ന് വ്യത്യസ്തമായി, കമ്പോണന്റ് അധിഷ്ഠിത ആർക്കിടെക്ചറുകൾ പലപ്പോഴും "ആയിരം മുറിവുകളാലുള്ള മരണം" എന്ന അവസ്ഥ അനുഭവിക്കുന്നു, അവിടെ നിരവധി ചെറിയ, കാര്യക്ഷമമല്ലാത്ത കമ്പോണന്റുകളുടെ സഞ്ചിത ഓവർഹെഡ് ഒരു പേജിനെ തളർത്തുന്നു.

വെബ് കമ്പോണന്റുകൾക്ക് പ്രകടനം എന്തുകൊണ്ട് പ്രധാനമാണ്

• കോർ വെബ് വൈറ്റൽസിലുള്ള (CWV) സ്വാധീനം: ഒരു ആരോഗ്യകരമായ സൈറ്റിനായുള്ള ഗൂഗിളിന്റെ മെട്രിക്കുകളെ കമ്പോണന്റ് പ്രകടനം നേരിട്ട് ബാധിക്കുന്നു. ഭാരമേറിയ ഒരു കമ്പോണന്റിന് Largest Contentful Paint (LCP) വൈകിപ്പിക്കാൻ കഴിയും. സങ്കീർണ്ണമായ ഇനീഷ്യലൈസേഷൻ ലോജിക് First Input Delay (FID) അല്ലെങ്കിൽ പുതിയ Interaction to Next Paint (INP) വർദ്ധിപ്പിക്കും. സ്ഥലം റിസർവ് ചെയ്യാതെ അസിൻക്രണസായി ഉള്ളടക്കം ലോഡ് ചെയ്യുന്ന കമ്പോണന്റുകൾ Cumulative Layout Shift (CLS)-ന് കാരണമാകും.
• ഉപയോക്തൃ അനുഭവം (UX): വേഗത കുറഞ്ഞ കമ്പോണന്റുകൾ ജാങ്കി സ്ക്രോളിംഗ്, ഉപയോക്തൃ ഇടപെടലുകളിൽ കാലതാമസം നേരിടുന്ന ഫീഡ്‌ബായ്ക്ക്, കൂടാതെ നിലവാരം കുറഞ്ഞ ആപ്ലിക്കേഷൻ എന്ന മൊത്തത്തിലുള്ള ധാരണ എന്നിവയിലേക്ക് നയിക്കുന്നു. ശക്തി കുറഞ്ഞ ഉപകരണങ്ങളിലോ വേഗത കുറഞ്ഞ നെറ്റ്‌വർക്ക് കണക്ഷനുകളിലോ ഉള്ള ഉപയോക്താക്കൾക്ക്, ആഗോള ഇന്റർനെറ്റ് പ്രേക്ഷകരുടെ ഒരു പ്രധാന ഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നതിനാൽ, ഈ പ്രശ്നങ്ങൾ വർദ്ധിക്കുന്നു.
• സ്കേലബിലിറ്റിയും പരിപാലനവും: പ്രകടനം കൂടിയ ഒരു കമ്പോണന്റ് സ്കെയിൽ ചെയ്യാൻ എളുപ്പമാണ്. നിങ്ങൾ ഒരു ലൈബ്രറി നിർമ്മിക്കുമ്പോൾ, ആ ലൈബ്രറിയുടെ ഓരോ ഉപഭോക്താവിനും അതിന്റെ പ്രകടന സവിശേഷതകൾ ലഭിക്കുന്നു. മോശമായി ഒപ്റ്റിമൈസ് ചെയ്ത ഒരൊറ്റ കമ്പോണന്റ് നൂറുകണക്കിന് വ്യത്യസ്ത ആപ്ലിക്കേഷനുകളിൽ ഒരു തടസ്സമായി മാറും.

വെബ് കമ്പോണന്റ് പ്രകടനത്തിന്റെ അതുല്യമായ വെല്ലുവിളികൾ

വെബ് കമ്പോണന്റുകൾ പരമ്പരാഗത ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകളിൽ നിന്ന് വ്യത്യസ്തമായ പ്രകടന പരിഗണനകൾ അവതരിപ്പിക്കുന്നു.

• ഷാഡോ ഡോം ഓവർഹെഡ്: എൻക്യാപ്‌സുലേഷനായി ഷാഡോ ഡോം മികച്ചതാണെങ്കിലും, അത് സൗജന്യമല്ല. ഒരു ഷാഡോ റൂട്ട് ഉണ്ടാക്കുന്നതിനും, അതിനുള്ളിൽ CSS പാഴ്സ് ചെയ്യുന്നതിനും സ്കോപ്പ് ചെയ്യുന്നതിനും, അതിന്റെ ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നതിനും ഓവർഹെഡ് ഉണ്ട്. ഷാഡോ ഡോമിൽ നിന്ന് ലൈറ്റ് ഡോമിലേക്ക് ഇവന്റുകൾ ബബിൾ അപ്പ് ചെയ്യുന്ന ഇവന്റ് റീടാർഗെറ്റിംഗിനും ചെറുതാണെങ്കിലും അളക്കാവുന്ന ഒരു ചിലവുണ്ട്.
• കസ്റ്റം എലമെന്റ് ലൈഫ് സൈക്കിൾ ഹോട്ട്‌സ്‌പോട്ടുകൾ: കസ്റ്റം എലമെന്റ് ലൈഫ് സൈക്കിൾ കോൾബാക്കുകൾ (constructor, connectedCallback, disconnectedCallback, attributeChangedCallback) ശക്തമായ ഹുക്കുകളാണ്, പക്ഷേ അവ പ്രകടന കെണികളുമാണ്. ഈ കോൾബാക്കുകളിൽ, പ്രത്യേകിച്ച് connectedCallback-ൽ, ഭാരമേറിയതും സിൻക്രണസുമായ ജോലികൾ ചെയ്യുന്നത് പ്രധാന ത്രെഡിനെ തടസ്സപ്പെടുത്തുകയും റെൻഡറിംഗ് വൈകിപ്പിക്കുകയും ചെയ്യും.
• ഫ്രെയിംവർക്ക് ഇന്ററോപ്പറബിളിറ്റി: റിയാക്റ്റ്, ആംഗുലർ, അല്ലെങ്കിൽ വ്യൂ പോലുള്ള ഫ്രെയിംവർക്കുകളിൽ വെബ് കമ്പോണന്റുകൾ ഉപയോഗിക്കുമ്പോൾ, ഒരു അധിക അബ്സ്ട്രാക്ഷൻ ലെയർ നിലവിലുണ്ട്. ഫ്രെയിംവർക്കിന്റെ ചേഞ്ച് ഡിറ്റക്ഷൻ അല്ലെങ്കിൽ വെർച്വൽ ഡോം റെൻഡറിംഗ് മെക്കാനിസം വെബ് കമ്പോണന്റിന്റെ പ്രോപ്പർട്ടികളുമായും ആട്രിബ്യൂട്ടുകളുമായും സംവദിക്കണം, ഇത് ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്തില്ലെങ്കിൽ ചിലപ്പോൾ അനാവശ്യമായ അപ്‌ഡേറ്റുകളിലേക്ക് നയിച്ചേക്കാം.

വെബ് കമ്പോണന്റ് ഒപ്റ്റിമൈസേഷനായുള്ള ഒരു ഘടനാപരമായ ഫ്രെയിംവർക്ക്

ഈ വെല്ലുവിളികളെ വ്യവസ്ഥാപിതമായി നേരിടാൻ, അഞ്ച് വ്യത്യസ്ത തൂണുകളിൽ നിർമ്മിച്ച ഒരു ഫ്രെയിംവർക്ക് ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു. ഓരോ തൂണിന്റെയും കണ്ണിലൂടെ നിങ്ങളുടെ കമ്പോണന്റുകൾ വിശകലനം ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ഒരു സമഗ്രമായ ഒപ്റ്റിമൈസേഷൻ സമീപനം ഉറപ്പാക്കാൻ കഴിയും.

• തൂൺ 1: ലൈഫ് സൈക്കിൾ തൂൺ (ഇനീഷ്യലൈസേഷനും ക്ലീനപ്പും) - ഒരു കമ്പോണന്റ് സൃഷ്‌ടിക്കപ്പെടുമ്പോഴും DOM-ലേക്ക് ചേർക്കുമ്പോഴും നീക്കം ചെയ്യുമ്പോഴും എന്ത് സംഭവിക്കുന്നു എന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു.
• തൂൺ 2: റെൻഡറിംഗ് തൂൺ (പെയിന്റും റീപെയിന്റും) - DOM ഘടനയും സ്റ്റൈലിംഗും ഉൾപ്പെടെ, ഒരു കമ്പോണന്റ് എങ്ങനെ സ്ക്രീനിൽ സ്വയം വരയ്ക്കുകയും അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു എന്നതിനെക്കുറിച്ചാണ് ഇത്.
• തൂൺ 3: നെറ്റ്‌വർക്ക് തൂൺ (ലോഡിംഗും ഡെലിവറിയും) - കമ്പോണന്റിന്റെ കോഡും അസറ്റുകളും ബ്രൗസറിലേക്ക് എങ്ങനെ എത്തിക്കുന്നുവെന്ന് ഉൾക്കൊള്ളുന്നു.
• തൂൺ 4: മെമ്മറി തൂൺ (റിസോഴ്സ് മാനേജ്മെന്റ്) - മെമ്മറി ലീക്കുകൾ തടയുന്നതിനും സിസ്റ്റം റിസോഴ്സുകളുടെ കാര്യക്ഷമമായ ഉപയോഗത്തിനും ഊന്നൽ നൽകുന്നു.
• തൂൺ 5: ടൂളിംഗ് തൂൺ (അളവുകളും രോഗനിർണയവും) - പ്രകടനം അളക്കുന്നതിനും തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും ഉപയോഗിക്കുന്ന ടൂളുകളും ടെക്നിക്കുകളും ഉൾക്കൊള്ളുന്നു.

ഓരോ തൂണിനുള്ളിലെയും പ്രവർത്തനക്ഷമമായ തന്ത്രങ്ങൾ നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം.

തൂൺ 1: ലൈഫ് സൈക്കിൾ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ

ഒരു വെബ് കമ്പോണന്റിന്റെ പെരുമാറ്റത്തിന്റെ ഹൃദയമാണ് കസ്റ്റം എലമെന്റ് ലൈഫ് സൈക്കിൾ. ഈ രീതികൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് ഉയർന്ന പ്രകടനത്തിലേക്കുള്ള ആദ്യപടിയാണ്.

connectedCallback-ലെ കാര്യക്ഷമമായ ഇനീഷ്യലൈസേഷൻ

ഓരോ തവണയും കമ്പോണന്റ് DOM-ലേക്ക് ചേർക്കുമ്പോൾ connectedCallback വിളിക്കപ്പെടുന്നു. ശ്രദ്ധയോടെ കൈകാര്യം ചെയ്തില്ലെങ്കിൽ റെൻഡറിംഗ് എളുപ്പത്തിൽ തടയാൻ കഴിയുന്ന ഒരു നിർണായക പാതയാണിത്.

തന്ത്രം: അത്യാവശ്യമല്ലാത്ത എല്ലാ ജോലികളും മാറ്റിവയ്ക്കുക. connectedCallback-ന്റെ പ്രാഥമിക ലക്ഷ്യം, കമ്പോണന്റിനെ ഏറ്റവും കുറഞ്ഞ പ്രവർത്തനക്ഷമമായ അവസ്ഥയിലേക്ക് എത്രയും വേഗം എത്തിക്കുക എന്നതാണ്.

• സിൻക്രണസ് ജോലികൾ ഒഴിവാക്കുക: ഈ കോൾബാക്കിൽ ഒരിക്കലും സിൻക്രണസ് നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകളോ ഭാരമേറിയ കണക്കുകൂട്ടലുകളോ നടത്തരുത്.
• DOM മാനിപ്പുലേഷൻ മാറ്റിവയ്ക്കുക: നിങ്ങൾക്ക് സങ്കീർണ്ണമായ DOM സെറ്റപ്പ് ചെയ്യണമെങ്കിൽ, ആദ്യത്തെ പെയിന്റിന് ശേഷം requestAnimationFrame ഉപയോഗിച്ച് അത് മാറ്റിവയ്ക്കുന്നത് പരിഗണിക്കുക. ഇത് മറ്റ് നിർണായക ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നതിൽ നിന്ന് ബ്രൗസറിനെ തടയുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• ലേസി ഇവന്റ് ലിസണറുകൾ: ഉടനടി ആവശ്യമുള്ള പ്രവർത്തനത്തിനായി മാത്രം ഇവന്റ് ലിസണറുകൾ അറ്റാച്ചുചെയ്യുക. ഉദാഹരണത്തിന്, ഒരു ഡ്രോപ്പ്ഡൗൺ മെനുവിനുള്ള ലിസണറുകൾ, ഉപയോക്താവ് ട്രിഗറുമായി ആദ്യമായി ഇടപഴകുമ്പോൾ അറ്റാച്ചുചെയ്യാം, connectedCallback-ൽ അല്ല.

ഉദാഹരണം: അപ്രധാനമായ സെറ്റപ്പ് മാറ്റിവയ്ക്കൽ

ഒപ്റ്റിമൈസേഷന് മുമ്പ്:

            connectedCallback() {
  // Heavy DOM manipulation
  this.renderComplexChart(); 
  // Attaching many event listeners
  this.setupEventListeners(); 
}
            

              
                Copy
              
            
          

ഒപ്റ്റിമൈസേഷന് ശേഷം:

            connectedCallback() {
  // Render a simple placeholder first
  this.renderPlaceholder();

  // Defer the heavy lifting until after the browser has painted
  requestAnimationFrame(() => {
    this.renderComplexChart();
    this.setupEventListeners();
  });
}
            

              
                Copy
              
            
          

disconnectedCallback-ലെ സ്മാർട്ട് ക്ലീനപ്പ്

സെറ്റപ്പ് പോലെ തന്നെ പ്രധാനമാണ് ക്ലീനപ്പും. ഒരു കമ്പോണന്റ് DOM-ൽ നിന്ന് നീക്കം ചെയ്യുമ്പോൾ ശരിയായി വൃത്തിയാക്കുന്നതിൽ പരാജയപ്പെടുന്നത് ദീർഘകാല സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകളിൽ (SPAs) മെമ്മറി ലീക്കുകളുടെ ഒരു പ്രധാന കാരണമാണ്.

തന്ത്രം: connectedCallback-ൽ ഉണ്ടാക്കിയ ഏതൊരു ലിസണറുകളും ടൈമറുകളും സൂക്ഷ്മമായി അൺരജിസ്റ്റർ ചെയ്യുക.

• ഇവന്റ് ലിസണറുകൾ നീക്കം ചെയ്യുക: window, document, അല്ലെങ്കിൽ പാരന്റ് നോഡുകൾ പോലുള്ള ഗ്ലോബൽ ഒബ്‌ജക്റ്റുകളിൽ ചേർത്ത ഏതൊരു ഇവന്റ് ലിസണറുകളും വ്യക്തമായി നീക്കം ചെയ്യണം.
• ടൈമറുകൾ റദ്ദാക്കുക: സജീവമായ ഏതെങ്കിലും setInterval അല്ലെങ്കിൽ setTimeout കോളുകൾ ക്ലിയർ ചെയ്യുക.
• നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നിർത്തുക: കമ്പോണന്റ് ഇനി ആവശ്യമില്ലാത്ത ഒരു ഫെച്ച് അഭ്യർത്ഥന ആരംഭിച്ചിട്ടുണ്ടെങ്കിൽ, അത് റദ്ദാക്കാൻ ഒരു AbortController ഉപയോഗിക്കുക.

attributeChangedCallback ഉപയോഗിച്ച് ആട്രിബ്യൂട്ടുകൾ കൈകാര്യം ചെയ്യൽ

നിരീക്ഷിക്കപ്പെടുന്ന ഒരു ആട്രിബ്യൂട്ട് മാറുമ്പോൾ ഈ കോൾബാക്ക് പ്രവർത്തനക്ഷമമാകുന്നു. ഒരു പാരന്റ് ഫ്രെയിംവർക്ക് വഴി ഒന്നിലധികം ആട്രിബ്യൂട്ടുകൾ പെട്ടെന്ന് മാറ്റിയാൽ, ഇത് ഒന്നിലധികം, ചെലവേറിയ റീ-റെൻഡർ സൈക്കിളുകൾക്ക് കാരണമാകും.

തന്ത്രം: റെൻഡർ ത്രാഷിംഗ് തടയാൻ അപ്‌ഡേറ്റുകൾ ഡിബൗൺസ് ചെയ്യുകയോ ബാച്ച് ചെയ്യുകയോ ചെയ്യുക.

ഒരു മൈക്രോടാസ്ക് (Promise.resolve()) അല്ലെങ്കിൽ ഒരു ആനിമേഷൻ ഫ്രെയിം (requestAnimationFrame) ഉപയോഗിച്ച് ഒരൊറ്റ അപ്‌ഡേറ്റ് ഷെഡ്യൂൾ ചെയ്തുകൊണ്ട് നിങ്ങൾക്ക് ഇത് നേടാനാകും. ഇത് ഒന്നിലധികം തുടർച്ചയായ മാറ്റങ്ങളെ ഒരൊറ്റ റീ-റെൻഡർ പ്രവർത്തനത്തിലേക്ക് സംയോജിപ്പിക്കുന്നു.

തൂൺ 2: റെൻഡറിംഗ് ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ

ഒരു കമ്പോണന്റ് അതിന്റെ DOM-ഉം സ്റ്റൈലുകളും എങ്ങനെ റെൻഡർ ചെയ്യുന്നു എന്നത് പ്രകടന ഒപ്റ്റിമൈസേഷന്റെ ഏറ്റവും സ്വാധീനമുള്ള മേഖലയാണ്. ഇവിടെയുള്ള ചെറിയ മാറ്റങ്ങൾ കാര്യമായ നേട്ടങ്ങൾ നൽകും, പ്രത്യേകിച്ചും ഒരു പേജിൽ ഒരു കമ്പോണന്റ് പലതവണ ഉപയോഗിക്കുമ്പോൾ.

അഡോപ്റ്റഡ് സ്റ്റൈൽഷീറ്റുകൾ ഉപയോഗിച്ച് ഷാഡോ ഡോം മാസ്റ്റർ ചെയ്യുക

ഷാഡോ ഡോമിലെ സ്റ്റൈൽ എൻക്യാപ്‌സുലേഷൻ ഒരു മികച്ച സവിശേഷതയാണ്, എന്നാൽ ഡിഫോൾട്ടായി, നിങ്ങളുടെ കമ്പോണന്റിന്റെ ഓരോ ഇൻസ്റ്റൻസിനും അതിന്റേതായ <style> ബ്ലോക്ക് ലഭിക്കുന്നു. ഒരു പേജിലെ 100 കമ്പോണന്റ് ഇൻസ്റ്റൻസുകൾക്ക്, ഒരേ CSS 100 തവണ ബ്രൗസർ പാഴ്സ് ചെയ്യുകയും പ്രോസസ്സ് ചെയ്യുകയും വേണം.

തന്ത്രം: അഡോപ്റ്റഡ് സ്റ്റൈൽഷീറ്റുകൾ ഉപയോഗിക്കുക. ഈ ആധുനിക ബ്രൗസർ API, ജാവാസ്ക്രിപ്റ്റിൽ ഒരൊറ്റ CSSStyleSheet ഒബ്‌ജക്റ്റ് ഉണ്ടാക്കാനും അത് ഒന്നിലധികം ഷാഡോ റൂട്ടുകളിൽ പങ്കിടാനും നിങ്ങളെ അനുവദിക്കുന്നു. ബ്രൗസർ CSS ഒരു തവണ മാത്രം പാഴ്സ് ചെയ്യുന്നു, ഇത് മെമ്മറി ഉപയോഗത്തിൽ വലിയ കുറവിനും വേഗതയേറിയ കമ്പോണന്റ് ഇൻസ്റ്റൻഷ്യേഷനും കാരണമാകുന്നു.

ഉദാഹരണം: അഡോപ്റ്റഡ് സ്റ്റൈൽഷീറ്റുകൾ ഉപയോഗിക്കുന്നത്

            // Create the stylesheet object ONCE in your module
const myComponentStyles = new CSSStyleSheet();
myComponentStyles.replaceSync(`
  :host { display: block; }
  .title { color: blue; }
`);

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // Apply the shared stylesheet to this instance
    shadowRoot.adoptedStyleSheets = [myComponentStyles];
  }
}

            

              
                Copy
              
            
          

കാര്യക്ഷമമായ DOM അപ്‌ഡേറ്റുകൾ

നേരിട്ടുള്ള DOM മാനിപ്പുലേഷൻ ചെലവേറിയതാണ്. ഒരു ഫംഗ്ഷനിൽ ആവർത്തിച്ച് DOM-ൽ നിന്ന് വായിക്കുകയും എഴുതുകയും ചെയ്യുന്നത് "ലേഔട്ട് ത്രാഷിംഗിന്" കാരണമാകും, അവിടെ അനാവശ്യമായ പുനർകണക്കുകൂട്ടലുകൾ നടത്താൻ ബ്രൗസർ നിർബന്ധിതനാകുന്നു.

തന്ത്രം: DOM പ്രവർത്തനങ്ങൾ ബാച്ച് ചെയ്യുകയും കാര്യക്ഷമമായ റെൻഡറിംഗ് ലൈബ്രറികൾ പ്രയോജനപ്പെടുത്തുകയും ചെയ്യുക.

• ഡോക്യുമെന്റ് ഫ്രാഗ്മെന്റുകൾ ഉപയോഗിക്കുക: ഒരു സങ്കീർണ്ണമായ DOM ട്രീ നിർമ്മിക്കുമ്പോൾ, അത് ആദ്യം ഒരു ഡിസ്കണക്റ്റഡ് DocumentFragment-ൽ നിർമ്മിക്കുക. തുടർന്ന്, മുഴുവൻ ഫ്രാഗ്മെന്റും ഒരൊറ്റ ഓപ്പറേഷനിൽ DOM-ലേക്ക് ചേർക്കുക.
• ടെംപ്ലേറ്റിംഗ് ലൈബ്രറികൾ പ്രയോജനപ്പെടുത്തുക: ഗൂഗിളിന്റെ `lit-html` (Lit ലൈബ്രറിയുടെ റെൻഡറിംഗ് ഭാഗം) പോലുള്ള ലൈബ്രറികൾ ഇതിനായി പ്രത്യേകം നിർമ്മിച്ചതാണ്. യഥാർത്ഥത്തിൽ മാറിയ DOM-ന്റെ ഭാഗങ്ങൾ മാത്രം അപ്ഡേറ്റ് ചെയ്യുന്നതിന് അവ ടാഗ് ചെയ്ത ടെംപ്ലേറ്റ് ലിറ്ററലുകളും ഇന്റലിജന്റ് ഡിഫിംഗ് അൽഗോരിതങ്ങളും ഉപയോഗിക്കുന്നു, ഇത് കമ്പോണന്റിന്റെ മുഴുവൻ ഇന്നർ HTML-ഉം വീണ്ടും റെൻഡർ ചെയ്യുന്നതിനേക്കാൾ വളരെ കാര്യക്ഷമമാണ്.

പ്രകടനക്ഷമമായ കോമ്പോസിഷനായി സ്ലോട്ടുകൾ പ്രയോജനപ്പെടുത്തുന്നു

<slot> എലമെന്റ് ഒരു പ്രകടനം-സൗഹൃദ സവിശേഷതയാണ്. ലൈറ്റ് DOM ചിൽഡ്രനെ നിങ്ങളുടെ കമ്പോണന്റിന്റെ ഷാഡോ ഡോമിലേക്ക് പ്രൊജക്റ്റ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, കമ്പോണന്റിന് ആ DOM സ്വന്തമാക്കുകയോ കൈകാര്യം ചെയ്യുകയോ ചെയ്യേണ്ടതില്ല. സങ്കീർണ്ണമായ ഡാറ്റ കൈമാറുകയും കമ്പോണന്റിനെക്കൊണ്ട് DOM ഘടന പുനർനിർമ്മിക്കുകയും ചെയ്യുന്നതിനേക്കാൾ ഇത് വളരെ വേഗതയേറിയതാണ്.

തൂൺ 3: നെറ്റ്‌വർക്കും ലോഡിംഗ് തന്ത്രങ്ങളും

ഒരു കമ്പോണന്റ് ആന്തരികമായി പൂർണ്ണമായി ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കാം, പക്ഷേ അതിന്റെ കോഡ് നെറ്റ്‌വർക്കിലൂടെ കാര്യക്ഷമമല്ലാതെ വിതരണം ചെയ്യുകയാണെങ്കിൽ, ഉപയോക്തൃ അനുഭവം ഇപ്പോഴും മോശമാകും. വ്യത്യസ്ത നെറ്റ്‌വർക്ക് വേഗതയുള്ള ഒരു ആഗോള പ്രേക്ഷകർക്ക് ഇത് പ്രത്യേകിച്ചും ശരിയാണ്.

ലേസി ലോഡിംഗിന്റെ ശക്തി

പേജ് ആദ്യം ലോഡ് ചെയ്യുമ്പോൾ എല്ലാ കമ്പോണന്റുകളും ദൃശ്യമാകേണ്ടതില്ല. ഫൂട്ടറുകളിലും, മോഡലുകളിലും, അല്ലെങ്കിൽ തുടക്കത്തിൽ സജീവമല്ലാത്ത ടാബുകളിലുമുള്ള കമ്പോണന്റുകൾ ലേസി ലോഡിംഗിന് പ്രധാന സ്ഥാനാർത്ഥികളാണ്.

തന്ത്രം: ആവശ്യമുള്ളപ്പോൾ മാത്രം കമ്പോണന്റ് നിർവചനങ്ങൾ ലോഡ് ചെയ്യുക. ഒരു കമ്പോണന്റ് വ്യൂപോർട്ടിലേക്ക് പ്രവേശിക്കാൻ പോകുമ്പോൾ കണ്ടെത്താൻ IntersectionObserver API ഉപയോഗിക്കുക, തുടർന്ന് അതിന്റെ ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂൾ ഡൈനാമിക്കായി ഇമ്പോർട്ടുചെയ്യുക.

ഉദാഹരണം: ഒരു ലേസി-ലോഡിംഗ് പാറ്റേൺ

            // In your main application script
const cardElements = document.querySelectorAll('product-card[lazy]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // The component is near the viewport, load its code
      import('./components/product-card.js');
      // Stop observing this element
      observer.unobserve(entry.target);
    }
  });
});

cardElements.forEach(card => observer.observe(card));

            

              
                Copy
              
            
          

കോഡ് സ്പ്ലിറ്റിംഗും ബണ്ട്ലിംഗും

നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ എല്ലാ കമ്പോണന്റുകളുടെയും കോഡ് അടങ്ങുന്ന ഒരൊറ്റ, മോണോലിത്തിക്ക് ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിൽ ഉണ്ടാക്കുന്നത് ഒഴിവാക്കുക. ഇത് ഉപയോക്താക്കൾക്ക് അവർ ഒരിക്കലും കാണാത്ത കമ്പോണന്റുകൾക്കുള്ള കോഡ് ഡൗൺലോഡ് ചെയ്യാൻ നിർബന്ധിതരാക്കുന്നു.

തന്ത്രം: നിങ്ങളുടെ കമ്പോണന്റുകളെ ലോജിക്കൽ ചങ്കുകളായി കോഡ്-സ്പ്ലിറ്റ് ചെയ്യാൻ ഒരു ആധുനിക ബണ്ട്ലർ (Vite, Webpack, അല്ലെങ്കിൽ Rollup പോലുള്ളവ) ഉപയോഗിക്കുക. അവയെ പേജ് അനുസരിച്ചോ, ഫീച്ചർ അനുസരിച്ചോ ഗ്രൂപ്പുചെയ്യുക, അല്ലെങ്കിൽ ഓരോ കമ്പോണന്റിനെയും അതിന്റേതായ എൻട്രി പോയിന്റായി നിർവചിക്കുക. ഇത് നിലവിലെ കാഴ്‌ചയ്‌ക്ക് ആവശ്യമായ കോഡ് മാത്രം ഡൗൺലോഡ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു.

നിർണ്ണായക കമ്പോണന്റുകൾ പ്രീലോഡ് ചെയ്യലും പ്രീഫെച്ച് ചെയ്യലും

ഉടനടി ദൃശ്യമല്ലാത്തതും എന്നാൽ ഉടൻ ആവശ്യമായി വരാൻ സാധ്യതയുള്ളതുമായ കമ്പോണന്റുകൾക്ക് (ഉദാഹരണത്തിന്, ഒരു ഉപയോക്താവ് ഹോവർ ചെയ്യുന്ന ഡ്രോപ്പ്ഡൗൺ മെനുവിന്റെ ഉള്ളടക്കം), അവ നേരത്തെ ലോഡ് ചെയ്യാൻ തുടങ്ങാൻ നിങ്ങൾക്ക് ബ്രൗസറിന് ഒരു സൂചന നൽകാം.

• <link rel="preload" as="script" href="/path/to/component.js">: നിലവിലെ പേജിൽ ആവശ്യമായ റിസോഴ്സുകൾക്കായി ഇത് ഉപയോഗിക്കുക. ഇതിന് ഉയർന്ന മുൻഗണനയുണ്ട്.
• <link rel="prefetch" href="/path/to/component.js">: ഭാവിയിലെ ഒരു നാവിഗേഷന് ആവശ്യമായി വന്നേക്കാവുന്ന റിസോഴ്സുകൾക്കായി ഇത് ഉപയോഗിക്കുക. ഇതിന് കുറഞ്ഞ മുൻഗണനയുണ്ട്.

തൂൺ 4: മെമ്മറി മാനേജ്മെന്റ്

മെമ്മറി ലീക്കുകൾ നിശബ്ദ പ്രകടന കൊലയാളികളാണ്. കാലക്രമേണ ഒരു ആപ്ലിക്കേഷൻ ക്രമേണ വേഗത കുറയുന്നതിന് അവ കാരണമാകും, ഒടുവിൽ ക്രാഷുകളിലേക്ക് നയിക്കും, പ്രത്യേകിച്ചും മെമ്മറി പരിമിതമായ ഉപകരണങ്ങളിൽ.

മെമ്മറി ലീക്കുകൾ തടയുന്നു

ലൈഫ് സൈക്കിൾ തൂണിൽ സൂചിപ്പിച്ചതുപോലെ, വെബ് കമ്പോണന്റുകളിലെ മെമ്മറി ലീക്കുകളുടെ ഏറ്റവും സാധാരണമായ ഉറവിടം disconnectedCallback-ൽ വൃത്തിയാക്കുന്നതിൽ പരാജയപ്പെടുന്നതാണ്. ഒരു കമ്പോണന്റ് DOM-ൽ നിന്ന് നീക്കം ചെയ്യപ്പെടുമ്പോൾ, അതിലേക്കോ അതിന്റെ ആന്തരിക നോഡുകളിലൊന്നിലേക്കോ ഉള്ള ഒരു റഫറൻസ് ഇപ്പോഴും നിലനിൽക്കുന്നുവെങ്കിൽ (ഉദാഹരണത്തിന്, ഒരു ഗ്ലോബൽ ഇവന്റ് ലിസണറുടെ കോൾബാക്കിൽ), ഗാർബേജ് കളക്ടർക്ക് അതിന്റെ മെമ്മറി വീണ്ടെടുക്കാൻ കഴിയില്ല. ഇതിനെ "ഡിറ്റാച്ച്ഡ് DOM ട്രീ" എന്ന് പറയുന്നു.

തന്ത്രം: ക്ലീനപ്പിനെക്കുറിച്ച് അച്ചടക്കം പാലിക്കുക. കമ്പോണന്റ് കണക്റ്റുചെയ്യുമ്പോൾ നിങ്ങൾ ഉണ്ടാക്കുന്ന ഓരോ addEventListener, setInterval, അല്ലെങ്കിൽ സബ്സ്ക്രിപ്ഷനും, അത് വിച്ഛേദിക്കുമ്പോൾ അനുബന്ധമായ removeEventListener, clearInterval, അല്ലെങ്കിൽ unsubscribe കോൾ ഉണ്ടെന്ന് ഉറപ്പാക്കുക.

കാര്യക്ഷമമായ ഡാറ്റാ മാനേജ്മെന്റും സ്റ്റേറ്റും

വലിയതും സങ്കീർണ്ണവുമായ ഡാറ്റാ ഘടനകൾ റെൻഡറിംഗിൽ നേരിട്ട് ഉൾപ്പെട്ടിട്ടില്ലെങ്കിൽ അവ കമ്പോണന്റ് ഇൻസ്റ്റൻസിൽ നേരിട്ട് സംഭരിക്കുന്നത് ഒഴിവാക്കുക. ഇത് കമ്പോണന്റിന്റെ മെമ്മറി ഫൂട്ട്പ്രിന്റ് വർദ്ധിപ്പിക്കുന്നു. പകരം, സമർപ്പിത സ്റ്റോറുകളിലോ സേവനങ്ങളിലോ ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുക, കമ്പോണന്റിന് റെൻഡർ ചെയ്യാൻ ആവശ്യമുള്ളപ്പോൾ മാത്രം ആവശ്യമായ ഡാറ്റ നൽകുക.

തൂൺ 5: ടൂളിംഗും അളവുകളും

"നിങ്ങൾക്ക് അളക്കാൻ കഴിയാത്തത് നിങ്ങൾക്ക് ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയില്ല" എന്ന പ്രശസ്തമായ ഉദ്ധരണി ഈ തൂണിന്റെ അടിസ്ഥാനമാണ്. ഊഹങ്ങളും അനുമാനങ്ങളും യഥാർത്ഥ ഡാറ്റയ്ക്ക് പകരമാവില്ല.

ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ

നിങ്ങളുടെ ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ ഡെവലപ്പർ ടൂളുകൾ നിങ്ങളുടെ ഏറ്റവും ശക്തരായ സഹായികളാണ്.

• പെർഫോമൻസ് ടാബ്: നിങ്ങളുടെ പേജിന്റെ ലോഡിന്റെയോ ഒരു പ്രത്യേക ഇടപെടലിന്റെയോ ഒരു പ്രകടന പ്രൊഫൈൽ റെക്കോർഡ് ചെയ്യുക. ദൈർഘ്യമേറിയ ടാസ്ക്കുകൾക്കായി (ഫ്ലേം ചാർട്ടിലെ മഞ്ഞ ബ്ലോക്കുകൾ) നോക്കുകയും അവ നിങ്ങളുടെ കമ്പോണന്റിന്റെ ലൈഫ് സൈക്കിൾ രീതികളിലേക്ക് ട്രേസ് ചെയ്യുകയും ചെയ്യുക. ലേഔട്ട് ത്രാഷിംഗ് (ആവർത്തിച്ചുള്ള പർപ്പിൾ "ലേഔട്ട്" ബ്ലോക്കുകൾ) തിരിച്ചറിയുക.
• മെമ്മറി ടാബ്: ഒരു കമ്പോണന്റ് പേജിൽ ചേർക്കുന്നതിനും നീക്കം ചെയ്യുന്നതിനും മുമ്പും ശേഷവും ഹീപ്പ് സ്നാപ്പ്ഷോട്ടുകൾ എടുക്കുക. മെമ്മറി ഉപയോഗം അതിന്റെ യഥാർത്ഥ അവസ്ഥയിലേക്ക് മടങ്ങിയില്ലെങ്കിൽ, സാധ്യതയുള്ള ലീക്കുകൾ കണ്ടെത്താൻ "ഡിറ്റാച്ച്ഡ്" DOM ട്രീകൾക്കായി ഫിൽട്ടർ ചെയ്യുക.

ലൈറ്റ്ഹൗസും കോർ വെബ് വൈറ്റൽസ് നിരീക്ഷണവും

നിങ്ങളുടെ പേജുകളിൽ പതിവായി ഗൂഗിൾ ലൈറ്റ്ഹൗസ് ഓഡിറ്റുകൾ നടത്തുക. ഇത് ഒരു ഉയർന്ന തലത്തിലുള്ള സ്കോറും പ്രവർത്തനക്ഷമമായ ശുപാർശകളും നൽകുന്നു. ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ സമയം കുറയ്ക്കുന്നതിനും, റെൻഡർ-ബ്ലോക്കിംഗ് റിസോഴ്സുകൾ ഇല്ലാതാക്കുന്നതിനും, ചിത്രങ്ങൾ ശരിയായി വലുപ്പം മാറ്റുന്നതിനും ഉള്ള അവസരങ്ങളിൽ പ്രത്യേക ശ്രദ്ധ നൽകുക - ഇവയെല്ലാം കമ്പോണന്റ് പ്രകടനവുമായി ബന്ധപ്പെട്ടതാണ്.

റിയൽ യൂസർ മോണിറ്ററിംഗ് (RUM)

ലാബ് ഡാറ്റ നല്ലതാണ്, പക്ഷേ യഥാർത്ഥ ലോക ഡാറ്റ മികച്ചതാണ്. RUM ടൂളുകൾ നിങ്ങളുടെ യഥാർത്ഥ ഉപയോക്താക്കളിൽ നിന്ന് വ്യത്യസ്ത ഉപകരണങ്ങൾ, നെറ്റ്‌വർക്കുകൾ, ഭൂമിശാസ്ത്രപരമായ ലൊക്കേഷനുകൾ എന്നിവയിലുടനീളം പ്രകടന മെട്രിക്കുകൾ ശേഖരിക്കുന്നു. പ്രത്യേക സാഹചര്യങ്ങളിൽ മാത്രം ദൃശ്യമാകുന്ന പ്രകടന പ്രശ്നങ്ങൾ തിരിച്ചറിയാൻ ഇത് നിങ്ങളെ സഹായിക്കും. നിർദ്ദിഷ്ട കമ്പോണന്റുകൾക്ക് ഇന്ററാക്ടീവ് ആകാൻ എത്ര സമയമെടുക്കുമെന്ന് അളക്കാൻ നിങ്ങൾക്ക് PerformanceObserver API ഉപയോഗിച്ച് കസ്റ്റം മെട്രിക്കുകൾ ഉണ്ടാക്കാനും കഴിയും.

കേസ് സ്റ്റഡി: ഒരു പ്രൊഡക്റ്റ് കാർഡ് കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

ഒരു സാധാരണ യഥാർത്ഥ ലോക സാഹചര്യത്തിലേക്ക് നമ്മുടെ ഫ്രെയിംവർക്ക് പ്രയോഗിക്കാം: നിരവധി <product-card> വെബ് കമ്പോണന്റുകളുള്ള ഒരു പ്രൊഡക്റ്റ് ലിസ്റ്റിംഗ് പേജ്, ഇത് വേഗത കുറഞ്ഞ പ്രാരംഭ ലോഡിനും ജാങ്കി സ്ക്രോളിംഗിനും കാരണമാകുന്നു.

പ്രശ്നമുള്ള കമ്പോണന്റ്:

• ഒരു ഉയർന്ന റെസല്യൂഷനുള്ള ഉൽപ്പന്ന ചിത്രം ആകാംക്ഷയോടെ ലോഡ് ചെയ്യുന്നു.
• അതിന്റെ ഷാഡോ ഡോമിനുള്ളിൽ ഒരു ഇൻലൈൻ <style> ടാഗിൽ അതിന്റെ സ്റ്റൈലുകൾ നിർവചിക്കുന്നു.
• അതിന്റെ മുഴുവൻ DOM ഘടനയും connectedCallback-ൽ സിൻക്രണസായി നിർമ്മിക്കുന്നു.
• അതിന്റെ ജാവാസ്ക്രിപ്റ്റ് ഒരു വലിയ, ഒരൊറ്റ ആപ്ലിക്കേഷൻ ബണ്ടിലിന്റെ ഭാഗമാണ്.

ഒപ്റ്റിമൈസേഷൻ തന്ത്രം:

1. (തൂൺ 3 - നെറ്റ്‌വർക്ക്) ആദ്യം, ഞങ്ങൾ product-card.js നിർവചനം അതിന്റേതായ ഫയലിലേക്ക് വേർതിരിക്കുകയും ഫോൾഡിന് താഴെയുള്ള എല്ലാ കാർഡുകൾക്കും ഒരു IntersectionObserver ഉപയോഗിച്ച് ലേസി ലോഡിംഗ് നടപ്പിലാക്കുകയും ചെയ്യുന്നു.
2. (തൂൺ 3 - നെറ്റ്‌വർക്ക്) കമ്പോണന്റിനുള്ളിൽ, ഓഫ്-സ്ക്രീൻ ചിത്രങ്ങളുടെ ലോഡിംഗ് മാറ്റിവയ്ക്കുന്നതിന് ഞങ്ങൾ <img> ടാഗ് നേറ്റീവ് loading="lazy" ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാൻ മാറ്റുന്നു.
3. (തൂൺ 2 - റെൻഡറിംഗ്) ഞങ്ങൾ കമ്പോണന്റിന്റെ CSS-നെ ഒരൊറ്റ, പങ്കിട്ട CSSStyleSheet ഒബ്‌ജക്റ്റിലേക്ക് റീഫാക്ടർ ചെയ്യുകയും adoptedStyleSheets ഉപയോഗിച്ച് അത് പ്രയോഗിക്കുകയും ചെയ്യുന്നു. ഇത് 100-ൽ അധികം കാർഡുകൾക്ക് സ്റ്റൈൽ പാഴ്സിംഗ് സമയവും മെമ്മറിയും ഗണ്യമായി കുറയ്ക്കുന്നു.
4. (തൂൺ 2 - റെൻഡറിംഗ്) ഞങ്ങൾ DOM ക്രിയേഷൻ ലോജിക് ഒരു ക്ലോൺ ചെയ്ത <template> എലമെന്റിന്റെ ഉള്ളടക്കം ഉപയോഗിക്കാൻ റീഫാക്ടർ ചെയ്യുന്നു, ഇത് createElement കോളുകളുടെ ഒരു പരമ്പരയേക്കാൾ കൂടുതൽ പ്രകടനക്ഷമമാണ്.
5. (തൂൺ 5 - ടൂളിംഗ്) പേജ് ലോഡിലെ ദൈർഘ്യമേറിയ ടാസ്ക് കുറഞ്ഞുവെന്നും സ്ക്രോളിംഗ് ഇപ്പോൾ സുഗമമാണെന്നും, ഫ്രെയിമുകൾ ഡ്രോപ്പ് ചെയ്യാതെയാണെന്നും സ്ഥിരീകരിക്കാൻ ഞങ്ങൾ പെർഫോമൻസ് പ്രൊഫൈലർ ഉപയോഗിക്കുന്നു.

ഫലം: ഗണ്യമായി മെച്ചപ്പെട്ട Largest Contentful Paint (LCP), കാരണം പ്രാരംഭ വ്യൂപോർട്ട് ഓഫ്-സ്ക്രീൻ കമ്പോണന്റുകളും ചിത്രങ്ങളും തടസ്സപ്പെടുത്തുന്നില്ല. മെച്ചപ്പെട്ട Time to Interactive (TTI) ഉം സുഗമമായ സ്ക്രോളിംഗ് അനുഭവവും, ഇത് എല്ലായിടത്തുമുള്ള എല്ലാവർക്കും മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം നൽകുന്നു.

ഉപസംഹാരം: ഒരു പ്രകടനം-പ്രഥമ സംസ്കാരം കെട്ടിപ്പടുക്കൽ

വെബ് കമ്പോണന്റ് പ്രകടനം ഒരു പ്രോജക്റ്റിന്റെ അവസാനം ചേർക്കേണ്ട ഒരു സവിശേഷതയല്ല; ഇത് വികസന ലൈഫ് സൈക്കിളിലുടനീളം സംയോജിപ്പിക്കേണ്ട ഒരു അടിസ്ഥാന തത്വമാണ്. ഇവിടെ അവതരിപ്പിച്ച ഫ്രെയിംവർക്ക് - ലൈഫ് സൈക്കിൾ, റെൻഡറിംഗ്, നെറ്റ്‌വർക്ക്, മെമ്മറി, ടൂളിംഗ് എന്നീ അഞ്ച് തൂണുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് - ഉയർന്ന പ്രകടനമുള്ള കമ്പോണന്റുകൾ നിർമ്മിക്കുന്നതിനുള്ള ആവർത്തിക്കാവുന്നതും അളക്കാവുന്നതുമായ ഒരു രീതിശാസ്ത്രം നൽകുന്നു.

ഈ ചിന്താഗതി സ്വീകരിക്കുന്നത് കാര്യക്ഷമമായ കോഡ് എഴുതുന്നതിനേക്കാൾ കൂടുതലാണ്. ഇതിനർത്ഥം പ്രകടന ബജറ്റുകൾ സ്ഥാപിക്കുക, നിങ്ങളുടെ തുടർച്ചയായ സംയോജന (CI) പൈപ്പ്ലൈനുകളിൽ പ്രകടന വിശകലനം സംയോജിപ്പിക്കുക, ഓരോ ഡെവലപ്പർക്കും അന്തിമ ഉപയോക്തൃ അനുഭവത്തിൽ ഉത്തരവാദിത്തം തോന്നുന്ന ഒരു സംസ്കാരം വളർത്തുക എന്നിവയാണ്. അങ്ങനെ ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് വെബ് കമ്പോണന്റുകളുടെ വാഗ്ദാനം യഥാർത്ഥത്തിൽ നിറവേറ്റാൻ കഴിയും: ഒരു ആഗോള പ്രേക്ഷകർക്കായി വേഗതയേറിയതും കൂടുതൽ മോഡുലാറും കൂടുതൽ ആസ്വാദ്യകരവുമായ ഒരു വെബ് നിർമ്മിക്കുക.