Totuus CSS-valitsimen suorituskyvystä

Jestas, anna olla Patrick Brosset puhua CSS:n suorituskyvystä mahdollisimman helposti lähestyttävällä ja käytännöllisellä tavalla. Ei niin, että CSS on aina mikä nopeuttaa, tai jopa alhaisimmillaan roikkuvilla hedelmillä, kun on kyse suorituskyvyn parantamisesta.

Mutta if Jos etsit etuja CSS-puolella, Patrickilla on mukava tapa haistaa kalleimmat valitsimet Edge DevToolsin avulla:

• Avaa DevTools.
• Siirry Suorituskyky-välilehteen.
• Varmista, että "Ota käyttöön edistynyt renderöintiinstrumentointi" -vaihtoehto on käytössä. Tämä sai minut järkyttymään tässä prosessissa.
• Tallenna sivulataus.
• Avaa raportin "Alhaalta ylös" -välilehti.
• Tarkista uudelleen laskettujen tyylien koko.

Napsauta tästä päävesiputousnäkymässä jotakin Uudelleenlaskettu tyyli -tapahtumaa, niin saat uuden "Valitsintilastot" -välilehden. Katsokaa kaikkea sitä tahmeaa hyvyyttä!

Nyt näet kaikki käsitellyt valitsimet ja ne voidaan lajitella sen mukaan, kuinka kauan ne kestivät, kuinka monta kertaa ne täsmäsivät, täsmäämisyritysten lukumäärän ja "nopean hylkäysmäärän" mukaan. Opin on niiden elementtien lukumäärä, jotka oli helppo ja nopea poistaa vastaavuudesta.

Täällä on paljon oivalluksia, onko CSS todella se pullonkaula, joka vaatii tutkimista. Mutta lue Patrickin koko viesti Microsoft Edge -blogista, koska hän perehtyy paljon syvemmälle miksi ja miten - ja käy läpi koko tapaustutkimuksen.

Suora linkki →

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/the-truth-about-css-selector-performance/