Prawda o wydajności selektora CSS

Jezu, zostaw to Patrick Brosset o wydajności CSS w najbardziej przystępny i praktyczny sposób. Nie to, że CSS jest zawsze co przyspiesza, a nawet najniżej wiszący owoc, jeśli chodzi o poprawę wydajności.

Ale if szukasz korzyści po stronie CSS, Patrick ma niezły sposób na wywęszenie najdroższych selektorów za pomocą Edge DevTools:

• Otwórz DevTools.
• Przejdź do karty Wydajność.
• Upewnij się, że masz włączoną opcję „Włącz zaawansowaną instrumentację renderowania”. To potknęło mnie w trakcie.
• Zarejestruj ładowanie strony.
• Otwórz zakładkę „od dołu do góry” w raporcie.
• Sprawdź swój rozmiar przeliczonych stylów.

W tym miejscu kliknij jedno z wydarzeń stylu przeliczonego w głównym widoku wodospadu, a otrzymasz nową zakładkę „Statystyki selektora”. Spójrz na całą tę lepką dobroć!

Teraz widzisz wszystkie selektory, które zostały przetworzone i można je posortować według czasu trwania, liczby dopasowań, liczby prób dopasowania i czegoś, co nazywa się „liczbą szybkich odrzuceń”, co nauczyłem się to liczba elementów, które można było łatwo i szybko wyeliminować z dopasowywania.

Wiele spostrzeżeń tutaj, jeśli CSS jest naprawdę wąskim gardłem, które wymaga zbadania. Ale przeczytaj cały post Patricka na blogu Microsoft Edge, ponieważ znacznie głębiej omawia dlaczego i jak, i przechodzi przez całe studium przypadku.

Bezpośrednie łącze →

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/the-truth-about-css-selector-performance/