Prestanda i CSS Scroll Snap: En djupdykning i optimering av beräkning av fästpunkter

När användaren scrollar körs en liten mängd JavaScript för att beräkna vilka element som *borde* vara synliga nu. Den återanvänder sedan den befintliga poolen av 10-20 DOM-noder, tar bort data från de element som har scrollat ut ur synfältet och fyller dem med data för de nya elementen som scrollar in.

Applicera virtualisering på Scroll Snap

Detta utgör en utmaning. CSS Scroll Snap är deklarativt och förlitar sig på att verkliga DOM-element finns på plats för att beräkna deras positioner. Om elementen inte finns kan webbläsaren inte skapa fästpunkter för dem.

Lösningen är en hybridstrategi. Du behåller ett litet antal verkliga DOM-element inom din scroll-behållare. Dessa element har egenskapen `scroll-snap-align` och kommer att fästa korrekt. Virtualiseringslogiken, som hanteras av JavaScript, ansvarar för att byta ut innehållet i dessa få DOM-noder när användaren scrollar genom den större, virtuella datamängden.

Fördelar med virtualisering:

• Massiv prestandavinst: Webbläsaren behöver bara beräkna layouten och fästpunkterna för en handfull element, oavsett om din datamängd har 1 000 eller 1 000 000 objekt. Detta eliminerar nästan den initiala beräkningskostnaden och omberäkningskostnaden under scrollning.
• Minskad minnesanvändning: Färre DOM-noder innebär mindre minne som förbrukas av webbläsaren, vilket är avgörande för prestanda på enklare mobila enheter.

Nackdelar och överväganden:

• Ökad komplexitet: Du byter enkelheten i ren CSS mot komplexiteten i en JavaScript-driven lösning. Du är nu ansvarig för att hantera tillstånd, beräkna synliga element och uppdatera DOM effektivt.
• Tillgänglighet: Att implementera virtualisering korrekt ur ett tillgänglighetsperspektiv är inte trivialt. Du måste hantera fokus, se till att skärmläsare kan navigera i innehållet och upprätthålla korrekta ARIA-attribut.
• Hitta på sidan (Ctrl/Cmd+F): Webbläsarens inbyggda sökfunktion fungerar inte för innehåll som för närvarande inte är renderat i DOM.

För de flesta storskaliga applikationer överväger prestandafördelarna vida komplexiteten. Du behöver inte bygga detta från grunden. Utmärkta open source-bibliotek som TanStack Virtual (tidigare React Virtual), `react-window` och `vue-virtual-scroller` erbjuder robusta, produktionsklara lösningar för att implementera virtualisering.

Optimeringsstrategi 2: Egenskapen `content-visibility`

Om fullskalig virtualisering känns som överkurs för ditt användningsfall, finns det ett modernare, CSS-inbyggt tillvägagångssätt som kan ge en betydande prestandaförbättring: egenskapen `content-visibility`.

Hur det fungerar

Egenskapen `content-visibility` är en kraftfull ledtråd till webbläsarens renderingsmotor. När du sätter `content-visibility: auto;` på ett element, talar du om för webbläsaren:

"Du har mitt tillstånd att hoppa över det mesta av renderingsarbetet för detta element (inklusive layout och paint) om du bedömer att det för närvarande inte är relevant för användaren – dvs. det är utanför skärmen."

När elementet scrollar in i visningsområdet börjar webbläsaren automatiskt rendera det precis i tid. Denna on-demand-rendering kan dramatiskt minska den initiala laddningstiden för en sida med en lång lista av element.

Komplementet `contain-intrinsic-size`

Det finns en hake. Om webbläsaren inte renderar ett elements innehåll vet den inte dess storlek. Detta skulle få scroll-listen att hoppa och ändra storlek när användaren scrollar och nya element renderas, vilket skapar en hemsk användarupplevelse. För att lösa detta använder vi egenskapen `contain-intrinsic-size`.

contain-intrinsic-size: 300px 500px; (höjd och bredd) ger en platshållarstorlek för elementet innan det renderas. Webbläsaren använder detta värde för att beräkna layouten för scroll-behållaren och dess scroll-list, vilket förhindrar störande hopp.

Så här skulle du tillämpa det på en lista med scroll-snap-element:

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

.snap-item {
  scroll-snap-align: start;
  /* Magin händer här */
  content-visibility: auto;
  contain-intrinsic-size: 100vh; /* Förutsatt sektioner i fullhöjd */
}

            

              
                Copy
              
            
          

`content-visibility` och beräkning av fästpunkter

Denna teknik hjälper avsevärt med den initiala renderingskostnaden. Webbläsaren kan utföra den initiala layout-passningen mycket snabbare eftersom den bara behöver använda platshållaren `contain-intrinsic-size` för elementen utanför skärmen, istället för att beräkna den komplexa layouten av deras innehåll. Detta innebär en snabbare Time to Interactive.

Fördelar med `content-visibility`:

• Enkelhet: Det är bara två rader CSS. Detta är mycket enklare att implementera än ett fullständigt JavaScript-virtualiseringsbibliotek.
• Progressive Enhancement: Webbläsare som inte stöder det kommer helt enkelt att ignorera det, och sidan kommer att fungera som den gjorde tidigare.
• Bevarar DOM-strukturen: Alla element förblir i DOM, så inbyggda webbläsarfunktioner som Hitta på sidan fortsätter att fungera.

Begränsningar:

• Ingen universallösning: Även om det skjuter upp renderingsarbetet, erkänner webbläsaren fortfarande existensen av alla DOM-noder. För listor med tiotusentals element kan det stora antalet noder fortfarande förbruka betydande minne och en del CPU för stil- och trädhantering. I dessa extrema fall är virtualisering fortfarande överlägset.
• Exakt storleksangivelse: Effektiviteten av `contain-intrinsic-size` beror på att du anger en någorlunda korrekt platshållarstorlek. Om dina element har mycket varierande innehållshöjder kan det vara utmanande att välja ett enda värde som inte orsakar viss innehållsförskjutning.
• Webbläsarstöd: Även om stödet i moderna Chromium-baserade webbläsare och Firefox är bra, är det ännu inte universellt. Kontrollera alltid en källa som CanIUse.com innan du använder det som en kritisk funktion.

Optimeringsstrategi 3: JavaScript-debounced DOM-manipulation

Denna strategi riktar in sig på prestandakostnaden för omberäkning i dynamiska applikationer där element ofta läggs till eller tas bort från scroll-behållaren.

Problemet: Död av tusen småsår

Föreställ dig ett liveflöde där nya objekt anländer via en WebSocket-anslutning. En naiv implementering kan lägga till varje nytt objekt i DOM när det anländer:

            
// ANTI-MÖNSTER: Detta utlöser en layout-omberäkning för varje enskilt objekt!
socket.on('newItem', (itemData) => {
  const newItemElement = document.createElement('div');
  newItemElement.className = 'snap-item';
  newItemElement.textContent = itemData.text;
  container.prepend(newItemElement);
});

            

              
                Copy
              
            
          

Om tio objekt anländer i snabb följd utlöser denna kod tio separata DOM-manipulationer. Varje `prepend()`-operation ogiltigförklarar layouten och tvingar webbläsaren att beräkna om positionerna för alla fästpunkter i behållaren. Detta är en klassisk orsak till Layout Thrashing och kommer att få gränssnittet att kännas extremt hackigt.

Lösningen: Gruppera dina uppdateringar

Nyckeln är att gruppera dessa uppdateringar till en enda operation. Istället för att modifiera den levande DOM tio gånger kan du bygga upp de nya elementen i ett `DocumentFragment` i minnet och sedan lägga till fragmentet i DOM på en gång. Detta resulterar i endast en layout-omberäkning.

Vi kan ytterligare förbättra detta genom att använda `requestAnimationFrame` för att säkerställa att vår DOM-manipulation sker vid den mest optimala tidpunkten, precis innan webbläsaren ska måla nästa bildruta.

            
// BRA MÖNSTER: Gruppera DOM-uppdateringar
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);

  // Återställ för nästa omgång
  itemBatch = [];
  updateScheduled = false;
}

            

              
                Copy
              
            
          

Detta "debounced"/grupperade tillvägagångssätt omvandlar en serie kostsamma, individuella uppdateringar till en enda, effektiv operation, vilket bevarar responsiviteten i ditt scroll snap-gränssnitt.

Avancerade överväganden och bästa praxis för en global publik

Att optimera prestanda handlar inte bara om att göra saker snabba på en avancerad utvecklardator. Det handlar om att säkerställa en smidig och tillgänglig upplevelse för alla användare, oavsett deras enhet, nätverkshastighet eller plats. En högpresterande webbplats är en inkluderande webbplats.

Lat laddning av media

Dina fästelement innehåller troligen bilder eller videor. Även om du virtualiserar DOM-noderna skulle det vara katastrofalt för nätverks- och minnesanvändningen att ivrigt ladda alla mediatillgångar för en lista med 5 000 objekt. Kombinera alltid optimeringar av scroll-prestanda med lat laddning (lazy loading) av media. Det inbyggda attributet `loading="lazy"` på ``- och `