CSS ஆங்கர் பொசிஷனிங் செயல்திறன் மேம்படுத்தல்: கணக்கீட்டுத் திறனை அதிகரித்தல்

CSS ஆங்கர் பொசிஷனிங், ஒப்பீட்டளவில் ஒரு புதிய அம்சம், கூறுகளை பார்வைக்கு ஒன்றாக இணைக்க சக்திவாய்ந்த வழிகளை வழங்குகிறது. இது ஒரு உறுப்பை (நிலைப்படுத்தப்பட்ட உறுப்பு) ஜாவாஸ்கிரிப்டை நாடாமல் மற்றொரு உறுப்புடன் (ஆங்கர் உறுப்பு) தொடர்புடையதாக நிலைநிறுத்த அனுமதிக்கிறது. இது டூல்டிப்கள், கால்அவுட்கள் மற்றும் பிற டைனமிக் UI கூறுகளுக்கு நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருந்தாலும், ஆங்கர் பொசிஷனிங்கின் திறமையற்ற பயன்பாடு உங்கள் வலைத்தளத்தின் செயல்திறனை கணிசமாக பாதிக்கும். இந்தக் கட்டுரை CSS ஆங்கர் பொசிஷனிங்கின் செயல்திறன் தாக்கங்களை ஆராய்ந்து, அதன் கணக்கீட்டுத் திறனை மேம்படுத்துவதற்கான நடைமுறை நுட்பங்களை வழங்குகிறது.

CSS ஆங்கர் பொசிஷனிங்கைப் புரிந்துகொள்ளுதல்

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

• anchor-name: இந்தப் பண்பு ஒரு உறுப்புக்கு ஒரு பெயரை வரையறுத்து, அதை ஒரு ஆங்கராக மாற்றுகிறது. பக்கத்தில் உள்ள எந்த உறுப்பையும் ஒரு தனித்துவமான பெயரைப் பயன்படுத்தி ஆங்கராக நியமிக்கலாம்.
• position: absolute; அல்லது position: fixed;: நீங்கள் ஒரு ஆங்கருடன் தொடர்புடையதாக நிலைநிறுத்த விரும்பும் உறுப்புக்கு இந்த பண்புகளில் ஒன்று தேவை.
• anchor(): இந்த CSS செயல்பாடு ஆங்கரைக் குறிப்பிடவும், அதிலிருந்து குறிப்பிட்ட பண்புகளை (எ.கா., top, left, width, height) மீட்டெடுக்கவும் உங்களை அனுமதிக்கிறது. நிலைப்படுத்தப்பட்ட உறுப்பை நிலைநிறுத்த இந்த மதிப்புகளை நீங்கள் பயன்படுத்தலாம்.

இதோ ஒரு அடிப்படை உதாரணம்:

            
/* Anchor element */
#anchor {
  anchor-name: --my-anchor;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  position: relative;
}

/* Positioned element */
#positioned {
  position: absolute;
  top: anchor(--my-anchor top);
  left: anchor(--my-anchor right);
  background-color: lightcoral;
  width: 150px;
  height: 50px;
  padding: 10px;
}

            

              
                Copy
              
            
          

            
<div id="anchor">Anchor Element</div>
<div id="positioned">Positioned Element</div>

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `#positioned` உறுப்பு anchor() செயல்பாட்டைப் பயன்படுத்தி `#anchor` உறுப்புடன் தொடர்புடையதாக நிலைநிறுத்தப்பட்டுள்ளது. இது ஆங்கரின் `right` பண்பையும், ஆங்கரின் `top` பண்பையும் பயன்படுத்தி ஆங்கர் உறுப்புக்கு நேரடியாக வலதுபுறத்தில் நிலைநிறுத்தப்பட்டுள்ளது.

சாதாரண ஆங்கர் பொசிஷனிங்கின் செயல்திறன் சிக்கல்கள்

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

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

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

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

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

1. ஆங்கர் எலிமென்ட் மாற்றங்களைக் குறைத்தல்

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

• தேவையற்ற ரிஃப்ளோக்களைத் தவிர்க்கவும்: ரிஃப்ளோக்கள் என்பது உலாவி முழுப் பக்கத்தின் (அல்லது அதன் ஒரு குறிப்பிடத்தக்க பகுதியின்) லேஅவுட்டை மீண்டும் கணக்கிடும் விலையுயர்ந்த செயல்பாடுகள் ஆகும். லேஅவுட் பண்புகளை (எ.கா., offsetWidth, offsetHeight) ஒரு சுழற்சியில் படிப்பது அல்லது DOM இல் அடிக்கடி மாற்றங்களைச் செய்வது போன்ற ரிஃப்ளோக்களைத் தூண்டும் செயல்களைத் தவிர்க்கவும்.
• அனிமேஷன்களை மேம்படுத்துங்கள்: ஆங்கர் உறுப்பு அனிமேஷன் செய்யப்பட்டால், அனிமேஷன் திறமையானது என்பதை உறுதிப்படுத்தவும். முடிந்தவரை அனிமேஷன்களுக்கு transform மற்றும் opacity ஐப் பயன்படுத்தவும், ஏனெனில் இந்தப் பண்புகள் உலாவியால் வன்பொருள்-துரிதப்படுத்தப்படலாம், இது ரிஃப்ளோக்களைக் குறைக்கிறது.
• நிகழ்வுகளை டிபவுன்ஸ் அல்லது த்ராட்டில் செய்யவும்: ஆங்கர் உறுப்பின் நிலை அல்லது அளவு பயனர் உள்ளீட்டின் அடிப்படையில் (எ.கா., ஸ்க்ரோலிங் அல்லது மறுஅளவிடுதல்) புதுப்பிக்கப்பட்டால், புதுப்பிப்புகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த டிபவுன்சிங் அல்லது த்ராட்லிங் நுட்பங்களைப் பயன்படுத்தவும். இது அதிகப்படியான மறு கணக்கீடுகளைத் தடுக்கிறது.

உதாரணம் (ஸ்க்ரோல் நிகழ்வுகளை டிபவுன்சிங் செய்தல்):

            
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const handleScroll = () => {
  // Update anchor position or size here (only called after a delay)
  console.log("Scroll event");
};

window.addEventListener('scroll', debounce(handleScroll, 100)); // 100ms delay

            

              
                Copy
              
            
          

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

2. 'top' மற்றும் 'left' என்பதற்குப் பதிலாக `transform: translate()` ஐப் பயன்படுத்துதல்

முன்னர் குறிப்பிட்டபடி, `top` மற்றும் `left` போன்ற பண்புகளை அனிமேஷன் செய்வது `transform` ஐ விட விலை உயர்ந்தது. முடிந்தால், இறுதி `top` மற்றும் `left` நிலைகளைக் கணக்கிட்டு, பின்னர் உறுப்பை நகர்த்த `transform: translate(x, y)` ஐப் பயன்படுத்தவும். இது வன்பொருள் முடுக்கத்தைப் பயன்படுத்துகிறது, இதன் விளைவாக மென்மையான அனிமேஷன்கள் மற்றும் குறைந்த CPU பயன்பாடு ஏற்படுகிறது.

உதாரணம்:

            
/* Positioned element */
#positioned {
  position: absolute;
  /* Avoid animating 'top' and 'left' directly */
  /* top: anchor(--my-anchor top); */
  /* left: anchor(--my-anchor right); */

  /* Instead, calculate the final position and use transform */
  transform: translate(calc(anchor(--my-anchor right)), calc(anchor(--my-anchor top)));
  background-color: lightcoral;
  width: 150px;
  height: 50px;
  padding: 10px;
}

            

              
                Copy
              
            
          

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

3. CSS கண்டெய்ன்மென்ட்டைப் பயன்படுத்துதல்

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

contain பண்பு பல மதிப்புகளை ஏற்றுக்கொள்கிறது, ஒவ்வொன்றும் வெவ்வேறு அளவிலான கண்டெய்ன்மென்ட்டைக் கொண்டுள்ளது:

• contain: none (இயல்புநிலை): எந்த கண்டெய்ன்மென்ட்டும் பயன்படுத்தப்படவில்லை.
• contain: layout: உறுப்பின் உள் லேஅவுட் பக்கத்தின் மற்ற பகுதிகளிலிருந்து சுயாதீனமானது என்பதைக் குறிக்கிறது. உறுப்பின் குழந்தைகளுக்கு ஏற்படும் மாற்றங்கள் உறுப்புக்கு வெளியே ரிஃப்ளோக்களை ஏற்படுத்தாது.
• contain: paint: உறுப்பின் உள்ளடக்கம் அதன் எல்லைகளுக்கு வெளியே பெயிண்ட் செய்ய முடியாது என்பதைக் குறிக்கிறது. இது உறுப்புக்கு வெளியே உள்ள பகுதிகளின் மறுபெயிண்ட்களைத் தவிர்ப்பதன் மூலம் ரெண்டரிங்கை மேம்படுத்த உலாவியை அனுமதிக்கிறது.
• contain: size: உறுப்பின் அளவு அதன் உள்ளடக்கங்களிலிருந்து சுயாதீனமானது என்பதைக் குறிக்கிறது. உறுப்பு ஒரு வெளிப்படையான உயரம் மற்றும் அகலத்தைக் கொண்டிருக்க வேண்டும்.
• contain: content: contain: layout paint என்பதற்கான ஒரு சுருக்கெழுத்து.
• contain: strict: contain: layout paint size என்பதற்கான ஒரு சுருக்கெழுத்து. இது கண்டெய்ன்மென்ட்டின் மிகவும் கட்டுப்பாடான வடிவம்.

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

உதாரணம்:

            
/* Anchor element with containment */
#anchor {
  anchor-name: --my-anchor;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  position: relative;
  contain: layout;
}

/* Positioned element (no changes) */
#positioned {
  position: absolute;
  top: anchor(--my-anchor top);
  left: anchor(--my-anchor right);
  background-color: lightcoral;
  width: 150px;
  height: 50px;
  padding: 10px;
}

            

              
                Copy
              
            
          

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

4. `will-change` ஐச் சிக்கனமாகப் பயன்படுத்துதல்

will-change பண்பு எதிர்காலத்தில் மாற வாய்ப்புள்ள உறுப்புகளைப் பற்றி உலாவிக்குத் தெரிவிக்கிறது. இது முன்கூட்டியே ரெண்டரிங்கை மேம்படுத்த உலாவியை அனுமதிக்கிறது. இருப்பினும், will-change ஐ அதிகமாகப் பயன்படுத்துவது உண்மையில் செயல்திறனைக் குறைக்கலாம். இதைச் சிக்கனமாகப் பயன்படுத்தவும், உண்மையிலேயே மாறவிருக்கும் உறுப்புகளுக்கு மட்டுமே பயன்படுத்தவும்.

நிலைப்படுத்தப்பட்ட உறுப்பின் transform பண்புக்கு will-change ஐப் பயன்படுத்துவது, நீங்கள் உறுப்பின் நிலையை அனிமேஷன் செய்தால் செயல்திறனை மேம்படுத்தும். இருப்பினும், அதை கண்மூடித்தனமாகப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் இது தேவையற்ற நினைவகம் மற்றும் வளங்களைப் பயன்படுத்தக்கூடும்.

உதாரணம்:

            
/* Positioned element (only apply will-change when animating) */
#positioned {
  position: absolute;
  top: anchor(--my-anchor top);
  left: anchor(--my-anchor right);
  background-color: lightcoral;
  width: 150px;
  height: 50px;
  padding: 10px;
  /* Only apply will-change when actively animating */
  will-change: transform;
}

            

              
                Copy
              
            
          

5. மாற்று பொசிஷனிங் உத்திகளைக் கருத்தில் கொள்ளுதல்

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

• ஸ்டேடிக் பொசிஷனிங்: உறுப்புகளின் சார்பு நிலைகள் நிலையானதாகவும், டைனமிக்காக மாறத் தேவையில்லை என்றால், ஸ்டேடிக் பொசிஷனிங்கைப் பயன்படுத்தவும்.
• ரிலேட்டிவ் பொசிஷனிங்: நீங்கள் ஒரு உறுப்பை அதன் சாதாரண நிலையிலிருந்து சற்று ஈடுசெய்ய மட்டுமே தேவைப்பட்டால், ரிலேட்டிவ் பொசிஷனிங் போதுமானதாக இருக்கலாம்.
• ஃபிளெக்ஸ்பாக்ஸ் அல்லது கிரிட் லேஅவுட்: இந்த லேஅவுட் மாதிரிகள் முழுமையான பொசிஷனிங் மற்றும் சிக்கலான கணக்கீடுகளை நம்பாமல் உறுப்புகளை சீரமைக்கவும் விநியோகிக்கவும் சக்திவாய்ந்த வழிகளை வழங்குகின்றன.
• ஜாவாஸ்கிரிப்ட் அடிப்படையிலான பொசிஷனிங் (கவனமான மேம்படுத்தலுடன்): சில சமயங்களில், குறிப்பாக சிக்கலான தொடர்புகளுக்கு, நிலைகளைக் கணக்கிட்டுப் பயன்படுத்த ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவது அவசியமாக இருக்கலாம். இருப்பினும், ரிஃப்ளோக்கள் மற்றும் மறு கணக்கீடுகளைக் குறைக்க ஜாவாஸ்கிரிப்ட் குறியீட்டை கவனமாக மேம்படுத்துங்கள். மென்மையான அனிமேஷன்களுக்கு requestAnimationFrame ஐப் பயன்படுத்தவும்.

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

6. DOM புதுப்பிப்புகளைக் குழுவாகச் செய்தல்

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

உதாரணம் (ஜாவாஸ்கிரிப்ட்):

            
const anchorElement = document.getElementById('anchor');

// Instead of:
// anchorElement.style.width = '300px';
// anchorElement.style.height = '150px';
// anchorElement.style.backgroundColor = 'green';

// Batch the updates:
anchorElement.style.cssText = 'width: 300px; height: 150px; background-color: green;';

            

              
                Copy
              
            
          

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

7. உங்கள் கோடை சுயவிவரப்படுத்துதல் (Profile Your Code)

எந்தவொரு செயல்திறன் மேம்படுத்தல் முயற்சியிலும் மிக முக்கியமான படி, உங்கள் குறியீட்டை சுயவிவரப்படுத்தி குறிப்பிட்ட இடையூறுகளைக் கண்டறிவதாகும். உங்கள் ஆங்கர் பொசிஷனிங் செயலாக்கத்தின் செயல்திறனைப் பகுப்பாய்வு செய்ய உலாவியின் டெவலப்பர் கருவிகளைப் (எ.கா., Chrome DevTools, Firefox Developer Tools) பயன்படுத்தவும். உலாவி ஸ்டைல்களை மீண்டும் கணக்கிடுவதற்கோ அல்லது லேஅவுட்டை ரிஃப்ளோ செய்வதற்கோ கணிசமான நேரத்தைச் செலவிடும் பகுதிகளைத் தேடுங்கள்.

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

நிஜ உலக உதாரணங்கள் மற்றும் சர்வதேசக் கருத்தாய்வுகள்

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

• டூல்டிப்கள்: ஒரு உறுப்பின் மீது சுட்டியை வைக்கும்போது கூடுதல் தகவல்களை வழங்க டூல்டிப்கள் அடிக்கடி பயன்படுத்தப்படுகின்றன. மின்-வணிக வலைத்தளங்களில் (உலகளவில் அணுகக்கூடியது), டூல்டிப்கள் தயாரிப்பு விவரங்கள், உள்ளூர் நாணயத்தில் விலை, அல்லது ஷிப்பிங் தகவல்களைக் காட்டலாம். டூல்டிப்பின் நிலை திறமையாகக் கணக்கிடப்படுவதையும், ஆங்கர் உறுப்பு அடிக்கடி ரிஃப்ளோக்களைத் தூண்டவில்லை என்பதையும் உறுதிப்படுத்தவும். மென்மையான மறுநிலைப்படுத்தலுக்கு transform: translate() ஐப் பயன்படுத்தவும்.
• கால்அவுட்கள்/பாப்ஓவர்கள்: கால்அவுட்கள் ஒரு வலைப்பக்கத்தின் குறிப்பிட்ட பகுதிகளை முன்னிலைப்படுத்த அல்லது சூழ்நிலை வழிகாட்டுதலை வழங்கப் பயன்படுகின்றன. அவை பெரும்பாலும் ஆன்போர்டிங் ஓட்டங்கள், பயிற்சிப் பயன்பாடுகள், அல்லது ஊடாடும் வரைபடங்களில் (உலகளாவிய பயனர்களுடன் வரைபடப் பயன்பாடுகளைக் கருத்தில் கொள்ளுங்கள்) பயன்படுத்தப்படுகின்றன. செயல்திறன் சிக்கல்களைத் தவிர்க்க கால்அவுட்களைக் காண்பிக்கும்போது அல்லது மறைக்கும்போது DOM புதுப்பிப்புகளைக் குழுவாகச் செய்யவும்.
• சூழல் மெனுக்கள்: ஒரு உறுப்பில் வலது கிளிக் செய்வதன் மூலம் சூழல் மெனுக்கள் தூண்டப்படுகின்றன. அவற்றின் நிலை பெரும்பாலும் கர்சரின் இருப்பிடத்தைப் பொறுத்தது. மெனுவின் நிலையின் கணக்கீட்டை மேம்படுத்தவும், மெனு புதுப்பிப்புகளின் தாக்கத்தை பக்கத்தின் மற்ற பகுதிகளுக்குக் கட்டுப்படுத்த CSS கண்டெய்ன்மென்ட்டைப் பயன்படுத்தவும். சூழல் மெனுக்களின் சர்வதேசமயமாக்கல் (i18n), குறிப்பாக உள்ளடக்க அளவைப் பொறுத்து வெவ்வேறு மொழிகள் மற்றும் எழுத்துத் தொகுப்புகளைக் கணக்கில் கொள்ள கவனமாகக் கையாளப்பட வேண்டும்.

உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது, இந்த கூடுதல் காரணிகளைக் கருத்தில் கொள்ளுங்கள்:

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

முடிவுரை

CSS ஆங்கர் பொசிஷனிங் டைனமிக் UI கூறுகளை உருவாக்க ஒரு சக்திவாய்ந்த மற்றும் வசதியான வழியை வழங்குகிறது. இருப்பினும், அதன் செயல்திறன் தாக்கங்களைப் புரிந்துகொண்டு, மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை உறுதிப்படுத்த மேம்படுத்தல் நுட்பங்களைப் பயன்படுத்துவது முக்கியம். ஆங்கர் உறுப்பு மாற்றங்களைக் குறைப்பதன் மூலம், transform: translate() ஐப் பயன்படுத்துவதன் மூலம், CSS கண்டெய்ன்மென்ட்டைப் பயன்படுத்துவதன் மூலம், மற்றும் மாற்று பொசிஷனிங் உத்திகளைக் கருத்தில் கொள்வதன் மூலம், உங்கள் ஆங்கர் பொசிஷனிங் செயலாக்கத்தின் செயல்திறனை கணிசமாக மேம்படுத்தலாம். குறிப்பிட்ட இடையூறுகளைக் கண்டறிய உங்கள் குறியீட்டை எப்போதும் சுயவிவரப்படுத்தி, அதற்கேற்ப உங்கள் மேம்படுத்தல் முயற்சிகளை வடிவமைக்கவும். சர்வதேசக் கருத்தாய்வுகளை மனதில் வைத்து, உலகெங்கிலும் உள்ள பயனர்களுக்கு சிறப்பாகச் செயல்படும் வலைப் பயன்பாடுகளை நீங்கள் உருவாக்கலாம். முக்கியமானது, சாத்தியமான செயல்திறன் சிக்கல்களைப் பற்றி கவனமாக இருப்பது மற்றும் மேம்பாட்டு செயல்முறை முழுவதும் அவற்றை முன்கூட்டியே நிவர்த்தி செய்வது.