Ydeevne for CSS-gradienter: gør gradienter et website langsomt?

God ydeevne for CSS-gradienter er det normale: en statisk gradient gør ikke et website langsomt på nogen måde, du kan mærke. Den er en linje tekst, så der er intet at downloade, intet at afkode og intet at vente på. Gradienter koster lidt tegnetid, ligesom enhver anden farve på siden. Langsomme sider kommer af nogle få bestemte mønstre bygget oven på gradienter: store sløringer, gentegning under scroll og animationer, der gentegner hver frame. Denne guide viser, hvad der er hvad, og hvordan du tjekker din egen side.

Indlæsning: gradienter mod billeder

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); er 67 tegn. Den kommer med i dit stylesheet, kræver ingen ekstra forespørgsel og gengives skarpt i enhver størrelse og pixeltæthed. En billedbaggrund kræver sin egen forespørgsel, skal afkodes, før den kan tegnes, og skal være stor nok til store skærme med høj tæthed.

Til enkle og moderat lagdelte baggrunde vinder CSS derfor altid på indlæsning. Billeder giver stadig mening, når baggrunden er virkelig kompleks, som en malerisk mesh-gradient med mange farvepunkter eller en fotografisk tekstur. Så er handlen filvægt mod visuel rigdom, og den kan ofte betale sig.

Tegning: hvad en gradient koster på skærmen

For at vise en gradient beregner browseren en farve for hver pixel, den dækker: det er tegning. Arbejdet vokser med det tegnede areal, antallet af stablede gradientlag og eventuelle effekter oven på. For en statisk baggrund sker det én gang, og resultatet genbruges, mens du scroller eller interagerer, medmindre noget ugyldiggør det.

De reelle risici: sløring, faste baggrunde og animation

Store sløringer. filter: blur() og backdrop-filter aflæser mange omgivende pixler for hver pixel, og arbejdet vokser med både sløringsradius og areal. En sløret gradient, der tegnes én gang, er som regel fin. En backdrop-filter over indhold, der scroller nedenunder, skal genberegnes, mens indholdet bevæger sig, og det er dér, glassmorphism-brugerflader har tendens til at hakke på beskedne telefoner.

Faste baggrunde. background-attachment: fixed holder en baggrund stille, mens siden scroller, hvilket kan tvinge den til at gentegne ved hvert scrolltrin. Vil du have en gradient, der bliver stående, er et position: fixed-element bag indholdet som regel billigere, fordi browseren kan flytte det som et separat lag.

Animation. At flytte background-position eller animere farvestop gennem @property gentegner elementet hver frame. På en knap er det trivielt. På en helskærmshero er det kontinuerligt arbejde, så længe siden er åben, hvilket viser sig som varme og batteriforbrug på telefoner.

/* 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); } }

Guiden om CSS-animerede gradienter har alle teknikkerne, fra den billigste til den mest fleksible.

Lag og will-change

At løfte et element op i sit eget compositor-lag, med will-change: transform eller en aktiv transformanimation, er det, der gør billig animation mulig. Det er ikke gratis: hvert lag holder sit eget bitmap i grafikhukommelsen, cirka bredde × højde × 4 bytes i enhedspixler. Ét overstort lag til en hero-baggrund er fint. Dusinvis af løftede kort, hver med sit eget gradientlag, kan bruge mere hukommelse, end de sparer i tegnetid. Tilføj will-change til de elementer, der rent faktisk animerer, ikke som en generel regel.

Sådan måler du gradienters ydeevne

1. 1

   Slå paint flashing til

   I Chrome DevTools åbner du panelet Rendering og aktiverer Paint flashing. Alt, der blinker grønt, mens intet bør ændre sig, gentegnes.

2. 2

   Optag et Performance-spor

   Optag nogle få sekunder scroll eller ledig animation i panelet Performance. Se, hvor stor en del af hver frame der går til tegning, og om der springes frames over.

3. 3

   Bremse CPU’en

   Brug CPU-drosling i panelet Performance til at simulere en langsommere enhed. En hero, der er jævn på en hurtig laptop, kan hakke på en mellemklassetelefon.

4. 4

   Tjek panelet Layers

   Se, hvor mange compositor-lag der findes, og hvor meget hukommelse de bruger. Uventet mange lag betyder som regel, at will-change er overbrugt.

5. 5

   Test på den rigtige enhed

   Afslut på en rigtig telefon. Varme og batteriforbrug fra konstant animation er lette at overse på en stationær.

web.dev’s guide til renderingsydeevne forklarer pipelinen bag disse værktøjer: style, layout, paint og composite. Når du ved, hvilket trin din gradient udløser, ved du, om den er billig.

En tjekliste til gradienters ydeevne

• Brug CSS-gradienter til enkle og lagdelte baggrunde. Brug kun billeder, når udtrykket virkelig kræver dem.
• Hold sløringsradius moderat, og undgå backdrop-filter over store områder, der scroller.
• Erstat background-attachment: fixed med et lag med fast position.
• Animér transform eller opacity, ikke background-position, på store områder.
• Langsomme, stemningsskabende animationer kan stoppe helt for brugere med reduceret bevægelse.
• Tilføj korn som et lille flisebelagt billede og ikke som et levende SVG-filter på et stort element. Se CSS-støjtekstur.
• Mål før og efter med paint flashing og en Performance-optagelse.