CSS Scroll Snap செயல்திறன்: Snap Point கணக்கீட்டு மேம்படுத்தலில் ஒரு ஆழமான பார்வை

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

ஸ்க்ரோல் ஸ்னாப்பில் மெய்நிகராக்கத்தைப் பயன்படுத்துதல்

இது ஒரு சவாலை முன்வைக்கிறது. CSS Scroll Snap என்பது அறிவிப்பு சார்ந்தது மற்றும் அதன் நிலைகளைக் கணக்கிட உண்மையான DOM கூறுகள் இருக்க வேண்டும் என்பதை நம்பியுள்ளது. கூறுகள் இல்லை என்றால், உலாவி அவற்றுக்கு ஸ்னாப் புள்ளிகளை உருவாக்க முடியாது.

இதற்கு ஒரு கலப்பின அணுகுமுறை தீர்வாகும். உங்கள் ஸ்க்ரோல் கண்டெய்னருக்குள் குறைந்த எண்ணிக்கையிலான உண்மையான DOM கூறுகளை நீங்கள் பராமரிக்கிறீர்கள். இந்தக் கூறுகளுக்கு `scroll-snap-align` பண்பு இருக்கும், அவை சரியாக ஸ்னாப் செய்யும். ஜாவாஸ்கிரிப்ட் மூலம் கையாளப்படும் மெய்நிகராக்க தர்க்கம், பயனர் பெரிய, மெய்நிகர் தரவுத்தொகுப்பின் வழியாக ஸ்க்ரோல் செய்யும்போது இந்த சில DOM முனைகளின் உள்ளடக்கத்தை மாற்றுவதற்குப் பொறுப்பாகும்.

மெய்நிகராக்கத்தின் நன்மைகள்:

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

குறைபாடுகள் மற்றும் பரிசீலனைகள்:

• அதிகரித்த சிக்கலான தன்மை: நீங்கள் தூய CSS-இன் எளிமையை ஜாவாஸ்கிரிப்ட்-இயக்கப்படும் ஒரு தீர்வின் சிக்கலான தன்மைக்காக வர்த்தகம் செய்கிறீர்கள். இப்போது நீங்கள் நிலையை நிர்வகித்தல், தெரியும் உருப்படிகளைக் கணக்கிடுதல் மற்றும் DOM-ஐ திறமையாகப் புதுப்பித்தல் ஆகியவற்றிற்குப் பொறுப்பாகிறீர்கள்.
• அணுகல்தன்மை (Accessibility): அணுகல்தன்மை கண்ணோட்டத்தில் மெய்நிகராக்கத்தைச் சரியாகச் செயல்படுத்துவது எளிதல்ல. நீங்கள் ஃபோகஸை நிர்வகிக்க வேண்டும், ஸ்கிரீன் ரீடர்கள் உள்ளடக்கத்தை வழிநடத்த முடியும் என்பதை உறுதிப்படுத்த வேண்டும், மற்றும் சரியான ARIA பண்புகளைப் பராமரிக்க வேண்டும்.
• பக்கத்தில் தேடுதல் (Ctrl/Cmd+F): தற்போது DOM-இல் ரெண்டர் செய்யப்படாத உள்ளடக்கத்திற்கு உலாவியின் இயல்புநிலை தேடல் செயல்பாடு வேலை செய்யாது.

பெரும்பாலான பெரிய அளவிலான பயன்பாடுகளுக்கு, செயல்திறன் நன்மைகள் சிக்கலான தன்மையை விட மிக அதிகமாக உள்ளன. இதை நீங்கள் புதிதாக உருவாக்க வேண்டியதில்லை. TanStack Virtual (முன்னர் React Virtual), `react-window`, மற்றும் `vue-virtual-scroller` போன்ற சிறந்த திறந்த மூல லைப்ரரிகள் மெய்நிகராக்கத்தைச் செயல்படுத்துவதற்கான வலுவான, உற்பத்திக்குத் தயாரான தீர்வுகளை வழங்குகின்றன.

மேம்படுத்தல் உத்தி 2: `content-visibility` பண்பு

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

அது எப்படி வேலை செய்கிறது

`content-visibility` பண்பு உலாவியின் ரெண்டரிங் இயந்திரத்திற்கு ஒரு சக்திவாய்ந்த குறிப்பாகும். நீங்கள் ஒரு உறுப்பில் `content-visibility: auto;` என்று அமைக்கும்போது, நீங்கள் உலாவிக்குச் சொல்கிறீர்கள்:

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

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

`contain-intrinsic-size` துணை பண்பு

இதில் ஒரு சிக்கல் உள்ளது. உலாவி ஒரு உறுப்பின் உள்ளடக்கத்தை ரெண்டர் செய்யவில்லை என்றால், அதன் அளவு என்னவென்று அதற்குத் தெரியாது. இது பயனர் ஸ்க்ரோல் செய்யும்போது மற்றும் புதிய கூறுகள் ரெண்டர் செய்யப்படும்போது ஸ்க்ரோல்பார் குதித்து மறுஅளவிடப்பட காரணமாகும், இது ஒரு மோசமான பயனர் அனுபவத்தை உருவாக்கும். இதைத் தீர்க்க, நாம் `contain-intrinsic-size` பண்பைப் பயன்படுத்துகிறோம்.

contain-intrinsic-size: 300px 500px; (உயரம் மற்றும் அகலம்) ஆனது, உறுப்பு ரெண்டர் செய்யப்படுவதற்கு முன்பு அதற்கான ஒரு ப்ளேஸ்ஹோல்டர் அளவை வழங்குகிறது. உலாவி இந்த மதிப்பைப் பயன்படுத்தி ஸ்க்ரோல் கண்டெய்னர் மற்றும் அதன் ஸ்க்ரோல்பாரின் லேஅவுட்டைக் கணக்கிடுகிறது, இது எந்தவொரு தடுமாற்றமான குதிப்புகளையும் தடுக்கிறது.

ஸ்க்ரோல்-ஸ்னாப் உருப்படிகளின் பட்டியலுக்கு இதை எப்படிப் பயன்படுத்துவது என்பது இங்கே:

            
.scroll-snap-container {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.snap-item {
  scroll-snap-align: start;
  /* The magic happens here */
  content-visibility: auto;
  contain-intrinsic-size: 100vh; /* Assuming full-height sections */
}

            

              
                Copy
              
            
          

`content-visibility` மற்றும் Snap Point கணக்கீடு

இந்த நுட்பம் ஆரம்ப ரெண்டரிங் செலவுக்கு கணிசமாக உதவுகிறது. உலாவி ஆரம்ப லேஅவுட் பாஸை மிக வேகமாகச் செய்ய முடியும், ஏனெனில் அது திரைக்கு வெளியே உள்ள கூறுகளுக்கு அவற்றின் உள்ளடக்கங்களின் சிக்கலான லேஅவுட்டைக் கணக்கிடுவதற்குப் பதிலாக, ப்ளேஸ்ஹோல்டர் `contain-intrinsic-size`-ஐ மட்டுமே பயன்படுத்த வேண்டும். இதன் பொருள் ஒரு வேகமான Time to Interactive.

`content-visibility`-இன் நன்மைகள்:

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

வரம்புகள்:

• ஒரு வெள்ளித் குண்டு அல்ல: இது ரெண்டரிங் வேலையை ஒத்திவைத்தாலும், உலாவி அனைத்து DOM முனைகளின் இருப்பையும் அங்கீகரிக்கிறது. பல்லாயிரக்கணக்கான உருப்படிகளைக் கொண்ட பட்டியல்களுக்கு, முனைகளின் எண்ணிக்கை மட்டுமே கணிசமான நினைவகம் மற்றும் ஸ்டைல் மற்றும் மரம் மேலாண்மைக்கு சில CPU-ஐ நுகர முடியும். இந்த தீவிர நிகழ்வுகளில், மெய்நிகராக்கம் மேலானது.
• துல்லியமான அளவு: `contain-intrinsic-size`-இன் செயல்திறன், நீங்கள் ஒரு நியாயமான துல்லியமான ப்ளேஸ்ஹோல்டர் அளவை வழங்குவதைப் பொறுத்தது. உங்கள் உருப்படிகள் மிகவும் மாறுபட்ட உள்ளடக்க உயரங்களைக் கொண்டிருந்தால், சில உள்ளடக்க மாற்றத்தை ஏற்படுத்தாத ஒரு ஒற்றை மதிப்பைத் தேர்ந்தெடுப்பது சவாலாக இருக்கலாம்.
• உலாவி ஆதரவு: நவீன Chromium-அடிப்படையிலான உலாவிகள் மற்றும் Firefox-இல் ஆதரவு நன்றாக இருந்தாலும், அது இன்னும் உலகளாவியதாக இல்லை. ஒரு முக்கியமான அம்சமாக அதை வரிசைப்படுத்துவதற்கு முன்பு எப்போதும் CanIUse.com போன்ற ஒரு மூலத்தைச் சரிபார்க்கவும்.

மேம்படுத்தல் உத்தி 3: ஜாவாஸ்கிரிப்ட்-Debounced DOM கையாளுதல்

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

பிரச்சனை: ஆயிரம் வெட்டுகளால் மரணம்

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

            
// ANTI-PATTERN: This triggers a layout recalculation for every single item!
socket.on('newItem', (itemData) => {
  const newItemElement = document.createElement('div');
  newItemElement.className = 'snap-item';
  newItemElement.textContent = itemData.text;
  container.prepend(newItemElement);
});

            

              
                Copy
              
            
          

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

தீர்வு: உங்கள் புதுப்பிப்புகளைத் தொகுப்பாக்குங்கள்

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

உலாவி அடுத்த பிரேமை பெயிண்ட் செய்வதற்கு சற்று முன்பு, நமது DOM கையாளுதல் மிகவும் உகந்த நேரத்தில் நடப்பதை உறுதிசெய்ய `requestAnimationFrame`-ஐப் பயன்படுத்தி இதை மேலும் மேம்படுத்தலாம்.

            
// GOOD PATTERN: Batching DOM updates
let itemBatch = [];
let updateScheduled = false;

socket.on('newItem', (itemData) => {
  itemBatch.push(itemData);

  if (!updateScheduled) {
    updateScheduled = true;
    requestAnimationFrame(updateDOM);
  }
});

function updateDOM() {
  const fragment = document.createDocumentFragment();

  itemBatch.forEach(itemData => {
    const newItemElement = document.createElement('div');
    newItemElement.className = 'snap-item';
    newItemElement.textContent = itemData.text;
    fragment.appendChild(newItemElement);
  });

  container.prepend(fragment);

  // Reset for the next batch
  itemBatch = [];
  updateScheduled = false;
}

            

              
                Copy
              
            
          

இந்த debounced/batched அணுகுமுறை, செலவுமிக்க, தனிப்பட்ட புதுப்பிப்புகளின் தொடரை ஒரு ஒற்றை, திறமையான செயல்பாடாக மாற்றுகிறது, உங்கள் ஸ்க்ரோல் ஸ்னாப் இடைமுகத்தின் பதிலளிக்கும் தன்மையைப் பாதுகாக்கிறது.

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

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

மீடியாவை சோம்பேறித்தனமாக ஏற்றுதல் (Lazy Loading Media)

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