Wydajność CSS w odniesieniu do dziedziczenia

Jestem świadomy, że reguły ID są szybsze niż reguły klasowe, które są szybsze niż reguły znaczników, które są szybsze niż reguły uniwersalne, jak wspomniano w artykule MDN. Moje pytanie dotyczy wydajności CSS w odniesieniu do dziedziczenia. Na przykład, który z poniższych jest bardziej wydajny?Wydajność CSS w odniesieniu do dziedziczenia

body { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 16px; 
} 

h1 { 
    font-family: Georgia, serif; 
    font-size: 36px; 
    font-weight: 700; 
}

lub

h1 { 
    font-family: Georgia, serif; 
    font-size: 36px; 
    font-weight: 700; 
} 

.article-text { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 16px; 
}

Chociaż istnieje tylko jedna <body> tag w DOM, nie może być setki p.article-text elementów. Ponieważ istnieje tylko jeden znacznik <body>, czy oznacza to, że styl <body> jest bardziej wydajny, mimo że chciałbym zmienić elementy <h1>? A może bardziej skuteczne jest stylizowanie elementów .article-text, ponieważ używałoby to bardziej specyficznego selektora i nie musiałbym się martwić o zmianę elementów <h1>?

Zawsze się nad tym zastanawiałem. Myśli?

Źródło

2013-07-20 Marcus McLean

Czy benchmark i dowiedzieć się? – cimmanon

Przypuszczam, że "kaskadowanie" CSS (dziedziczenie stylów z elementów nadrzędnych) jest bardzo wydajne. To wcale nie wymaga selektora. Rozumiem, że 'body' powinno być stylizowane tak, jak chcesz, aby główny korpus zwykłego tekstu w stylu dokumentu był taki, jaki jest jego pojemnik. –

W wielkim schemacie wydajności strony [nie warto się tym martwić] (http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/) (lub przynajmniej nie warto się tym przejmować, dopóki nie zajmiesz się wieloma innymi czynnikami: konkatenacją, minifikacją itp.) – steveax

Myślę, że artykuł MDN, który pokazałeś, jest napisany w szkodliwy sposób, ponieważ proponuje skupić się na mikrooptymalizacjach CSS, a prawie zawsze szybkość strony może być zwiększany na różne sposoby (np. Google Page Speed ma interesujące wskazówki).

Nie pamiętam żadnej sytuacji na moich stronach internetowych, gdzie CSS było wąskim gardłem. Na niektórych stronach możesz zobaczyć "Oś czasu" w Narzędziach dla programistów Chrome i zauważyć, że ilość czasu poświęconego na pracę ze stylami jest zwykle nieznaczna w porównaniu do innych wydarzeń.

Gdybym miał dać rady, wolałbym pójść w drugą stronę i używać CSS Narzędzia wstępnego przetwarzania jak SASS lub LESS poprawić konserwacji. Może to nawet pomóc zmniejszyć liczbę reguł.

Źródło

2013-10-02 10:15:25

Jak wspomniano przez steveax. Nie warto się tym martwić. Co więcej, odpowiedź naprawdę zależy od przeglądarki i od faktycznie podanego HTML.

Źródło

2013-07-20 18:52:21

Powiedziałabym, że ten najwyższy jest prawdopodobnie szybszy z dwóch ale tbh, jak wszyscy mówili z przeglądarkami, że mamy ATM, a prędkości urządzeń i połączeń nie zauważysz różnicy, chyba że masz ogromną stronę, która ma więcej niż 40 - 50 stron, kiedy powinieneś zajrzeć do wąskiej podszewki twojego kodu

Źródło

2013-10-02 10:00:37 Pazrat

Wydajność CSS w odniesieniu do dziedziczenia

Odpowiedz

Powiązane problemy