Quantum CSS: w ten sposób nowy Firefox przyspieszy rysowanie stron

Silnik Firefoksa przechodzi przebudowę komponent po komponencie,jednocześnie będąc cały czas w użyciu. Pierwszy z tych nowychkomponentów to Quantum CSS (wcześniej znany jako Stylo). Z rysunkuprzedstawionego na blogu Mozilli można by było powiedzieć, że toodpowiednik kompresora, ale nie idźmy w tę analogię silnika zadaleko…

Quantum CSS, działające już w najnowszym Firefoksie 57 nightlypo ustawieniu wartości flagi layout.css.servo.enabled na true, łączycztery różne osiągnięcia: współbieżność z eksperymentalnejprzeglądarki Servo, drzewo reguł z Firefoksa, bufor współdzieleniastylów z Chrome i Safari oraz liczne optymalizacje CSS opracowanepodczas prac nad Stylo.

Zadaniem silnika CSS jest ustalenie, które reguły stylów stronyprzynależą do którego z węzłów modelu DOM, opisującegostrukturę strony, a następnie ustalenie wartości dla każdejwłaściwości CSS przynależnej danemu węzłowi. W ten sposóbpowstają rozmiary, lokacje, typy i formy takich obiektów jak boksy,tekst, listy, obrazki i wiele innych. Zaczynając swoją pracę,silnik CSS ma do dyspozycji drzewo elementów DOM i listę regułstylów, a później musi węzeł po węźle odpowiednio te styleprzypisać, nadać im wartości, a jeśli wartości brak, ustalićwartości domyślne zgodnie z kaskadowym schematem dziedziczenia.

Wszystko to zachodzi za każdym razem, gdy użytkownik wchodzi winterakcje ze stroną, wprowadzające zmiany do DOM – wówczassilnik CSS musi to wszystko na nowo przeliczyć, a to oczywiściezużywa czas i zasoby. Przeglądarki od dawna robią co mogą, by tenproces zoptymalizować. Jak zapewnia Mozilla, jej nowy silnik poprostu robi to najlepiej.

Po pierwsze, obliczanie stylów dla poszczególnych węzłów DOMzostaje rozłożone pomiędzy dostępne rdzenie procesora. Jako żeniektóre rdzenie będą miały do zrobienia znacznie więcej niżinne, ulepszono to rozłożenie za pomocą sztuczki znanej jakowykradanie pracy. Pomysł ciekawy: podczas przetwarzania węzła DOM,brane są jego węzły potomne i dzielone na pewną liczbę jednostekroboczych, ustawianych w kolejce. Kiedy jeden z rdzeni procesoraskończy swoją kolejkę, może spojrzeć do innych kolejek, czy niema czegoś tam do zrobienia.

Takie rozwiązanie problemu rozdziału pracy na współbieżneprocesy, i to jeszcze w tak skomplikowanym oprogramowaniu jakim jestsilnik CSS, prowadzić może do licznych błędów, związanych zezjawiskiem hazardu (data race). Inżynierowie Mozilli zapewniają, żeuniknęli wszystkich tych błędów dzięki swojemu językowiprogramowania Rust, pozwalającemu statycznie zweryfikować, żehazard nie występuje – po prostu kompilator na to nie pozwala. Topozwala w pełni wykorzystać wielordzeniowe architektury doprzyspieszenia działania silnika CSS: czterordzeniowy procesorporadzi sobie z tym zadaniem niemal czterokrotnie szybciej, niżprocesor jednordzeniowy.

Podczas interakcji strony z użytkownikiem, silnik CSS musi ponownie przejść przez wszystkie reguły w arkuszu CSS, by dopasować je do węzłów DOM zgodnie z selektorami. Większość węzłów i ich elementów potomnych nie zmienia się jednak wskutek interakcji, więc dobrze byłoby uniknąć zbędnego przeliczania, mogąc oznaczać, które reguły odnoszą się do których potomnych elementów, tak by nie trzeba było ich ponownie przeliczać.

Na tym właśnie założeniu bazuje koncepcja drzewa reguł (rule tree), które zostało wykorzystane już wcześniej, w starym silniku Firefoksa. Po ustaleniu pasujących selektorów silnik sortuje je według szczegółowości, z tego zaś tworzy linkowaną listę zasad, dodawany do drzewa, starając się ograniczyć liczbę gałęzi takiego drzewa do minimum (sięgać do już używanej gałęzi gdy tylko można). Jeśli większość selektorów na liście jest taka sama jak w istniejącej gałęzi, to silnik podąży tą samą ścieżką. Tylko wtedy, gdy jakaś nowa reguła nie jest w gałęzi drzewa, zostanie dodana jako nowa gałąź.

Podczas interakcji ze stroną silnik szybko sprawdza, czy zmiana elementu rodzica może wpłynąć na reguły elementów potomnych, przeskakując do momentu gdzie zachodzi zmiana, a przez to omijając dopasowywanie selektorów i sortowanie.

Poprzednia technika pomaga tylko w przerysowywaniu interaktywnych stron. A co z dużymi, bardziej statycznymi stronami? Długi artykuł na Wikipedii może mieć dziesiątki tysięcy węzłów, każdemu z nich trzeba dopasować reguły. Tutaj zastosowano technikę znaną wcześniej z Chrome i Safari.

Jeśli silnikowi uda się wykazać, że każdy kolejny węzeł objęty jest tym samym stylem, to można wyliczyć styl raz, a następnie każdy z tych węzłów skierować do tego samego wyliczenia. Taki wyliczony styl trafia do bufora, a silnik, zanim zacznie obliczać style dla kolejnego węzła przeprowadza test, czy może wykorzystać to, co zostało już wyliczone w buforze. Sprawdzane są więc identyfikatory, klasy, wartości właściwości podanych w osadzonych stylach.

Silniki Google’a i Apple’a kapitulują jednak przy bardziej skomplikowanych selektorach i rezygnują z użycia bufora. Inżynierowie Mozilli zastosowali więc pewne ulepszenie pozwalające wykorzystać bufor nawet w takich sytuacjach. W Quantum CSS zbierane są te nietypowe selektory, by sprawdzić, czy stosują się do węzła DOM. Odpowiedzi zapisywane są w zerojedynkowej postaci w tabeli: jeśli dwa elementy będą miały taki sam ciąg zer i jedynek, to znaczy, że można dla ich użyć tego samego wyliczonego stylu.

Uruchomiony na czterordzeniowym, ośmiowątkowym Intelu Core i7 nowy Firefox Nightly z silnikiem Quantum CSS naprawdę robi wrażenie – długie i skomplikowane strony rysowane są nawet szybciej niż w Chrome. Pobierzcie tę przeglądarkę ze stron Mozilli, ustawcie w panelu about:config właściwość layout.css.servo.enabled na true i przekonajcie się sami. Może zbliża się czas powrotu do Firefoksa?