സിഎസ്എസ് കണ്ടെയ്നർ ക്വറി പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷൻ എഞ്ചിൻ: ക്വറി പ്രോസസ്സിംഗ് മെച്ചപ്പെടുത്തൽ

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

കണ്ടെയ്നർ ക്വറികളുടെ പ്രകടനത്തെ ബാധിക്കുന്ന കാര്യങ്ങൾ മനസ്സിലാക്കാം

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

• ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുന്നത്.
• കണ്ടെയ്നറിൽ ഉള്ളടക്കം ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്യുന്നത്.
• പാരന്റ് എലമെന്റിന്റെ ലേഔട്ടിൽ മാറ്റങ്ങൾ വരുത്തുന്നത്.

ഓരോ പുനർ-മൂല്യനിർണ്ണയവും സ്റ്റൈലുകളുടെ പുനർ-കണക്കുകൂട്ടലിനും പേജിന്റെ റീഫ്ലോയ്ക്കും കാരണമായേക്കാം, ഇത് സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്ക് കമ്പ്യൂട്ടേഷണലായി ചെലവേറിയതാണ്. അമിതമായ റീഫ്ലോകൾ താഴെ പറയുന്ന പ്രശ്നങ്ങൾക്ക് കാരണമാകും:

• കൂടിയ സിപിയു ഉപയോഗം.
• സ്ക്രോൾ ചെയ്യുമ്പോൾ ഉണ്ടാകുന്ന തടസ്സങ്ങൾ (Janky scrolling).
• പേജ് ലോഡ് ആകാനുള്ള കാലതാമസം.
• മോശം ഉപയോക്തൃ അനുഭവം.

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

ക്വറി പ്രോസസ്സിംഗ് മെച്ചപ്പെടുത്തുന്നതിനുള്ള മാർഗ്ഗങ്ങൾ

1. ക്വറിയുടെ സങ്കീർണ്ണത കുറയ്ക്കുക

നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറികളുടെ സങ്കീർണ്ണത ബ്രൗസറിന് അവയെ വിലയിരുത്താൻ എടുക്കുന്ന സമയത്തെ നേരിട്ട് ബാധിക്കുന്നു. ലളിതമായ ക്വറികൾ സാധാരണയായി വേഗത്തിൽ പ്രോസസ്സ് ചെയ്യാൻ സാധിക്കും. ക്വറിയുടെ സങ്കീർണ്ണത കുറയ്ക്കുന്നതിനുള്ള ചില മാർഗ്ഗങ്ങൾ ഇതാ:

• അമിതമായി സ്പെസിഫിക് ആയ സെലക്ടറുകൾ ഒഴിവാക്കുക: നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറിക്കുള്ളിൽ ആഴത്തിൽ നെസ്റ്റ് ചെയ്ത സെലക്ടറുകൾ ഉപയോഗിക്കുന്നതിന് പകരം, ക്ലാസുകളോ ഐഡികളോ ഉപയോഗിച്ച് നേരിട്ട് എലമെന്റുകളെ ടാർഗെറ്റ് ചെയ്യുക.
• ഏറ്റവും ലളിതമായ വ്യവസ്ഥകൾ ഉപയോഗിക്കുക: സങ്കീർണ്ണമായ എക്സ്പ്രഷനുകളേക്കാൾ ലളിതമായ `min-width` അല്ലെങ്കിൽ `max-width` വ്യവസ്ഥകൾക്ക് മുൻഗണന നൽകുക. ഉദാഹരണത്തിന്, `(min-width: 300px and max-width: 600px)` എന്നതിന് പകരം, സാധ്യമെങ്കിൽ `min-width: 300px`, `max-width: 600px` എന്നിവ ഉപയോഗിച്ച് വെവ്വേറെ ക്വറികൾ ഉപയോഗിക്കുകയും നിങ്ങളുടെ സിഎസ്എസ് അതിനനുസരിച്ച് ഘടനാപരമാക്കുകയും ചെയ്യുക. ഇത് പലപ്പോഴും മികച്ച പ്രകടനം നൽകും, പ്രത്യേകിച്ച് പഴയ ബ്രൗസറുകളിൽ.
• ആവർത്തനമുള്ള ക്വറികൾ ഏകീകരിക്കുക: ഡ്യൂപ്ലിക്കേറ്റ് അല്ലെങ്കിൽ ഓവർലാപ്പുചെയ്യുന്ന കണ്ടെയ്നർ ക്വറികൾ തിരിച്ചറിഞ്ഞ് ഒഴിവാക്കുക. ഒന്നിലധികം ഡെവലപ്പർമാർ ഒരേ പ്രോജക്റ്റിൽ പ്രവർത്തിക്കുമ്പോൾ ഇത് ഒരു സാധാരണ പ്രശ്നമാണ്. കോഡ് റിവ്യൂ പ്രക്രിയകളിൽ ആവർത്തനമുള്ള അല്ലെങ്കിൽ വൈരുദ്ധ്യമുള്ള കണ്ടെയ്നർ ക്വറി ഡിക്ലറേഷനുകൾ പ്രത്യേകം ശ്രദ്ധിക്കണം.

ഉദാഹരണം:

കാര്യക്ഷമമല്ലാത്തത്:

            .container:has(> .article) {
  container-type: inline-size;
}

.container:has(> .article) .article__title {
  \@container (min-width: 500px) {
    font-size: 1.2em;
  }
}

            

              
                Copy
              
            
          

കാര്യക്ഷമമായത്:

            .container {
  container-type: inline-size;
}

.article__title {
  \@container (min-width: 500px) {
    font-size: 1.2em;
  }
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, രണ്ടാമത്തെ സെലക്ടറിന് `:has(> .article)` എന്ന ഭാഗം ആവർത്തിക്കേണ്ടതില്ല, കാരണം കണ്ടെയ്നർ-ടൈപ്പ് ഡിക്ലറേഷൻ അത് ആർട്ടിക്കിൾ ചൈൽഡ് ഉള്ള കണ്ടെയ്നറിന് മാത്രമായി ഇതിനകം തന്നെ ബാധകമാക്കിയിട്ടുണ്ട്. `:has(> .article)` എന്ന ഭാഗം നീക്കം ചെയ്തതിലൂടെ ഞങ്ങൾ കണ്ടെയ്നർ ക്വറി നിയമത്തിൻ്റെ സ്പെസിഫിസിറ്റിയും സങ്കീർണ്ണതയും കുറച്ചു.

2. കണ്ടെയ്നർ ക്വറി അപ്ഡേറ്റുകൾ ഡിബൗൺസ് ചെയ്യുകയും ത്രോട്ടിൽ ചെയ്യുകയും ചെയ്യുക

കണ്ടെയ്നറിന്റെ വലുപ്പം വേഗത്തിൽ മാറുന്ന സാഹചര്യങ്ങളിൽ (ഉദാഹരണത്തിന്, വിൻഡോ റീസൈസ് ചെയ്യുമ്പോൾ), കണ്ടെയ്നർ ക്വറികൾ ചെറിയ സമയത്തിനുള്ളിൽ പലതവണ ട്രിഗർ ചെയ്യപ്പെട്ടേക്കാം. ഇത് പ്രകടന പ്രശ്നങ്ങളിലേക്ക് നയിച്ചേക്കാം. ഡിബൗൺസിംഗ്, ത്രോട്ടിലിംഗ് ടെക്നിക്കുകൾ ഈ പ്രശ്നം ലഘൂകരിക്കാൻ സഹായിക്കും.

• ഡിബൗൺസിംഗ് (Debouncing): ഒരു ഫംഗ്ഷൻ അവസാനമായി വിളിച്ചതിന് ശേഷം ഒരു നിശ്ചിത സമയം കഴിയുന്നത് വരെ അതിന്റെ എക്സിക്യൂഷൻ വൈകിപ്പിക്കുന്നു. തുടർച്ചയായ ഇവന്റുകൾക്ക് ശേഷം ഒരു തവണ മാത്രം ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യാൻ ആഗ്രഹിക്കുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്. ലോഡാഷ് പോലുള്ള ലൈബ്രറികൾ എളുപ്പത്തിൽ ഉപയോഗിക്കാവുന്ന ഡിബൗൺസിംഗ് ഫംഗ്ഷനുകൾ നൽകുന്നു.
• ത്രോട്ടിലിംഗ് (Throttling): ഒരു ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യാവുന്ന നിരക്ക് പരിമിതപ്പെടുത്തുന്നു. ഒരു ഫംഗ്ഷൻ കൂടുതൽ തവണ വിളിക്കപ്പെട്ടാലും, കൃത്യമായ ഇടവേളകളിൽ അത് എക്സിക്യൂട്ട് ചെയ്യാൻ ആഗ്രഹിക്കുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്. വീണ്ടും, ലോഡാഷ് സൗകര്യപ്രദമായ ത്രോട്ടിലിംഗ് ഫംഗ്ഷനുകൾ വാഗ്ദാനം ചെയ്യുന്നു.

ഈ ടെക്നിക്കുകൾ സാധാരണയായി ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ചാണ് നടപ്പിലാക്കുന്നത്. കണ്ടെയ്നർ ക്വറി അപ്ഡേറ്റ് ചെയ്യുന്ന ഒരു ഫംഗ്ഷൻ ഡിബൗൺസ് ചെയ്യാൻ ലോഡാഷ് ഉപയോഗിക്കുന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

            import { debounce } from 'lodash';

const updateContainerQueries = () => {
  // Code to update container queries (e.g., by manually triggering a style recalculation)
  // This might involve adding/removing classes based on container size.
  // This part is framework-dependent and can vary greatly. For instance:
  const container = document.querySelector('.my-container');
  if (!container) return;
  const width = container.offsetWidth;
  if (width < 500) {
    container.classList.add('small');
    container.classList.remove('large');
  } else {
    container.classList.remove('small');
    container.classList.add('large');
  }
};

const debouncedUpdateContainerQueries = debounce(updateContainerQueries, 250); // Delay of 250ms

window.addEventListener('resize', debouncedUpdateContainerQueries);

            

              
                Copy
              
            
          

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

3. പ്ലേസ്‌ഹോൾഡർ സൈസിംഗിനായി `contain-intrinsic-size` ഉപയോഗിക്കുക

ഒരു കണ്ടെയ്നറിന്റെ വലുപ്പം അതിന്റെ ഉള്ളടക്കത്തെയും, ഉള്ളടക്കത്തിന്റെ വലുപ്പം കണ്ടെയ്നറിനെയും ആശ്രയിക്കുമ്പോൾ (ഒരു ചാക്രിക ആശ്രിതത്വം), അന്തിമ വലുപ്പം നിർണ്ണയിക്കാൻ ബ്രൗസറിന് ഒന്നിലധികം ലേഔട്ട് പാസുകൾ നടത്തേണ്ടിവന്നേക്കാം. ഇത് കാര്യമായ പ്രകടന ഓവർഹെഡിന് കാരണമാകും. `contain-intrinsic-size` പ്രോപ്പർട്ടി, ഉള്ളടക്കം ലോഡ് ചെയ്യുന്നതിനോ ലേഔട്ട് ചെയ്യുന്നതിനോ മുൻപ് കണ്ടെയ്നറിന് ഒരു പ്ലേസ്‌ഹോൾഡർ വലുപ്പം നൽകി ഈ ചാക്രികത തകർക്കാൻ സഹായിക്കും.

ഒരു എലമെന്റിന് ഉള്ളടക്കം ഇല്ലാത്തപ്പോൾ അതിന്റെ "ഇൻട്രിൻസിക്" വലുപ്പം `contain-intrinsic-size` പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു, ഇത് ഉള്ളടക്കം യഥാർത്ഥത്തിൽ റെൻഡർ ചെയ്യുന്നതിന് മുൻപ് അതിന്റെ വലുപ്പം കണക്കാക്കാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു. `contain: content` അല്ലെങ്കിൽ `contain: size` ഉള്ള എലമെന്റുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

            .container {
  container-type: inline-size;
  contain: content; /* Or contain: size */
  contain-intrinsic-size: 300px; /* Provide a placeholder width */
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, കണ്ടെയ്നറിന്റെ ഉള്ളടക്കം ലോഡ് ചെയ്യുന്നതിന് മുൻപ് തന്നെ, അതിന് 300px വീതിയിൽ റെൻഡർ ചെയ്യപ്പെടും. ഇത് ഒന്നിലധികം ലേഔട്ട് പാസുകൾ ഒഴിവാക്കാനും പ്രകടനം മെച്ചപ്പെടുത്താനും ബ്രൗസറിനെ സഹായിക്കുന്നു, പ്രത്യേകിച്ച് ഡൈനാമിക്കായി ലോഡ് ചെയ്യുന്ന ഉള്ളടക്കവുമായി പ്രവർത്തിക്കുമ്പോൾ.

പരിഗണനകൾ:

• `contain-intrinsic-size` എന്നതിന്റെ മൂല്യം കണ്ടെയ്നറിന്റെ പ്രതീക്ഷിക്കുന്ന വലുപ്പത്തിന്റെ ന്യായമായ ഒരു കണക്കായിരിക്കണം. യഥാർത്ഥ ഉള്ളടക്കം ഗണ്യമായി വലുതോ ചെറുതോ ആണെങ്കിൽ, അത് ഇപ്പോഴും ലേഔട്ട് ഷിഫ്റ്റുകൾക്ക് കാരണമാകും.
• `contain: content` അല്ലെങ്കിൽ `contain: size` എന്നിവയുമായി ചേർത്ത് ഉപയോഗിക്കുമ്പോഴാണ് ഈ പ്രോപ്പർട്ടി ഏറ്റവും ഫലപ്രദം. ഇത് കണ്ടെയ്നറിനെ അതിന്റെ ചുറ്റുപാടുകളിൽ നിന്ന് വേർതിരിക്കുകയും മറ്റ് എലമെന്റുകളുടെ ലേഔട്ടിനെ ബാധിക്കുന്നത് തടയുകയും ചെയ്യുന്നു.

4. ഫീച്ചർ ഡിറ്റക്ഷനും പോളിഫില്ലുകളും

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

ഉദാഹരണം:

            if (!('container' in document.documentElement.style)) {
  // Container queries are not supported, load a polyfill
  const script = document.createElement('script');
  script.src = 'path/to/container-query-polyfill.js';
  document.head.appendChild(script);
}

            

              
                Copy
              
            
          

അല്ലെങ്കിൽ, കണ്ടെയ്നർ ക്വറികളെ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്കായി ബദൽ സ്റ്റൈലുകൾ നൽകാൻ നിങ്ങൾക്ക് സിഎസ്എസ് ഫീച്ചർ ക്വറികൾ (`\@supports`) ഉപയോഗിക്കാം. ഇത് വ്യത്യസ്ത ബ്രൗസറുകളിലുടനീളം സ്ഥിരതയുള്ള ഉപയോക്തൃ അനുഭവം നിലനിർത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

            \@supports not (container-type: inline-size) {
  /* Styles for browsers that don't support container queries */
  .container .element {
    font-size: 16px; /* Fallback style */
  }
}

\@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
  .container .element {
    \@container (min-width: 500px) {
      font-size: 20px; /* Container query style */
    }
  }
}

            

              
                Copy
              
            
          

ഈ സമീപനം, നേറ്റീവ് കണ്ടെയ്നർ ക്വറി പിന്തുണയില്ലാത്ത ബ്രൗസറുകളിൽ പോലും നിങ്ങളുടെ വെബ്സൈറ്റ് പ്രവർത്തനക്ഷമവും കാഴ്ചയിൽ ആകർഷകവുമായി നിലനിൽക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

കാര്യക്ഷമമായ സിഎസ്എസ് സെലക്ടർ ഉപയോഗം

സിഎസ്എസ് സെലക്ടറുകളുടെ തിരഞ്ഞെടുപ്പ് കണ്ടെയ്നർ ക്വറിയുടെ പ്രകടനത്തെ കാര്യമായി സ്വാധീനിക്കും. കാര്യക്ഷമമായ സെലക്ടറുകൾ ബ്രൗസർ വേഗത്തിൽ പ്രോസസ്സ് ചെയ്യുന്നു, ഇത് സ്റ്റൈലുകൾ പുനർ-കണക്കാക്കുന്നതിനുള്ള മൊത്തം സമയം കുറയ്ക്കുന്നു.

1. സെലക്ടർ സ്പെസിഫിസിറ്റി കുറയ്ക്കുക

ഒരേ എലമെന്റിൽ ഒന്നിലധികം നിയമങ്ങൾ പ്രയോഗിക്കുമ്പോൾ ഏത് സിഎസ്എസ് നിയമത്തിനാണ് മുൻഗണന എന്ന് സെലക്ടർ സ്പെസിഫിസിറ്റി നിർണ്ണയിക്കുന്നു. കൂടുതൽ സ്പെസിഫിക് ആയ സെലക്ടറുകൾക്ക് കുറഞ്ഞ സ്പെസിഫിക് ആയ സെലക്ടറുകളേക്കാൾ കമ്പ്യൂട്ടേഷണൽ ചെലവ് കൂടുതലാണ്. നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറി സെലക്ടറുകളിൽ അനാവശ്യമായ സ്പെസിഫിസിറ്റി ഒഴിവാക്കുക.

ഉദാഹരണം:

കാര്യക്ഷമമല്ലാത്തത്:

            .container div.article p.article__text {
  \@container (min-width: 500px) {
    font-size: 1.1em;
  }
}

            

              
                Copy
              
            
          

കാര്യക്ഷമമായത്:

            .article__text {
  \@container (min-width: 500px) {
    font-size: 1.1em;
  }
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, രണ്ടാമത്തെ സെലക്ടർ ആദ്യത്തേതിനേക്കാൾ വളരെ ലളിതവും കുറഞ്ഞ സ്പെസിഫിക്കുമാണ്, ഇത് വിലയിരുത്താൻ വേഗത്തിലാക്കുന്നു. എലമെന്റുകളെ ഇങ്ങനെ ചെറുതായി ടാർഗെറ്റുചെയ്യാൻ തനതായ പേരുകളുള്ള ക്ലാസുകൾ നിങ്ങൾക്കുണ്ടെന്ന് ഉറപ്പാക്കുക.

2. യൂണിവേഴ്സൽ സെലക്ടർ (*) ഒഴിവാക്കുക

യൂണിവേഴ്സൽ സെലക്ടർ (`*`) പേജിലെ എല്ലാ എലമെന്റുകളുമായി പൊരുത്തപ്പെടുന്നു. ഒരു കണ്ടെയ്നർ ക്വറിക്കുള്ളിൽ ഇത് ഉപയോഗിക്കുന്നത് വളരെ കാര്യക്ഷമമല്ലാത്ത ഒന്നാണ്, കാരണം ഇത് എല്ലാ എലമെന്റുകൾക്കുമായി ക്വറി വിലയിരുത്താൻ ബ്രൗസറിനെ നിർബന്ധിക്കുന്നു. നിങ്ങളുടെ കണ്ടെയ്നർ ക്വറികളിൽ യൂണിവേഴ്സൽ സെലക്ടർ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.

ഉദാഹരണം:

കാര്യക്ഷമമല്ലാത്തത്:

            .container * {
  \@container (min-width: 500px) {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

പകരം, കണ്ടെയ്നർ ക്വറിക്കുള്ളിൽ സ്റ്റൈൽ ചെയ്യേണ്ട നിർദ്ദിഷ്ട എലമെന്റുകളെ ടാർഗെറ്റുചെയ്യുക.

കാര്യക്ഷമമായത്:

            .container .article, .container .sidebar {
  \@container (min-width: 500px) {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

3. `content-visibility` പ്രോപ്പർട്ടി പ്രയോജനപ്പെടുത്തുക

`content-visibility` പ്രോപ്പർട്ടി ഒരു എലമെന്റിന്റെ ഉള്ളടക്കം റെൻഡർ ചെയ്യണമോ വേണ്ടയോ എന്ന് നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് `auto` ആയി സജ്ജമാക്കുമ്പോൾ, ഒരു എലമെന്റിന്റെ ഉള്ളടക്കം ഓഫ്സ്ക്രീൻ ആണെങ്കിൽ ബ്രൗസർ അത് റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കും. ഇത് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തും, പ്രത്യേകിച്ചും ധാരാളം കണ്ടെയ്നർ ക്വറികളുള്ള സങ്കീർണ്ണമായ ലേഔട്ടുകളിൽ.

ഉദാഹരണം:

            .offscreen-content {
  content-visibility: auto;
}

            

              
                Copy
              
            
          

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

ബ്രൗസർ റീഫ്ലോകൾ കുറയ്ക്കുക

പേജിന്റെ ലേഔട്ട് മാറുമ്പോൾ സംഭവിക്കുന്ന കമ്പ്യൂട്ടേഷണലായി ചെലവേറിയ പ്രവർത്തനങ്ങളാണ് ബ്രൗസർ റീഫ്ലോകൾ. എലമെന്റുകളുടെ വലുപ്പത്തിലോ സ്ഥാനത്തിലോ മാറ്റങ്ങൾ വരുത്തിയാൽ കണ്ടെയ്നർ ക്വറികൾ റീഫ്ലോകൾക്ക് കാരണമാകും. കണ്ടെയ്നർ ക്വറിയുടെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് റീഫ്ലോകൾ കുറയ്ക്കുന്നത് നിർണായകമാണ്.

1. `width`, `height` എന്നിവയ്ക്ക് പകരം `transform` ഉപയോഗിക്കുക

ഒരു എലമെന്റിന്റെ `width` അല്ലെങ്കിൽ `height` മാറ്റുന്നത് ഒരു റീഫ്ലോയ്ക്ക് കാരണമാകും, കാരണം ഇത് ചുറ്റുമുള്ള എലമെന്റുകളുടെ ലേഔട്ടിനെ ബാധിക്കുന്നു. എലമെന്റുകളുടെ വലുപ്പം മാറ്റാനോ സ്ഥാനം മാറ്റാനോ `transform` പ്രോപ്പർട്ടി (ഉദാഹരണത്തിന്, `scale()`, `translate()`) ഉപയോഗിക്കുന്നത് പലപ്പോഴും കൂടുതൽ മികച്ച പ്രകടനം നൽകുന്നു, കാരണം ഇത് മറ്റ് എലമെന്റുകളുടെ ലേഔട്ടിനെ ബാധിക്കുന്നില്ല.

ഉദാഹരണം:

കാര്യക്ഷമമല്ലാത്തത്:

            .element {
  \@container (min-width: 500px) {
    width: 200px;
  }
}

            

              
                Copy
              
            
          

കാര്യക്ഷമമായത്:

            .element {
  \@container (min-width: 500px) {
    transform: scaleX(1.2); /* Equivalent to increasing width by 20% */
  }
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `transform: scaleX()` ഉപയോഗിക്കുന്നത് റീഫ്ലോ ട്രിഗർ ചെയ്യുന്നത് ഒഴിവാക്കുന്നു, കാരണം ഇത് ചുറ്റുമുള്ള എലമെന്റുകളുടെ ലേഔട്ടിനെ ബാധിക്കുന്നില്ല.

2. ഫോഴ്സ്ഡ് സിൻക്രണസ് ലേഔട്ടുകൾ ഒഴിവാക്കുക

ഒരു ലേഔട്ട് മാറ്റുന്ന പ്രവർത്തനത്തിന് ശേഷം ജാവാസ്ക്രിപ്റ്റ് ലേഔട്ട് പ്രോപ്പർട്ടികൾ (ഉദാ. `offsetWidth`, `offsetHeight`) വായിക്കുമ്പോൾ ഒരു ഫോഴ്സ്ഡ് സിൻക്രണസ് ലേഔട്ട് സംഭവിക്കുന്നു. ഇത് ജാവാസ്ക്രിപ്റ്റ് തുടരുന്നതിന് മുൻപ് ഒരു ലേഔട്ട് കണക്കുകൂട്ടൽ നടത്താൻ ബ്രൗസറിനെ നിർബന്ധിക്കുന്നു, ഇത് പ്രകടനത്തിന് ഒരു തടസ്സമാകാം.

ഒരു കണ്ടെയ്നർ ക്വറിക്കുള്ളിൽ സ്റ്റൈലുകൾ മാറ്റിയ ഉടൻ ലേഔട്ട് പ്രോപ്പർട്ടികൾ വായിക്കുന്നത് ഒഴിവാക്കുക. പകരം, ഫോഴ്സ്ഡ് സിൻക്രണസ് ലേഔട്ടുകളുടെ എണ്ണം കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ ലേഔട്ട് റീഡുകളും റൈറ്റുകളും ബാച്ച് ചെയ്യുക.

ഉദാഹരണം:

ഒഴിവാക്കേണ്ടത്:

            .element {
  \@container (min-width: 500px) {
    width: 200px;
    // Immediately read the width, forcing a synchronous layout
    const elementWidth = element.offsetWidth;
    console.log('Width:', elementWidth);
  }
}

            

              
                Copy
              
            
          

പകരം, കണ്ടെയ്നർ ക്വറി പ്രയോഗിക്കുന്നതിന് മുൻപോ ശേഷമോ ലേഔട്ട് പ്രോപ്പർട്ടികൾ വായിക്കുക, അല്ലെങ്കിൽ അടുത്ത ഫ്രെയിം വരെ റീഡ് മാറ്റിവയ്ക്കാൻ ഒരു requestAnimationFrame ഉപയോഗിക്കുക.

3. സിഎസ്എസ് കണ്ടെയ്ൻമെന്റ് ഉപയോഗിക്കുക

`contain` പ്രോപ്പർട്ടി എലമെന്റുകളെ അവയുടെ ചുറ്റുപാടുകളിൽ നിന്ന് വേർതിരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് മറ്റ് എലമെന്റുകളുടെ ലേഔട്ടിനെ ബാധിക്കുന്നത് തടയുന്നു. ഇത് കണ്ടെയ്നർ ക്വറികൾ ട്രിഗർ ചെയ്യുന്ന റീഫ്ലോകളുടെ വ്യാപ്തി കുറയ്ക്കാൻ സഹായിക്കും.

`contain` പ്രോപ്പർട്ടിക്ക് നിരവധി മൂല്യങ്ങളുണ്ട്, അവയിൽ ചിലത്:

• `contain: none;` (ഡിഫോൾട്ട്): കണ്ടെയ്ൻമെന്റ് പ്രയോഗിക്കുന്നില്ല.
• `contain: strict;`: എല്ലാ കണ്ടെയ്ൻമെന്റ് പ്രോപ്പർട്ടികളും (size, layout, style, paint) പ്രയോഗിക്കുന്നു.
• `contain: content;`: layout, style, paint കണ്ടെയ്ൻമെന്റ് പ്രയോഗിക്കുന്നു.
• `contain: size;`: സൈസ് കണ്ടെയ്ൻമെന്റ് പ്രയോഗിക്കുന്നു, എലമെന്റിന്റെ വലുപ്പം അതിന്റെ പാരന്റിനെ ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• `contain: layout;`: ലേഔട്ട് കണ്ടെയ്ൻമെന്റ് പ്രയോഗിക്കുന്നു, എലമെന്റിന്റെ ലേഔട്ട് അതിന്റെ സിബ്ലിംഗുകളെയോ പാരന്റിനെയോ ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• `contain: style;`: സ്റ്റൈൽ കണ്ടെയ്ൻമെന്റ് പ്രയോഗിക്കുന്നു, എലമെന്റിന്റെ സ്റ്റൈലുകൾ മറ്റ് എലമെന്റുകളെ ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• `contain: paint;`: പെയിന്റ് കണ്ടെയ്ൻമെന്റ് പ്രയോഗിക്കുന്നു, എലമെന്റിന്റെ പെയിന്റിംഗ് മറ്റ് എലമെന്റുകളെ ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം:

            .container {
  container-type: inline-size;
  contain: layout; /* Or contain: content, contain: strict */
}

            

              
                Copy
              
            
          

`contain: layout` പ്രയോഗിക്കുന്നതിലൂടെ, കണ്ടെയ്നറിന്റെ ലേഔട്ടിലെ മാറ്റങ്ങൾ അതിന്റെ സിബ്ലിംഗുകളെയോ പാരന്റിനെയോ ബാധിക്കുന്നത് തടയാൻ നിങ്ങൾക്ക് കഴിയും, ഇത് കണ്ടെയ്നർ ക്വറികൾ ട്രിഗർ ചെയ്യുന്ന റീഫ്ലോകളുടെ വ്യാപ്തി കുറയ്ക്കുന്നു. നിങ്ങളുടെ പ്രത്യേക ആവശ്യങ്ങൾക്കനുസരിച്ച് ഉചിതമായ കണ്ടെയ്ൻമെന്റ് മൂല്യം തിരഞ്ഞെടുക്കുക.

പ്രകടന വിശകലനത്തിനുള്ള ടൂളുകളും ടെക്നിക്കുകളും

ഫലപ്രദമായ പ്രകടന ഒപ്റ്റിമൈസേഷന് പ്രകടനത്തിലെ തടസ്സങ്ങൾ തിരിച്ചറിയാനും അളക്കാനും കഴിയേണ്ടതുണ്ട്. കണ്ടെയ്നർ ക്വറിയുടെ പ്രകടനം വിശകലനം ചെയ്യാൻ നിരവധി ടൂളുകളും ടെക്നിക്കുകളും നിങ്ങളെ സഹായിക്കും:

• ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ: മിക്ക ആധുനിക ബ്രൗസറുകളും (ക്രോം, ഫയർഫോക്സ്, സഫാരി) സിഎസ്എസ് പ്രകടനം പ്രൊഫൈൽ ചെയ്യാനും റീഫ്ലോകൾ തിരിച്ചറിയാനും കണ്ടെയ്നർ ക്വറികൾ വിലയിരുത്താൻ എടുത്ത സമയം അളക്കാനും ഉപയോഗിക്കാവുന്ന ശക്തമായ ഡെവലപ്പർ ടൂളുകൾ നൽകുന്നു. നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രവർത്തനത്തിന്റെ ഒരു ടൈംലൈൻ റെക്കോർഡ് ചെയ്യാനും പ്രകടനം മെച്ചപ്പെടുത്താൻ കഴിയുന്ന മേഖലകൾ കണ്ടെത്താനും "പെർഫോമൻസ്" ടാബ് ഉപയോഗിക്കുക.
• ലൈറ്റ്ഹൗസ് (Lighthouse): നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം, പ്രവേശനക്ഷമത, മറ്റ് മികച്ച കീഴ്വഴക്കങ്ങൾ എന്നിവ ഓഡിറ്റ് ചെയ്യുന്ന ഒരു ഓട്ടോമേറ്റഡ് ടൂളാണ് ലൈറ്റ്ഹൗസ്. കണ്ടെയ്നർ ക്വറികളുമായി ബന്ധപ്പെട്ട പ്രകടന പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും മെച്ചപ്പെടുത്തലിനുള്ള ശുപാർശകൾ നൽകാനും ഇതിന് കഴിയും. ഇത് ഇപ്പോൾ ക്രോം ഡെവ് ടൂളുകളിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
• വെബ്പേജ്ടെസ്റ്റ് (WebPageTest): വ്യത്യസ്ത ലൊക്കേഷനുകളിൽ നിന്നും നെറ്റ്‌വർക്ക് അവസ്ഥകളിൽ നിന്നും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പരിശോധിക്കാൻ അനുവദിക്കുന്ന ഒരു സൗജന്യ ഓൺലൈൻ ടൂളാണ് വെബ്പേജ്ടെസ്റ്റ്. ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ വെബ്സൈറ്റ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള വിലയേറിയ ഉൾക്കാഴ്ചകൾ നൽകാൻ ഇതിന് കഴിയും.
• സിഎസ്എസ് സ്റ്റാറ്റ്സ് (CSS Stats): സിഎസ്എസ് ഫയലുകൾ വിശകലനം ചെയ്യാൻ ഉപയോഗിക്കുന്ന ഒരു ടൂൾ. സെലക്ടർ സ്പെസിഫിസിറ്റി, തനതായ നിറങ്ങളുടെ എണ്ണം, തുടങ്ങി നിരവധി സ്റ്റാറ്റ്സുകൾ ഇത് റിപ്പോർട്ട് ചെയ്യുന്നു.

ഈ ടൂളുകൾ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തെക്കുറിച്ച് നിങ്ങൾക്ക് നല്ല ധാരണ നേടാനും കണ്ടെയ്നർ ക്വറി ഒപ്റ്റിമൈസേഷൻ ഏറ്റവും കൂടുതൽ സ്വാധീനം ചെലുത്താൻ കഴിയുന്ന മേഖലകൾ തിരിച്ചറിയാനും കഴിയും.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും കേസ് സ്റ്റഡികളും

കണ്ടെയ്നർ ക്വറി ഒപ്റ്റിമൈസേഷന്റെ പ്രായോഗിക നേട്ടങ്ങൾ വ്യക്തമാക്കാൻ, നമുക്ക് ചില യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ പരിഗണിക്കാം:

1. ഇ-കൊമേഴ്സ് പ്രൊഡക്റ്റ് ഗ്രിഡ്

ഒരു ഇ-കൊമേഴ്സ് വെബ്സൈറ്റ് ഉൽപ്പന്ന ലിസ്റ്റിംഗുകൾ പ്രദർശിപ്പിക്കുന്നതിന് ഒരു പ്രൊഡക്റ്റ് ഗ്രിഡ് ഉപയോഗിക്കുന്നു. ഓരോ ഉൽപ്പന്നത്തിലും ഒരു ചിത്രം, തലക്കെട്ട്, വില, "Add to Cart" ബട്ടൺ എന്നിവ അടങ്ങിയിരിക്കുന്നു. പ്രൊഡക്റ്റ് ഗ്രിഡിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി ഉൽപ്പന്നങ്ങളുടെ ലേഔട്ടും ഫോണ്ട് വലുപ്പവും ക്രമീകരിക്കാൻ കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കുന്നു.

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

പരിഹാരം:

• ഒപ്റ്റിമൈസ് ചെയ്ത സെലക്ടറുകൾ: സ്പെസിഫിസിറ്റി കുറയ്ക്കുന്നതിന് കണ്ടെയ്നർ ക്വറി സെലക്ടറുകൾ ലളിതമാക്കി.
• ഡിബൗൺസ്ഡ് അപ്ഡേറ്റുകൾ: വിൻഡോ റീസൈസ് ചെയ്യുമ്പോൾ അമിതമായ പുനർ-കണക്കുകൂട്ടലുകൾ ഒഴിവാക്കാൻ കണ്ടെയ്നർ ക്വറി അപ്ഡേറ്റുകൾ ഡിബൗൺസ് ചെയ്തു.
• വലുപ്പം മാറ്റാൻ `transform` ഉപയോഗിച്ചു: റീഫ്ലോകൾ ഒഴിവാക്കാൻ `width`, `height` എന്നിവയ്ക്ക് പകരം `transform: scale()` ഉപയോഗിച്ചു.
• `content-visibility`: ഓഫ്സ്ക്രീൻ ഉൽപ്പന്നങ്ങൾ റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കാൻ `content-visibility: auto` ഉപയോഗിച്ചു.

ഫലം: പേജ് ലോഡ് സമയം 30% മെച്ചപ്പെടുത്തി, സ്ക്രോളിംഗ് ജാങ്ക് ഗണ്യമായി കുറച്ചു.

2. വാർത്താ വെബ്സൈറ്റ് ആർട്ടിക്കിൾ ലേഔട്ട്

ഒരു വാർത്താ വെബ്സൈറ്റ് ആർട്ടിക്കിൾ കണ്ടെയ്നറിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി ആർട്ടിക്കിൾ ഉള്ളടക്കത്തിന്റെ ലേഔട്ട് ക്രമീകരിക്കാൻ കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കുന്നു. ആർട്ടിക്കിൾ എലമെന്റുകളുടെ ഫോണ്ട് വലുപ്പം, ചിത്രങ്ങളുടെ വലുപ്പം, സ്പേസിംഗ് എന്നിവ ക്രമീകരിക്കാൻ കണ്ടെയ്നർ ക്വറികൾ ഉപയോഗിക്കുന്നു.

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

പരിഹാരം:

• സിഎസ്എസ് കണ്ടെയ്ൻമെന്റ് ഉപയോഗിച്ചു: ലേഔട്ട് മാറ്റങ്ങൾ മറ്റ് എലമെന്റുകളെ ബാധിക്കുന്നത് തടയാൻ ആർട്ടിക്കിൾ കണ്ടെയ്നറിൽ `contain: layout` പ്രയോഗിച്ചു.
• `contain-intrinsic-size` പ്രയോജനപ്പെടുത്തി: ചിത്രങ്ങൾ റെൻഡർ ചെയ്യുമ്പോൾ പ്ലേസ്‌ഹോൾഡർ സൈസിംഗിനായി `contain-intrinsic-size` ഉപയോഗിച്ചു.
• സിഎസ്എസ് മിനിഫൈ ചെയ്തു: സിഎസ്എസ് ഫയലിന്റെ വലുപ്പം കുറയ്ക്കാനും ലോഡിംഗ് വേഗത മെച്ചപ്പെടുത്താനും അത് മിനിഫൈ ചെയ്തു.
• ലേസി-ലോഡ് ചെയ്ത ചിത്രങ്ങൾ: പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുന്നതിന് എല്ലാ ചിത്രങ്ങളിലും ലേസി ലോഡിംഗ് നടപ്പിലാക്കി.

ഫലം: റീഫ്ലോകൾ 50% കുറച്ചു, സ്ക്രോളിംഗ് പ്രകടനം മെച്ചപ്പെടുത്തി.

ഉപസംഹാരം

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