CSS Scroll Snap -suorituskyky: Syväsukellus kohdistuspisteiden laskennan optimointiin

Kun käyttäjä vierittää, pieni määrä JavaScript-koodia suoritetaan laskemaan, mitkä kohteet *pitäisi* nyt olla näkyvissä. Se käyttää sitten uudelleen olemassa olevaa 10-20 DOM-solmun joukkoa, poistaa näkymästä pois vierineiden kohteiden datan ja täyttää ne näkymään tulevien uusien kohteiden datalla.

Virtualisoinnin soveltaminen Scroll Snapiin

Tämä asettaa haasteen. CSS Scroll Snap on deklaratiivinen ja luottaa siihen, että todelliset DOM-elementit ovat läsnä niiden sijaintien laskemiseksi. Jos elementtejä ei ole olemassa, selain ei voi luoda niille kohdistuspisteitä.

Ratkaisu on hybridilähestymistapa. Ylläpidät pientä määrää todellisia DOM-elementtejä vierityskontissasi. Näillä elementeillä on `scroll-snap-align`-ominaisuus ja ne kohdistuvat oikein. Virtualisointilogiikka, jota JavaScript hoitaa, vastaa näiden muutaman DOM-solmun sisällön vaihtamisesta käyttäjän vierittäessä suurempaa, virtuaalista datajoukkoa.

Virtualisoinnin edut:

• Massiivinen suorituskykyhyöty: Selaimen tarvitsee laskea asettelu ja kohdistuspisteet vain kouralliselle elementtejä riippumatta siitä, onko datajoukossasi 1 000 vai 1 000 000 kohdetta. Tämä lähes eliminoi alkuperäisen laskentakustannuksen ja uudelleenlaskentakustannuksen vierityksen aikana.
• Vähentynyt muistinkäyttö: Vähemmän DOM-solmuja tarkoittaa vähemmän selaimen kuluttamaa muistia, mikä on kriittistä suorituskyvylle heikkotehoisilla mobiililaitteilla.

Haitat ja huomiot:

• Lisääntynyt monimutkaisuus: Vaihdat puhtaan CSS:n yksinkertaisuuden JavaScript-pohjaisen ratkaisun monimutkaisuuteen. Olet nyt vastuussa tilanhallinnasta, näkyvien kohteiden laskemisesta ja DOMin tehokkaasta päivittämisestä.
• Saavutettavuus: Virtualisoinnin oikeaoppinen toteuttaminen saavutettavuuden kannalta ei ole triviaalia. Sinun on hallittava fokusta, varmistettava, että ruudunlukijat voivat navigoida sisällössä, ja ylläpidettävä asianmukaisia ARIA-attribuutteja.
• Etsi sivulta (Ctrl/Cmd+F): Selaimen natiivi etsintätoiminto ei toimi sisällölle, jota ei ole tällä hetkellä renderöity DOMiin.

Useimmissa suurissa sovelluksissa suorituskykyhyödyt ylittävät selvästi monimutkaisuuden. Sinun ei tarvitse rakentaa tätä tyhjästä. Erinomaiset avoimen lähdekoodin kirjastot, kuten TanStack Virtual (entinen React Virtual), `react-window` ja `vue-virtual-scroller`, tarjoavat vankkoja, tuotantovalmiita ratkaisuja virtualisoinnin toteuttamiseen.

Optimointistrategia 2: `content-visibility`-ominaisuus

Jos täysimittainen virtualisointi tuntuu käyttötapaukseesi ylimitoitetulta, on olemassa modernimpi, CSS-natiivi lähestymistapa, joka voi tarjota merkittävän suorituskykyparannuksen: `content-visibility`-ominaisuus.

Miten se toimii

Ominaisuus `content-visibility` on voimakas vihje selaimen renderöintimoottorille. Kun asetat elementille `content-visibility: auto;`, kerrot selaimelle:

"Sinulla on lupani ohittaa suurin osa tämän elementin renderöintityöstä (mukaan lukien asettelu ja piirto), jos päättelet, ettei se ole tällä hetkellä käyttäjälle relevantti – eli se on näytön ulkopuolella."

Kun elementti vierii näkymään, selain aloittaa automaattisesti sen renderöinnin juuri ajoissa. Tämä tarpeenmukainen renderöinti voi dramaattisesti vähentää pitkän kohdelistan sisältävän sivun alkuperäistä latausaikaa.

Kumppani `contain-intrinsic-size`

Asiassa on koukku. Jos selain ei renderöi elementin sisältöä, se ei tiedä sen kokoa. Tämä saisi vierityspalkin hyppimään ja muuttamaan kokoaan käyttäjän vierittäessä ja uusien elementtien renderöityessä, mikä loisi kamalan käyttökokemuksen. Tämän ratkaisemiseksi käytämme `contain-intrinsic-size`-ominaisuutta.

contain-intrinsic-size: 300px 500px; (korkeus ja leveys) antaa paikkamerkkikoon elementille ennen sen renderöintiä. Selain käyttää tätä arvoa laskiessaan vierityskontin ja sen vierityspalkin asettelua, estäen kaikki häiritsevät hyppäykset.

Näin sitä sovellettaisiin scroll-snap-kohteiden listaan:

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

.snap-item {
  scroll-snap-align: start;
  /* Taika tapahtuu tässä */
  content-visibility: auto;
  contain-intrinsic-size: 100vh; /* Olettaen koko korkeuden osioita */
}

            

              
                Copy
              
            
          

`content-visibility` ja kohdistuspisteiden laskenta

Tämä tekniikka auttaa merkittävästi alkuperäisessä renderöintikustannuksessa. Selain voi suorittaa alkuperäisen asettelukierroksen paljon nopeammin, koska sen tarvitsee käyttää vain paikkamerkki `contain-intrinsic-size`-arvoa näytön ulkopuolisille elementeille sen sijaan, että se laskisi niiden sisällön monimutkaisen asettelun. Tämä tarkoittaa nopeampaa Time to Interactive -aikaa.

`content-visibility`:n edut:

• Yksinkertaisuus: Se on vain kaksi riviä CSS:ää. Tämä on paljon yksinkertaisempaa toteuttaa kuin täysi JavaScript-virtualisointikirjasto.
• Progressiivinen parantaminen: Selaimet, jotka eivät tue sitä, yksinkertaisesti jättävät sen huomiotta, ja sivu toimii kuten ennenkin.
• Säilyttää DOM-rakenteen: Kaikki kohteet pysyvät DOMissa, joten selaimen natiiviominaisuudet, kuten Etsi sivulta, toimivat edelleen.

Rajoitukset:

• Ei ihmelääke: Vaikka se lykkää renderöintityötä, selain tunnistaa silti kaikkien DOM-solmujen olemassaolon. Kymmenien tuhansien kohteiden listoissa pelkkä solmujen määrä voi silti kuluttaa merkittävästi muistia ja jonkin verran suoritinaikaa tyylien ja puun hallintaan. Näissä äärimmäisissä tapauksissa virtualisointi on ylivoimainen.
• Tarkka mitoitus: `contain-intrinsic-size`-ominaisuuden tehokkuus riippuu siitä, että annat kohtuullisen tarkan paikkamerkkikoon. Jos kohteillasi on hyvin vaihtelevat korkeudet, voi olla haastavaa valita yhtä arvoa, joka ei aiheuta sisällön siirtymistä.
• Selain tuki: Vaikka tuki moderneissa Chromium-pohjaisissa selaimissa ja Firefoxissa on hyvä, se ei ole vielä universaali. Tarkista aina lähde, kuten CanIUse.com, ennen kuin otat sen käyttöön kriittisenä ominaisuutena.

Optimointistrategia 3: JavaScript-viivästetty DOM-manipulaatio

Tämä strategia kohdistuu uudelleenlaskennan suorituskykykustannuksiin dynaamisissa sovelluksissa, joissa kohteita lisätään tai poistetaan usein vierityskontista.

Ongelma: Kuolema tuhannesta haavasta

Kuvittele reaaliaikainen syöte, johon uusia kohteita saapuu WebSocket-yhteyden kautta. Naiivi toteutus voisi liittää jokaisen uuden kohteen DOMiin sen saapuessa:

            
// ANTI-PATTERN: Tämä laukaisee asettelun uudelleenlaskennan jokaiselle kohteelle!
socket.on('newItem', (itemData) => {
  const newItemElement = document.createElement('div');
  newItemElement.className = 'snap-item';
  newItemElement.textContent = itemData.text;
  container.prepend(newItemElement);
});

            

              
                Copy
              
            
          

Jos kymmenen kohdetta saapuu nopeasti peräkkäin, tämä koodi laukaisee kymmenen erillistä DOM-manipulaatiota. Jokainen `prepend()`-operaatio mitätöi asettelun, pakottaen selaimen laskemaan uudelleen kaikkien kontin kohdistuspisteiden sijainnit. Tämä on klassinen syy Layout Thrashing -ilmiölle ja tekee käyttöliittymästä erittäin tökkivän tuntuisen.

Ratkaisu: Eräajele päivityksesi

Avain on niputtaa nämä päivitykset yhdeksi operaatioksi. Sen sijaan, että muokkaisit elävää DOMia kymmenen kertaa, voit rakentaa uudet elementit muistissa olevaan `DocumentFragment`-olioon ja sitten liittää fragmentin DOMiin yhdellä kertaa. Tämä johtaa vain yhteen asettelun uudelleenlaskentaan.

Voimme parantaa tätä edelleen käyttämällä `requestAnimationFrame`-funktiota varmistaaksemme, että DOM-manipulaatiomme tapahtuu optimaalisimpaan aikaan, juuri ennen kuin selain on aikeissa piirtää seuraavan ruudun.

            
// HYVÄ PATTERNI: DOM-päivitysten eräajo
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);

  // Nollaa seuraavaa erää varten
  itemBatch = [];
  updateScheduled = false;
}

            

              
                Copy
              
            
          

Tämä viivästetty/eräajettu lähestymistapa muuttaa sarjan kalliita, yksittäisiä päivityksiä yhdeksi tehokkaaksi operaatioksi, säilyttäen scroll snap -käyttöliittymäsi reagoivuuden.

Edistyneitä huomioita ja parhaita käytäntöjä maailmanlaajuiselle yleisölle

Suorituskyvyn optimointi ei ole vain asioiden nopeuttamista huippuluokan kehittäjäkoneella. Kyse on sujuvan ja saavutettavan kokemuksen varmistamisesta kaikille käyttäjille heidän laitteestaan, verkkonopeudestaan tai sijainnistaan riippumatta. Suorituskykyinen sivusto on inklusiivinen sivusto.

Median laiska lataus

Kohdistuskohteesi sisältävät todennäköisesti kuvia tai videoita. Vaikka virtualisoisit DOM-solmut, kaikkien mediasisältöjen ahne lataaminen 5 000 kohteen listalle olisi katastrofaalista verkon ja muistin käytön kannalta. Yhdistä aina vierityksen suorituskyvyn optimoinnit median laiskaan lataukseen. Natiivi `loading="lazy"`-attribuutti ``- ja `