CSS Academy · Oppitunti

Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet

Opitte, mitkä ominaisuudet hyödyntävät GPU-kiihdytystä ja mitkä käynnistävät raskaan asettelun uudelleenpiirron.

Oppitunti 4/413 vaihetta

Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Renderöintiputki

Selaimet renderöivät kolmessa vaiheessa: Layout (koko + sijainti) → Paint (pikselit) → Composite (GPU-tasojen yhdistäminen). Aikaisemmissa vaiheissa käsiteltävien ominaisuuksien animointi on raskasta.

Layoutin käynnistävät ominaisuudet

Näiden ominaisuuksien muuttaminen pakottaa selaimen laskemaan asettelun uudelleen mahdollisesti koko sivun osalta. Välttäkää niiden animointia:

width, height
margin, padding
top, left
font-size
display

Paintin käynnistävät ominaisuudet

Nämä ohittavat layout-vaiheen, mutta piirtävät pikselit uudelleen. Ne ovat kohtalaisen raskaita:

background-color
color
box-shadow
border

Vain Compositen käsittelemät ominaisuudet

Nämä ohittavat sekä layout- että paint-vaiheen — selaimen tarvitsee vain koostaa valmiiksi rasteroidut tasot. Ne ovat erittäin kevyitä ja GPU-kiihdytettyjä:

transform
opacity

CSS-animoinnin kultainen sääntö

Sujuvia 60 fps:n animaatioita varten animoikaa vain ominaisuuksia transform ja opacity. Käyttäkää transform: translate() -määritystä top/left-määrityksen sijaan ja opacity-määritystä display-häivytyksen sijaan.

  <div class="box demo-active">Box</div>

will-change-ominaisuus

will-change ilmoittaa selaimelle, että elementti tulee siirtää omalle GPU-tasolleen ennen animoinnin alkamista. Näin kesken animoinnin tapahtuva "promotion flash" vältetään.

  <div class="animated">Animated</div>

will-change: auto

Asettakaa will-change: auto tai poistakaa ominaisuus kokonaan animointien päätyttyä. Liian monen elementin pitäminen omalla tasollaan kuluttaa turhaan GPU-muistia.

Mittaus DevToolsilla

Voitte tallentaa ja tutkia kehysten ajoitusta Chromen DevToolsin Performance-välilehdellä. Rendering-välilehden paint flashing -toiminto (vihreä peite) näyttää, mitkä elementit piirretään uudelleen kullakin kehyksellä.

transform top/left-määrityksen sijaan

Vaikuttavin optimointi on korvata sijaintiin perustuvat animaatiot transform-määrityksellä:

  <div class="fly demo-active">Fly</div>

Värisiirtymän kustannus

Taustavärin siirtymät käynnistävät uudelleenpiirron, mutta eivät layout-vaihetta. Ne sopivat pienille elementeille. Suurissa taustoissa voitte harkita pseudo-elementin käyttämistä opacity-siirtymän kanssa:

  <button class="btn demo-active">Hover me</button>

contain-ominaisuus

contain-ominaisuus vihjaa selaimelle, että elementti ja sen alipuusto ovat toisistaan riippumattomia. Tämä rajoittaa layoutin mitätöinnin laajuutta ja parantaa uudelleenpiirron suorituskykyä.

  <div class="widget">Widget</div>

Pikatarkistus

Mitkä kaksi CSS-ominaisuutta voidaan animoida Compositen vaiheessa ilman layout- tai paint-vaiheen käynnistymistä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Layout-ominaisuuksien (width, top, margin) animointi käynnistää raskaita uudelleenlaskentoja. Paint-ominaisuudet (color, background) ovat kevyempiä. Vain transform ja opacity voidaan animoida GPU:n Composite-vaiheessa ilman layout- tai paint-vaiheen käynnistymistä. Sujuvissa ja tehokkaissa animaatioissa suosikaa aina näitä ominaisuuksia.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet” ilmainen?

Kyllä – oppitunnin ”Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet”?

Opitte, mitkä ominaisuudet hyödyntävät GPU-kiihdytystä ja mitkä käynnistävät raskaan asettelun uudelleenpiirron. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Siirtymäominaisuuden kesto ja ajoitus
Hidastuskäyrät: ease, linear, cubic-bezier
Useiden ominaisuuksien siirtymät
Suorituskyky: muunnettavat ja uudelleenpiirtoa aiheuttavat ominaisuudet

← Takaisin: CSS Academy