CSS-liukuvärin suorituskyky: hidastavatko liukuvärit sivua?

Hyvä CSS-liukuvärin suorituskyky on normaalitilanne: staattinen liukuväri ei hidasta verkkosivua millään huomattavalla tavalla. Se on tekstirivi, joten ei ole mitään ladattavaa, purettavaa tai odotettavaa. Liukuvärit maksavat hieman piirtoaikaa kuten kaikki muutkin sivun värit. Hitaat sivut syntyvät muutamasta liukuvärien päälle rakennetusta tavasta: suurista sumennuksista, vierittäessä tapahtuvasta uudelleenpiirrosta ja animaatioista, jotka piirtyvät uudelleen joka ruudulla. Tämä opas näyttää, mikä on mitäkin ja miten oman sivusi voi tarkistaa.

Lataus: liukuvärit vastaan kuvat

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); on 67 merkkiä. Se tulee tyylitiedostosi mukana, ei tarvitse erillistä pyyntöä ja piirtyy terävänä missä tahansa koossa ja pikselitiheydessä. Kuvataustalle tarvitaan oma pyyntö, se pitää purkaa ennen piirtämistä, ja sen täytyy olla riittävän suuri isoille ja tiheille näytöille.

Yksinkertaisissa ja kohtuullisen monikerroksisissa taustoissa CSS voittaa latauksessa aina. Kuvilla on silti paikkansa, kun tausta on aidosti monimutkainen, kuten maalauksellinen mesh-liukuväri, jossa on monta värikohtaa, tai valokuvamainen tekstuuri. Silloin vaihdat tiedostopainoa visuaaliseen rikkauteen, ja se kannattaa usein.

Piirtäminen: mitä liukuväri maksaa ruudulla

Liukuvärin näyttämiseksi selain laskee värin jokaiselle peittämälleen pikselille: sitä kutsutaan piirtämiseksi. Työ kasvaa piirretyn alueen, päällekkäisten liukuvärikerrosten ja niiden päälle lisättyjen tehosteiden mukana. Staattisella taustalla se tapahtuu kerran, ja tulos käytetään uudelleen vierittäessä ja käyttäessä sivua, ellei jokin mitätöi sitä.

Todelliset riskit: sumennus, kiinteät taustat ja animaatio

Suuret sumennukset. filter: blur() ja backdrop-filter ottavat jokaisen pikselin kohdalla näytteitä monista ympäröivistä pikseleistä, ja työ kasvaa sekä sumennussäteen että alueen mukana. Kerran piirretty sumennettu liukuväri on yleensä kunnossa. backdrop-filter vierivän sisällön päällä pitää laskea uudelleen sisällön liikkuessa, ja siksi glassmorphism-käyttöliittymät tökkivät herkästi vaatimattomilla puhelimilla.

Kiinteät taustat. background-attachment: fixed pitää taustan paikallaan sivun vieriessä, mikä voi pakottaa sen piirtymään uudelleen jokaisella vierityksen askeleella. Jos haluat liukuvärin, joka pysyy paikallaan, sisällön takana oleva position: fixed -elementti on yleensä halvempi, koska selain voi siirtää sitä erillisenä kerroksena.

Animaatio. background-positionin liikuttaminen tai värikohtien animointi @property:n kautta piirtää elementin uudelleen joka ruudulla. Painikkeessa se on vähäpätöistä. Koko ruudun hero-alueella se on jatkuvaa työtä niin kauan kuin sivu on auki, ja se näkyy puhelimissa lämpönä ja akun kulutuksena.

/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }

CSS-animoidun liukuvärin oppaassa on koko tekniikkajoukko halvimmasta joustavimpaan.

Kerrokset ja will-change

Elementin nostaminen omalle kokoonpanokerrokselleen will-change: transform -asetuksella tai käynnissä olevalla transform-animaatiolla tekee halvan animaation mahdolliseksi. Se ei ole ilmaista: jokainen kerros pitää omaa bittikarttaansa grafiikkamuistissa, suunnilleen leveys × korkeus × 4 tavua laitepikseleinä. Yksi ylisuuri kerros hero-taustalle on hyvä. Kymmenet korotetut kortit, joilla kullakin on oma liukuvärikerroksensa, voivat käyttää enemmän muistia kuin säästävät piirtoajassa. Lisää will-change niille elementeille, jotka oikeasti animoituvat, älä yleissääntönä.

Miten liukuvärin suorituskyky mitataan

1. 1

   Ota paint flashing käyttöön

   Avaa Chrome DevToolsissa Rendering-paneeli ja ota käyttöön Paint flashing. Kaikki, mikä vilkkuu vihreänä silloin kun mitään ei pitäisi muuttua, piirtyy uudelleen.

2. 2

   Tallenna Performance-jälki

   Tallenna Performance-paneelissa muutama sekunti vierittämistä tai tyhjäkäyntiä. Katso, kuinka suuri osa kustakin ruudusta kuluu piirtämiseen ja pudotaanko ruuduista.

3. 3

   Hidasta suoritinta

   Simuloi hitaampaa laitetta Performance-paneelin suorittimen rajoituksella. Nopealla kannettavalla sulava hero-alue voi tökkiä keskihintaisella puhelimella.

4. 4

   Tarkista Layers-paneeli

   Katso, kuinka monta kokoonpanokerrosta on ja paljonko muistia ne käyttävät. Odottamattoman monta kerrosta tarkoittaa yleensä, että will-changeia on käytetty liikaa.

5. 5

   Kokeile oikealla laitteella

   Viimeistele oikealla puhelimella. Jatkuvan animaation aiheuttama lämpö ja akun kulutus jäävät helposti huomaamatta työpöydällä.

web.devin renderöintisuorituskykyopas selittää näiden työkalujen taustalla olevan putken: tyylit, asettelu, piirto ja kokoonpano. Kun tiedät, mihin vaiheeseen liukuvärisi vaikuttaa, tiedät myös, onko se halpa.

Suorituskykytarkistuslista liukuväreille

• Käytä CSS-liukuvärejä yksinkertaisiin ja monikerroksisiin taustoihin, kuvia vain kun ilme aidosti vaatii ne.
• Pidä sumennussäteet kohtuullisina ja vältä backdrop-filteria suurilla vierivillä alueilla.
• Korvaa background-attachment: fixed kiinteällä kerroksella.
• Animoi suurilla alueilla transformia tai opacitya, älä background-positionia.
• Hitaat, tunnelmaa luovat animaatiot voivat pysähtyä kokonaan vähennettyä liikettä haluaville käyttäjille.
• Lisää rakeisuus pienenä toistuvana kuvana, älä elävänä SVG-suodattimena suurella elementillä; katso CSS-kohinatekstuuri.
• Mittaa ennen ja jälkeen paint flashingilla ja Performance-tallenteella.