Miten kirjoittaa parempaa CSS ää suorituskyvyn mukaan

Tämän päivän postissa pohdimme CSS: ssä tehtyjä koodivalintoja parempien sivustojen suorituskyvyn parantamiseksi. Ennen kuin sukellamme näihin valintoihin, tutustu ensin lyhyesti ja tarkemmin verkkosivun renderointityönkulkuun, jotta voimme keskittyäongelmallisia (suorituskykyisiä) alueita, jotka voidaan ratkaista CSS: n kautta.

Seuraavassa selaimen suorittama toiminta DOM-puun luomisen jälkeen:

1. Laske tyyli uudelleen (ja tee puun luominen). Selain laskee DOM-puun elementteihin sovellettavat tyylit. Myöhemmin luodaan puu, kun hylätään solmut (elementit) DOM-puusta, jota ei haluta tehdä (elementit display: none) ja ne, jotka ovat (pseudoelementit).
2. Asettelu (alias Reflow). Käyttämällä laskennallista tyyliä aikaisemmin selain laskee sivun kunkin elementin sijainnin ja geometrian.
3. maalaa. Kun asettelu on kartoitettu, pikselit vedetään näyttöön.
4. Komposiittikerrokset. Maalauksen aikana maalaus voidaan tehdä eri kerroksissa itsenäisesti; nämä kerrokset yhdistetään lopulta yhteen.

Jatka sitten siihen, mitä voimme tehdä toiminnan kolmessa ensimmäisessä vaiheessa, jotta voisimme kirjoittaa paremmin suoritettavia CSS-koodeja.

1. Pienennä tyylilaskelmia

Kuten aiemmin mainittiin, selaimessa lasketaan tyyli, joka on sovellettavissa elementteihin. Tätä varten selain selvittää ensin kaikki CSS: n valinnat, jotka osoittavat DOM-puun tietylle elementtisolmulle. Sitten se kulkee kaikkien näiden selektorien tyylisääntöjen läpi ja päättää, mitkä niistä tulee tosiasiallisesti soveltaa elementtiin.

Voit välttää kalliita tyylilaskelmia, vähentää monimutkaisia ​​ja syvälle sisäkkäisiä valittimia selaimen on helpompi selvittää, mitä elementtiä valitsin viittaa. Tämä vähentää laskennallista aikaa.

Muita käyttötapoja ovat mm tyylisääntöjen määrän vähentäminen (missä mahdollista), käyttämättömän CSS: n poistaminen ja välttää redundanssi ja ohitus, selaimen ei tarvitse mennä saman tyylin läpi uudestaan ​​ja uudestaan ​​tyylilaskelmien aikana.

2. Vähennä heijastuksia

Elementin muutokset tai asettelujen muutokset ovat hyvin kalliita prosesseja, ja ne voivat olla vielä suurempia ongelmia, kun asettelumuutosten läpi kulkevalla elementillä on huomattava määrä lapsia (koska Reflows hieroo hierarkiaa).

Heijastukset laukaisevat elementin muutokset, kuten geometristen ominaisuuksien, kuten korkeuden tai fonttikoon, muutokset, luokkien lisääminen tai poistaminen elementteihin, ikkunan koon muuttaminen, aktivoitu : hover, DOM muuttuu JavaScriptin avulla jne.

Aivan kuten tyylilaskennassa, heijastusten vähentäminen, välttää monimutkaisia ​​valintoja ja syvä DOM-puita (jälleen kerran tämä estää Reflowsin liiallisen kaskadin).

Jos joudut muuttamaan sivun ulkoasun tyyliä, kohdista elementin tyylien, joka on alimpana elementtien hierarkiassa että komponentti on valmistettu. Tämä on niin, että ulkoasun muutokset eivät aiheuta (lähes) muita heijastuksia.

Jos animoit elokuvan, joka menee ulkoasun muutosten läpi, ota se pois sivuvirrasta mennessä se on ehdottomasti paikallaan, koska Reflow absoluuttisesti sijoitetuissa elementeissä ei vaikuta sivun muihin osiin.

Yhteenvetona:

• Kohdista elementit, jotka ovat pienemmät DOM-puussa, kun asetat muutoksia
• Valitse ehdottomasti sijoitetut elementit ulkoasun muuttamiseen
• Vältä maalausominaisuuksien animointia aina kun mahdollista

3. Vähennä toistoja

Maalaus viittaa kuvapisteiden piirtämiseen ruudulla ja on kallista prosessia aivan kuten Reflow. Refainit, sivun vieritys, ominaisuuksien muutokset, kuten väri, näkyvyys ja opasiteetti, voivat käynnistää uudelleentulokset.

Välttää usein ja valtavia repainteja, käyttää vähemmän ominaisuuksia, jotka aiheuttavat kalliita uudelleentuloksia kuten varjot.

Jos olet animoimassa sellaisen elementin ominaisuuksia, joka voi laukaista uudelleen tai välillisesti uudelleen, se on suuri etu jos tämä elementti on omassa kerroksessaan estämään sen maalauskorvausta vaikuttamasta muualle sivulle ja käynnistämään laitteiston kiihdytystä. Laitteiston kiihdytyksessä GPU: n tehtävänä on suorittaa kerroksen animaatiomuutokset, mikä säästää CPU: n ylimääräistä työtä ja nopeuttaa prosessia.

Joissakin selaimissa, sameus (joiden arvo on alle 1) ja muuttaa (muu kuin ei mitään) mainostetaan automaattisesti uusiin kerroksiin, ja animaatioihin ja siirtymiin sovelletaan laitteiston kiihdytystä. Näiden ominaisuuksien suosiminen animaatioille on siis hyvä.

Voimakkaasti edistää elementtiä uudelle tasolle ja siirry laitteiston kiihdytykseen animaatiota varten on kaksi tekniikkaa:

1. lisätä muunnos: translate3d (0, 0, 0); elementtiin, selaamalla selain laitteiston kiihdytykseen animaatioille ja siirtymille.
2. lisää tulee muuttumaan ominaisuus elementtiin, joka ilmoittaa selaimelle ominaisuuksista, jotka todennäköisesti muuttuvat elementissä tulevaisuudessa. Huomautus: Sara Soueidanilla on syvällinen ja erittäin hyödyllinen artikkeli tästä Dev.Opera-sivustossa.

Yhteenvetona:

• Vältä kalliita tyylejä, jotka aiheuttavat repainteja
• Pyydä kerroksen edistämistä ja laitteistokiihdytystä mojova animaatioille ja siirtymille.

Pistä muistiin

(1) Niinpä nyt, emme ole koskettaneet CSS-tiedoston kokojen pienentämistä. Olemme maininneet, että tyylisääntöjen (ja DOM-elementtien) vähentäminen tekee merkittävästä parannuksesta kuinka paljon selaimen on toimittava Vähemmän tyylien laskentaprosessista. Tämän koodin pienentämisen seurauksena kirjoitetaan parempia valittimia ja poistetaan käyttämätön CSS, tiedoston koko pienenee automaattisesti.

(2) On myös suositeltavaa ei tee liian monta muutosta elementin tyyliin JavaScriptissä. Sen sijaan lisätään luokka elementtiin (JavaScript), joka pitää uudet tyylit näiden muutosten tekemiseksi - tämä estää tarpeettomat palautukset.

(3) Haluat Vältä asettelua samoin (pakotetut synkroniset heijastukset), jotka johtuvat elementtien asetteluominaisuuksien käyttämisestä ja muokkaamisesta JavaScriptin avulla. Lue lisää siitä, miten tämä tappaa suorituskyvyn täällä.