Próbuję znaleźć kilka prostych usprawnień wydajności po stronie klienta na stronie, która otrzymuje miliony miesięcznych odsłon strony. Jedną z moich obaw jest użycie uniwersalnego selektora CSS (*).Jaki jest wpływ selektora uniwersalnego na wydajność?
Jako przykład rozważmy bardzo prosty dokument HTML jak następuje:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Uniwersalny selektor będzie stosować powyższą deklarację dla body, h1 i p elementów, ponieważ te są jedynymi w dokument.
Generalnie chciałbym zobaczyć lepsze osiągi od reguły, takie jak:
body, h1, p {
margin: 0;
padding: 0;
}
lub mogłoby to mieć dokładnie ten sam efekt netto?
Czy selektor uniwersalny wykonuje więcej pracy, o czym być może nie jestem świadomy?
Zdaję sobie sprawę, że wpływ na wydajność w tym przykładzie może być bardzo mały, ale mam nadzieję, że dowiem się czegoś, co może prowadzić do znaczącej poprawy wydajności w rzeczywistych sytuacjach.
Nie zamierzam zastępować stylów w regule selektora uniwersalnego innymi stylami w dalszej części dokumentu - tzn. Używać go jako szybkiego i brudnego arkusza stylów resetowania. Właściwie próbuję użyć uniwersalnego selektora dokładnie tak, jak myślę, że jest on zamierzony - aby raz na zawsze zastosować zestaw reguł do wszystkich elementów w dokumencie.
Ostatecznie, mam nadzieję ustalić, czy coś jest nieodłącznie powolne w uniwersalnym selektorze, czy też po prostu ma zły rap z powodu szalejącego niewłaściwego użycia. Jeśli * { margin: 0; } jest dosłownie równoważny z body, h1, p { margin: 0; }, to odpowie na moje pytanie, a ja będę wiedział, aby przejść do tego pierwszego, ponieważ jest bardziej zwięzły. Jeśli nie, chcę zrozumieć, dlaczego selektor uniwersalny działa wolniej.
Z punktu widzenia wydajności, kiedy lepiej jest globalnie wyłączyć (lub włączyć) charakterystykę _Wszystko_ tylko w celu jej ponownego ustawienia? Nauka domyślnych ustawień przeglądarki nie zajmie Ci dużo czasu - możesz uzyskać wskazówki z "resetowania" plików CSS, ale nie posunąłbym się tak daleko, aby faktycznie użyć jednego. Przeglądarki open source mają domyślne ustawienia CSS typu open source. – reisio
Nie jestem pewien, czy zrozumiałeś moje pytanie. Nie chcę resetować, a następnie ponownie stosować stylów tutaj, ale raczej zastosować regułę do każdego elementu na stronie. Moje pytanie brzmi, czy technicznie to samo stosuje się selektor uniwersalny, ponieważ polega on na tym, że każdy element jest wybierany pojedynczo, lub jeśli z jakiegokolwiek powodu ma miejsce kara pieniężna. – Bungle
'*' nie jest dosłownie odpowiednikiem 'body, h1, p' z oczywistych powodów. Jedynym powodem, dla którego działa wolniej, jest stosowanie stylów do wszystkiego, podczas gdy inne selektory ograniczają do określonego podzbioru elementów w DOM. Ale prawdziwe pytanie brzmi: czy jest o wiele wolniej, że przeglądarka przestanie reagować na stosowanie zbyt wielu stylów? Szczerze w to wątpie. Zobacz także: [* {box-sizing: border-box} FTW] (http://paulirish.com/2012/box-sizing-border-box-ftw) – BoltClock