CSS கண்டெய்னர் குவெரி செயல்திறன் மேம்படுத்தல் இயந்திரம்: குவெரி செயலாக்க மேம்பாடு

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

கண்டெய்னர் குவரிகளின் செயல்திறன் தாக்கங்களைப் புரிந்துகொள்ளுதல்

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

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

ஒவ்வொரு மறு மதிப்பீடும் ஸ்டைல்களின் மறு கணக்கீட்டைத் தூண்டுகிறது மற்றும் பக்கத்தின் ரீஃப்ளோவை ஏற்படுத்தக்கூடும், இது கணக்கீட்டு ரீதியாக செலவு மிக்கதாக இருக்கும், குறிப்பாக சிக்கலான தளவமைப்புகளுக்கு. அதிகப்படியான ரீஃப்ளோக்கள் பின்வருவனவற்றிற்கு வழிவகுக்கும்:

• அதிகரித்த CPU பயன்பாடு.
• தடங்கலான ஸ்க்ரோலிங்.
• மெதுவான பக்க ஏற்றுதல் நேரங்கள்.
• மோசமான பயனர் அனுபவம்.

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

குவெரி செயலாக்க மேம்பாட்டிற்கான உத்திகள்

1. குவெரி சிக்கலைக் குறைத்தல்

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

• அதிகப்படியான குறிப்பிட்ட செலக்டர்களைத் தவிர்த்தல்: உங்கள் கண்டெய்னர் குவெரிக்குள் ஆழமாகப் பதிக்கப்பட்ட செலக்டர்களைப் பயன்படுத்துவதற்குப் பதிலாக, கிளாஸ்கள் அல்லது ஐடிகளைப் பயன்படுத்தி நேரடியாக உறுப்புகளைக் குறிவைக்கவும்.
• சாத்தியமான எளிய நிபந்தனைகளைப் பயன்படுத்துதல்: சிக்கலான வெளிப்பாடுகளை விட எளிய `min-width` அல்லது `max-width` நிபந்தனைகளை விரும்புங்கள். எடுத்துக்காட்டாக, `(min-width: 300px and max-width: 600px)` என்பதற்குப் பதிலாக, முடிந்தால் `min-width: 300px` மற்றும் `max-width: 600px` உடன் தனித்தனி குவரிகளைப் பயன்படுத்துவதைக் கருத்தில் கொண்டு, உங்கள் CSS-ஐ அதற்கேற்ப கட்டமைக்கவும். இது பெரும்பாலும் சிறந்த செயல்திறனைத் தரும், குறிப்பாக பழைய உலாவிகளில்.
• தேவையற்ற குவரிகளை ஒருங்கிணைத்தல்: நகல் அல்லது ஒன்றுடன் ஒன்று பொருந்தும் கண்டெய்னர் குவரிகளைக் கண்டறிந்து அகற்றவும். பல டெவலப்பர்கள் ஒரே திட்டத்தில் பணிபுரியும் போது இது ஒரு பொதுவான பிரச்சனை. குறியீடு மறுஆய்வு செயல்முறைகள் குறிப்பாக தேவையற்ற அல்லது முரண்பாடான கண்டெய்னர் குவெரி அறிவிப்புகளைக் கவனிக்க வேண்டும்.

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

திறனற்றது:

            .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. கண்டெய்னர் குவெரி புதுப்பிப்புகளை டிபவுன்சிங் மற்றும் த்ராட்லிங் செய்தல்

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

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

இந்த நுட்பங்கள் பொதுவாக ஜாவாஸ்கிரிப்ட் மூலம் செயல்படுத்தப்படுகின்றன. கண்டெய்னர் குவெரியைப் புதுப்பிக்கும் ஒரு செயல்பாட்டை டிபவுன்ஸ் செய்ய லோடேஷ் பயன்படுத்தும் ஒரு எடுத்துக்காட்டு இங்கே:

            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
              
            
          

முக்கிய குறிப்பு: ஒரு கண்டெய்னர் குவெரி மாற்றத்திற்குப் பிறகு ஜாவாஸ்கிரிப்ட் பயன்படுத்தி ஸ்டைல்களை நேரடியாகக் கையாளுவது எதிர்விளைவாக இருக்கலாம் மற்றும் இன்னும் மோசமான செயல்திறனுக்கு வழிவகுக்கும். மேலே உள்ள எடுத்துக்காட்டு டிபவுன்சிங் எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான ஒரு *எளிமைப்படுத்தப்பட்ட விளக்கம்* ஆகும். கட்டாய ரீஃப்ளோக்களைத் தவிர்க்க முடிந்தவரை CSS மாற்றங்கள் மற்றும் அனிமேஷன்களை நம்பியிருப்பது ஒரு சிறந்த அணுகுமுறையாகும். கண்டெய்னர் குவெரி முடிவுகளின் அடிப்படையில் ஸ்டைல்களை இயக்க நீங்கள் ஜாவாஸ்கிரிப்ட் பயன்படுத்தினால் இந்த நுட்பம் குறிப்பாக பயனுள்ளதாக இருக்கும்.

3. Placeholder அளவிற்காக `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
              
            
          

மாற்றாக, கண்டெய்னர் குவரிகளை ஆதரிக்காத உலாவிகளுக்கு மாற்று ஸ்டைல்களை வழங்க நீங்கள் CSS அம்சக் குவரிகளை (`\@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
              
            
          

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

திறமையான CSS செலக்டர் பயன்பாடு

CSS செலக்டர்களின் தேர்வு கண்டெய்னர் குவெரி செயல்திறனை கணிசமாக பாதிக்கலாம். திறமையான செலக்டர்கள் உலாவி மூலம் வேகமாகச் செயலாக்கப்படுகின்றன, இது ஸ்டைல்களை மறு கணக்கீடு செய்யத் தேவையான மொத்த நேரத்தைக் குறைக்கிறது.

1. செலக்டர் தனித்தன்மையைக் குறைத்தல்

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

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

திறனற்றது:

            .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
              
            
          

இந்த பண்பு, ஆரம்பத்தில் மறைக்கப்பட்ட அல்லது ஆஃப்ஸ்கிரீனில் உள்ள உங்கள் உள்ளடக்கத்தின் பகுதிகளுக்கு மிகவும் பொருத்தமானது, அதாவது டேப் பேனல்கள் அல்லது சுருக்கக்கூடிய பிரிவுகள். இந்த அம்சம் லேசி-லோடிங் படங்களைப் போன்றது, ஆனால் இது பொதுவான HTML உள்ளடக்கத்திற்கு. ஆஃப்ஸ்கிரீன் உள்ளடக்கத்தை ரெண்டர் செய்வதைத் தவிர்ப்பதன் மூலம், மதிப்பீடு செய்யப்பட வேண்டிய கண்டெய்னர் குவரிகளின் எண்ணிக்கையைக் குறைக்கலாம், இது வேகமான பக்க ஏற்றுதல் நேரங்கள் மற்றும் மேம்பட்ட பதிலளிக்கக்கூடிய தன்மைக்கு வழிவகுக்கும்.

உலாவி ரீஃப்ளோக்களைக் குறைத்தல்

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

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. CSS கண்டெய்ன்மென்டைப் பயன்படுத்துதல்

`contain` பண்பு, உறுப்புகளை அவற்றின் சுற்றுப்புறங்களிலிருந்து தனிமைப்படுத்த உங்களை அனுமதிக்கிறது, இது மற்ற உறுப்புகளின் தளவமைப்பைப் பாதிப்பதைத் தடுக்கிறது. இது கண்டெய்னர் குவரிகளால் தூண்டப்படும் ரீஃப்ளோக்களின் வரம்பைக் குறைக்கும்.

`contain` பண்பு பல மதிப்புகளை ஏற்கிறது, அவற்றுள்:

• `contain: none;` (இயல்புநிலை): எந்த கண்டெய்ன்மென்டும் பயன்படுத்தப்படவில்லை.
• `contain: strict;`: அனைத்து கண்டெய்ன்மென்ட் பண்புகளையும் (size, layout, style, paint) பயன்படுத்துகிறது.
• `contain: content;`: layout, style, மற்றும் paint கண்டெய்ன்மென்டைப் பயன்படுத்துகிறது.
• `contain: size;`: size கண்டெய்ன்மென்டைப் பயன்படுத்துகிறது, உறுப்பின் அளவு அதன் பெற்றோரைப் பாதிக்காது என்பதை உறுதி செய்கிறது.
• `contain: layout;`: layout கண்டெய்ன்மென்டைப் பயன்படுத்துகிறது, உறுப்பின் தளவமைப்பு அதன் உடன்பிறப்புகள் அல்லது பெற்றோரைப் பாதிக்காது என்பதை உறுதி செய்கிறது.
• `contain: style;`: style கண்டெய்ன்மென்டைப் பயன்படுத்துகிறது, உறுப்பின் ஸ்டைல்கள் மற்ற உறுப்புகளைப் பாதிக்காது என்பதை உறுதி செய்கிறது.
• `contain: paint;`: paint கண்டெய்ன்மென்டைப் பயன்படுத்துகிறது, உறுப்பின் பெயிண்டிங் மற்ற உறுப்புகளைப் பாதிக்காது என்பதை உறுதி செய்கிறது.

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

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

            

              
                Copy
              
            
          

`contain: layout` ஐப் பயன்படுத்துவதன் மூலம், கண்டெய்னரின் தளவமைப்பில் ஏற்படும் மாற்றங்கள் அதன் உடன்பிறப்புகள் அல்லது பெற்றோரைப் பாதிப்பதைத் தடுக்கலாம், இது கண்டெய்னர் குவரிகளால் தூண்டப்படும் ரீஃப்ளோக்களின் வரம்பைக் குறைக்கிறது. உங்கள் குறிப்பிட்ட தேவைகளின் அடிப்படையில் பொருத்தமான கண்டெய்ன்மென்ட் மதிப்பைத் தேர்வுசெய்யவும்.

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

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

• உலாவி டெவலப்பர் கருவிகள்: பெரும்பாலான நவீன உலாவிகள் (குரோம், ஃபயர்பாக்ஸ், சஃபாரி) சக்திவாய்ந்த டெவலப்பர் கருவிகளை வழங்குகின்றன, அவை CSS செயல்திறனை சுயவிவரப்படுத்தவும், ரீஃப்ளோக்களைக் கண்டறியவும், மற்றும் கண்டெய்னர் குவரிகளை மதிப்பீடு செய்ய செலவழித்த நேரத்தை அளவிடவும் பயன்படுத்தப்படலாம். உங்கள் வலைத்தளத்தின் செயல்பாட்டின் காலவரிசையைப் பதிவுசெய்ய மற்றும் செயல்திறனை மேம்படுத்தக்கூடிய பகுதிகளைக் கண்டறிய "செயல்திறன்" தாவலைப் பயன்படுத்தவும்.
• லைட்ஹவுஸ்: லைட்ஹவுஸ் என்பது உங்கள் வலைத்தளத்தை செயல்திறன், அணுகல் மற்றும் பிற சிறந்த நடைமுறைகளுக்காக தணிக்கை செய்யும் ஒரு தானியங்கு கருவியாகும். இது கண்டெய்னர் குவரிகள் தொடர்பான சாத்தியமான செயல்திறன் சிக்கல்களைக் கண்டறிந்து மேம்பாட்டிற்கான பரிந்துரைகளை வழங்க முடியும். இது இப்போது குரோம் டெவ் கருவிகளில் கட்டமைக்கப்பட்டுள்ளது.
• WebPageTest: WebPageTest என்பது ஒரு இலவச ஆன்லைன் கருவியாகும், இது வெவ்வேறு இடங்கள் மற்றும் நெட்வொர்க் நிலைமைகளிலிருந்து உங்கள் வலைத்தளத்தின் செயல்திறனைச் சோதிக்க உங்களை அனுமதிக்கிறது. இது உலகெங்கிலும் உள்ள பயனர்களுக்கு உங்கள் வலைத்தளம் எவ்வாறு செயல்படுகிறது என்பது குறித்த மதிப்புமிக்க நுண்ணறிவுகளை வழங்க முடியும்.
• CSS Stats: CSS கோப்புகளைப் பகுப்பாய்வு செய்யப் பயன்படுத்தப்படும் ஒரு கருவி. இது செலக்டர் தனித்தன்மை, தனித்துவமான வண்ணங்களின் எண்ணிக்கை, மற்றும் பல புள்ளிவிவரங்களைப் புகாரளிக்கிறது.

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

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் வழக்கு ஆய்வுகள்

கண்டெய்னர் குவெரி மேம்படுத்தலின் நடைமுறை நன்மைகளை விளக்க, சில நிஜ உலக எடுத்துக்காட்டுகளைக் கருத்தில் கொள்வோம்:

1. இ-காமர்ஸ் தயாரிப்பு கட்டம்

ஒரு இ-காமர்ஸ் வலைத்தளம் தயாரிப்பு பட்டியல்களைக் காண்பிக்க ஒரு தயாரிப்பு கட்டத்தைப் பயன்படுத்துகிறது. ஒவ்வொரு தயாரிப்பு உருப்படியிலும் ஒரு படம், ஒரு தலைப்பு, ஒரு விலை மற்றும் ஒரு "வண்டியில் சேர்" பொத்தான் உள்ளது. தயாரிப்பு கட்டத்தின் அகலத்தின் அடிப்படையில் தயாரிப்பு உருப்படிகளின் தளவமைப்பு மற்றும் எழுத்துரு அளவுகளை சரிசெய்ய கண்டெய்னர் குவரிகள் பயன்படுத்தப்படுகின்றன.

சவால்: தயாரிப்பு கட்டத்தில் நூற்றுக்கணக்கான தயாரிப்பு உருப்படிகள் உள்ளன, மேலும் பயனர் உலாவி சாளரத்தின் அளவை மாற்றும்போது கண்டெய்னர் குவரிகள் அடிக்கடி தூண்டப்படுகின்றன. இது மெதுவான பக்க ஏற்றுதல் நேரங்கள் மற்றும் தடங்கலான ஸ்க்ரோலிங்கிற்கு வழிவகுக்கிறது.

தீர்வு:

• மேம்படுத்தப்பட்ட செலக்டர்கள்: தனித்தன்மையைக் குறைக்க கண்டெய்னர் குவெரி செலக்டர்களை எளிமைப்படுத்தியது.
• டிபவுன்ஸ் செய்யப்பட்ட புதுப்பிப்புகள்: சாளர மறுஅளவின் போது அதிகப்படியான மறு கணக்கீடுகளைத் தவிர்க்க கண்டெய்னர் குவெரி புதுப்பிப்புகளை டிபவுன்ஸ் செய்தது.
• மறுஅளவிட `transform` பயன்படுத்தப்பட்டது: ரீஃப்ளோக்களைத் தவிர்க்க `width` மற்றும் `height` ஐ `transform: scale()` உடன் மாற்றியது.
• `content-visibility`: ஆஃப்ஸ்கிரீன் தயாரிப்பு உருப்படிகளை ரெண்டர் செய்வதைத் தவிர்க்க `content-visibility: auto` பயன்படுத்தப்பட்டது.

முடிவு: பக்க ஏற்றுதல் நேரத்தை 30% மேம்படுத்தியது மற்றும் ஸ்க்ரோலிங் தடங்கலைக் கணிசமாகக் குறைத்தது.

2. செய்தி வலைத்தளக் கட்டுரை தளவமைப்பு

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

சவால்: கட்டுரை உள்ளடக்கம் உரை, படங்கள், வீடியோக்கள் மற்றும் உட்பொதிக்கப்பட்ட விட்ஜெட்டுகள் உட்பட ஏராளமான உறுப்புகளைக் கொண்டுள்ளது. பயனர் கட்டுரை வழியாக ஸ்க்ரோல் செய்யும்போது கண்டெய்னர் குவரிகள் அடிக்கடி தூண்டப்படுகின்றன, இது செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கிறது.

தீர்வு:

• CSS கண்டெய்ன்மென்டைப் பயன்படுத்தியது: தளவமைப்பு மாற்றங்கள் மற்ற உறுப்புகளைப் பாதிப்பதைத் தடுக்க கட்டுரை கண்டெய்னருக்கு `contain: layout` பயன்படுத்தப்பட்டது.
• `contain-intrinsic-size` ஐப் பயன்படுத்தியது: படங்களை ரெண்டர் செய்யும்போது ப்ளேஸ்ஹோல்டர் அளவிற்காக `contain-intrinsic-size` பயன்படுத்தப்பட்டது.
• CSS சுருக்கப்பட்டது: அதன் அளவைக் குறைக்கவும் ஏற்றுதல் வேகத்தை மேம்படுத்தவும் CSS கோப்பு சுருக்கப்பட்டது.
• படங்கள் லேசி-லோட் செய்யப்பட்டன: ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்க அனைத்து படங்களிலும் லேசி லோடிங் செயல்படுத்தப்பட்டது.

முடிவு: ரீஃப்ளோக்களை 50% குறைத்தது மற்றும் ஸ்க்ரோலிங் செயல்திறனை மேம்படுத்தியது.

முடிவுரை

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