Dlaczego przeglądarki dopasowują selektory CSS od prawej do lewej?

Należy pamiętać, że gdy przeglądarka dopasowuje selektor, ma jeden element (ten, dla którego próbuje określić styl) i wszystkie Twoje reguły i ich selektory i musi znaleźć, które reguły pasują do elementu. To różni się od zwykłej rzeczy jQuery, powiedzmy, gdzie masz tylko jeden Selektor i musisz znaleźć wszystkie elementy, które pasują do tego selektora.

Jeśli masz tylko jeden Selektor i tylko jeden element do porównania z tym selektorem, to od lewej do prawej sprawia, że więcej sens w niektórych przypadkach. Ale to zdecydowanie nie sytuacja przeglądarki. Przeglądarka próbuje renderować Gmaila lub cokolwiek innego i ma ten <span>, który próbuje stylizować i 10 000 + reguł Gmail umieszcza w swoim arkuszu stylów(nie wymyślam tego numeru).

W szczególności, w sytuacji, gdy przeglądarka patrzy na większość selektorów, rozważa nie pasują do danego elementu. Problemem staje się więc decyzja, że selekcjoner nie pasuje tak szybko jak możliwe; jeśli wymaga to trochę dodatkowej pracy w przypadkach, które pasują, nadal wygrywasz ze względu na całą pracę, którą oszczędzasz w przypadkach, które nie pasują.

Jeśli zaczniesz od dopasowania prawej części selektora do swojego elementu, to są szanse, że nie będzie pasował i gotowe. Jeśli pasuje, musisz wykonać więcej pracy, ale tylko proporcjonalnie do głębokości drzewa, która w większości przypadków nie jest tak duża.

Z drugiej strony, jeśli zaczniesz od dopasowania lewej części selektor... z czym go porównujesz? Musisz zacząć chodzić po DOM, szukając węzłów, które mogą pasować do niego. Odkrycie, że nic nie pasuje do tej lewej części może chwilę potrwać.

Tak więc przeglądarki dopasowują się od prawej strony; daje to oczywisty punkt wyjścia i pozwala bardzo szybko pozbyć się większości selektorów kandydatów. Niektóre dane można zobaczyć na http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (choć notacja jest myląca), ale wynik jest taki, że w Gmailu, w szczególności dwa lata temu, dla 70% par (rule, element) można było zdecydować, że reguła nie pasuje po prostu sprawdzając części tag / class / id w prawym selektorze reguły. Odpowiadająca jej Liczba dla pakietu testowego pageload firmy Mozilla wyniosła 72%. Więc naprawdę warto spróbować aby pozbyć się tych 2/3 wszystkich zasad tak szybko, jak to możliwe, a następnie tylko martwić się o dopasowanie pozostałych 1/3.

Zauważ również, że istnieją już inne optymalizacje, które przeglądarki robią, aby uniknąć nawet prób dopasowania reguł, które na pewno nie pasują. Na przykład, jeśli selektor po prawej stronie ma id i ten id nie pasuje do identyfikatora elementu, to nie będzie prób dopasowania selektora do tego elementu w Gecko: zestaw "selektorów z ID", które są próbowane pochodzi z wyszukiwanie hashtable NA ID elementu. Więc jest to 70% reguł, które mają całkiem spore szanse na dopasowanie, że nadal nie pasują po rozważeniu tylko tagu/class/id prawego selektora.