r   e   k   l   a   m   a
r   e   k   l   a   m   a

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

Strona główna AktualnościOPROGRAMOWANIE

Od końca lipca Firefox z kanału Nightly oferuje nowy system obsługi kaskadowych arkuszy stylów, Quantum CSS. To pierwszy duży komponent nowego silnika przeglądarki Mozilli, rozwijanego w ramach projektu Servo, mający zapewnić znacznie szybsze, wielowątkowe rysowanie stron. Jak możliwe było to przyspieszenie, i co z tego wynika jeszcze dla użytkowników Firefoksa – tego możemy się dowiedzieć z interesującego wpisu na blogu Mozilla Hacks.

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

Quantum CSS, działające już w najnowszym Firefoksie 57 nightly po ustawieniu wartości flagi layout.css.servo.enabled na true, łączy cztery różne osiągnięcia: współbieżność z eksperymentalnej przeglądarki Servo, drzewo reguł z Firefoksa, bufor współdzielenia stylów z Chrome i Safari oraz liczne optymalizacje CSS opracowane podczas prac nad Stylo.

r   e   k   l   a   m   a

Zadaniem silnika CSS jest ustalenie, które reguły stylów strony przynależą do którego z węzłów modelu DOM, opisującego strukturę strony, a następnie ustalenie wartości dla każdej właściwości CSS przynależnej danemu węzłowi. W ten sposób powstają 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 style przypisać, 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 w interakcje ze stroną, wprowadzające zmiany do DOM – wówczas silnik CSS musi to wszystko na nowo przeliczyć, a to oczywiście zużywa czas i zasoby. Przeglądarki od dawna robią co mogą, by ten proces zoptymalizować. Jak zapewnia Mozilla, jej nowy silnik po prostu robi to najlepiej.

Wielowątkowość

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

Takie rozwiązanie problemu rozdziału pracy na współbieżne procesy, i to jeszcze w tak skomplikowanym oprogramowaniu jakim jest silnik CSS, prowadzić może do licznych błędów, związanych ze zjawiskiem hazardu (data race). Inżynierowie Mozilli zapewniają, że uniknęli wszystkich tych błędów dzięki swojemu językowi programowania Rust, pozwalającemu statycznie zweryfikować, że hazard nie występuje – po prostu kompilator na to nie pozwala. To pozwala w pełni wykorzystać wielordzeniowe architektury do przyspieszenia działania silnika CSS: czterordzeniowy procesor poradzi sobie z tym zadaniem niemal czterokrotnie szybciej, niż procesor jednordzeniowy.

Drzewo reguł

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.

Bufor stylów

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.

Pierwsze wrażenia

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?

© dobreprogramy
r   e   k   l   a   m   a
r   e   k   l   a   m   a

Komentarze

r   e   k   l   a   m   a
r   e   k   l   a   m   a
Czy wiesz, że używamy cookies (ciasteczek)? Dowiedz się więcej o celu ich używania i zmianach ustawień.
Korzystając ze strony i asystenta pobierania wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.