Adevărul despre performanța selectorului CSS

Doamne, lasă Patrick Brosset să vorbească despre performanța CSS în modul cel mai accesibil și practic posibil. Nu că CSS este întotdeauna ce mărește viteza, sau chiar cel mai jos fruct agățat când vine vorba de îmbunătățirea performanței.

dar if sunteți în căutarea câștigurilor din partea CSS a lucrurilor, Patrick are o modalitate drăguță de a vă adulmeca cele mai scumpe selectoare folosind Edge DevTools:

• Deschideți DevTools.
• Mergeți la fila Performanță.
• Asigurați-vă că aveți opțiunea „Activați instrumentația de randare avansată” activată. Acest lucru m-a împiedicat în acest proces.
• Înregistrați o încărcare a paginii.
• Deschideți fila „De jos în sus” din raport.
• Verificați dimensiunea stilurilor dvs. recalculate.

De aici, faceți clic pe unul dintre evenimentele Stil recalculat din vizualizarea Cascada principală și veți obține o nouă filă „Statistici de selecție”. Uită-te la toată bunătatea aceea!

Acum vedeți toți selectoarele care au fost procesate și pot fi sortate după cât timp au durat, de câte ori s-au potrivit, numărul de încercări de potrivire și ceva numit „număr rapid de respingere”, care am invatat este numărul de elemente care au fost ușor și rapid de eliminat din potrivire.

O mulțime de informații aici dacă CSS este într-adevăr blocajul care trebuie investigat. Dar citiți postarea completă a lui Patrick pe blogul Microsoft Edge, deoarece el aprofundează mult de ce și cum și parcurge un întreg studiu de caz.

Link direct →

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/the-truth-about-css-selector-performance/