Nowoczesna przeglądarka internetowa (część 1)

Mariko Kosaka

Procesor, GPU, pamięć i architektura wieloprocesowa

W tej 4-częściowej serii postów na blogu przyjrzymy się wnętrzu przeglądarki Chrome, od architektury wysokiego poziomu po na temat specyfiki potoku renderowania. Jeśli zastanawiasz się, w jaki sposób przeglądarka przekształca kod w kod witryna funkcjonuje lub nie masz pewności, dlaczego zalecana jest konkretna technika jak je ulepszać, ta seria jest dla Ciebie.

W pierwszej części przyjrzymy się podstawowej terminologii obliczeniowej oraz architekturę wieloprocesową.

CPU i GPU są podstawą komputera

Aby zrozumieć środowisko, w którym działa przeglądarka, musimy poznać o częściach komputerowych i ich działaniu.

CPU

CPU
Rysunek 1. 4 rdzenie procesora jako pracownicy biurowi siedzących przy każdym biurku wykonującym zadania

Pierwszy to centryczny proces. Procesor może być uznawany za w mózgu komputera. Rdzeń procesora, przedstawiony tutaj jako pracownik biurowy, może wykonywać wiele różnych zadań jeden po drugim. Potrafi poradzić sobie z wszystkimi zadaniami – od matematyki po sztukę, nie rezygnując z odpowiednich odpowiedzi do rozmowy z klientem. W przeszłości większość procesorów odpowiadała jednemu układowi. Rdzeń jest jak inny procesor żywy ten sam element. Nowoczesny sprzęt często obejmuje więcej niż 1 rdzeń, co zapewnia większą moc obliczeniową. bezpośrednio na telefony i laptopy.

GPU

GPU
Rysunek 2. Wiele rdzeni GPU z kluczem sugerującym, że obsługują one ograniczone zadanie

Przetwarzanie technologii Unit – czyli GPU to inna część komputera. W przeciwieństwie do procesora GPU świetnie radzi sobie z prostymi zadaniami, ale używa też wielu rdzeni jednocześnie. Jako nazwa co stwierdza, że została ona najpierw opracowana do obsługi grafiki. Dlatego w kontekście grafiki „używam GPU” lub „z procesorami GPU” wiąże się z szybkim renderowaniem i płynną interakcją. W ciągu ostatnich lat, dzięki zastosowaniu obliczeniowych akceleracji za pomocą procesora GPU, coraz więcej możliwości obliczeniowych samego GPU.

Gdy uruchamiasz aplikację na komputerze lub telefonie, zasilają Cię procesory (GPU) i układy graficzne aplikacji. Zwykle aplikacje działają na CPU i GPU, korzystając z mechanizmów udostępnianych przez System operacyjny.

Sprzęt, system operacyjny, aplikacja
Rysunek 3. Trzy warstwy architektury komputera. Sprzęt na dole, Obsługa System na środku, aplikacja na górze.

Realizacja programu dla procesu i wątku

procesy i wątki
Rysunek 4. Proces w postaci ramki ograniczającej – nici w postaci abstrakcyjnej ryby pływającej wewnątrz procesu

Kolejną koncepcją, którą warto opanować przed zagłębieniem się w architekturę przeglądarki, są procesy i wątki. Proces można opisać jako program wykonujący aplikację. Wątek to ten, który żyje w środku procesu i wykonuje dowolną część jego programu.

Uruchomienie aplikacji powoduje utworzenie procesu. Program może utworzyć wątki, aby w tym pomóc. jak można to zrobić, ale jest to opcjonalne. System operacyjny nadaje procesowi nazwę „płytki”. pamięci do pracy i cały stan aplikacji są przechowywane w tym miejscu pamięci prywatnej. Po zamknięciu aplikacji, proces także przestaje działać, a system operacyjny zwalnia pamięć.

procesy i pamięć
Rysunek 5. Schemat procesu z wykorzystaniem miejsca w pamięci i przechowywaniem danych aplikacji

Proces może poprosić system operacyjny o uruchomienie innego procesu w celu uruchomienia innych zadań. Gdy to różne części pamięci są przydzielane nowemu procesowi. Jeśli 2 procesy muszą używają do tego komunikacji komunikacyjnej (IPC). Wiele aplikacji są zaprojektowane tak, aby działały w ten sposób. Jeśli proces roboczy nie odpowiada, można go uruchomić ponownie; bez zatrzymywania innych procesów, które uruchamiają różne części aplikacji.

proces roboczy i IPC
Rysunek 6. Schemat różnych procesów komunikujących się przez IPC

Architektura przeglądarki

Jak zbudowana jest przeglądarka, korzystając z procesów i wątków? Może to być jeden proces w różnych wątkach lub na wielu różnych procesach przez kilka wątków komunikujących się przez IPC.

architektura przeglądarki
Rysunek 7. Schemat procesu / wątku dotyczący różnych architektur przeglądarek

Należy pamiętać, że te różne architektury stanowią szczegóły implementacji. Nie istnieje żadna standardowa specyfikacja sposobu tworzenia przeglądarki. Jedna z przeglądarek może całkowicie różnić się od innych.

W ramach tej serii postów używamy najnowszej architektury Chrome, opisane na Rys. 8.

U góry znajduje się proces przeglądarki koordynowany z innymi procesami, które zajmują się różnymi z różnych części aplikacji. W ramach procesu renderowania jest tworzonych wiele procesów, które są przypisywane do każdej karty. Do niedawna Chrome oceniał każdą kartę w miarę możliwości. teraz próbuje dać każda witryna ma własny proces, w tym elementy iframe (patrz Izolacja witryn).

architektura przeglądarki
Rysunek 8. Schemat architektury wieloprocesowej Chrome. W obszarze Proces mechanizmu renderowania reprezentujący proces Chrome z wieloma procesami mechanizmu renderowania na każdej karcie.

Który proces o co chodzi?

W tabeli poniżej opisujemy poszczególne procesy Chrome i elementy, które sterują:

Proces i kontrola nad nim
Przeglądarka Kontroluje Chrome tej części aplikacji, w tym na pasku adresu, zakładkach, za pomocą przycisków Dalej.
Obsługuje też niewidoczne, uprzywilejowane części przeglądarki, takie jak żądań sieciowych i dostępu do plików.
Mechanizm renderowania Kontroluje wszystkie elementy na karcie, w których wyświetla się witryna.
Wtyczka Steruje wszystkimi wtyczkami używanymi przez stronę (np. Flash).
GPU Obsługuje zadania GPU niezależnie od innych procesów. Jest podzielony na różne procesy bo GPU obsługuje żądania z wielu aplikacji i rysuje je na tej samej powierzchni.
Procesy Chrome
Rysunek 9. Różne procesy wskazujące różne części interfejsu przeglądarki

Jest jeszcze więcej procesów, takich jak proces rozszerzenia i proces narzędzi. Jeśli chcesz zobaczyć ile procesów jest uruchomionych w Chrome, kliknij ikonę menu opcji. w prawym górnym rogu, kliknij Więcej narzędzi, a potem Wybierz Menedżera zadań. Otworzy się okno z listą uruchomionych obecnie procesów i liczbę CPU/pamięć.

Zaletą architektury wieloprocesowej w Chrome

Powiedziałem, że Chrome korzysta z wielu procesów renderowania. W najprostszym przypadku możesz Wyobraź sobie, że każda karta ma własny proces renderowania. Załóżmy, że masz otwarte 3 karty, a każda z nich jest uruchomiona. w ramach niezależnego procesu renderowania.

Jeśli któraś z kart przestanie odpowiadać, możesz ją zamknąć i kontynuować, nie tracąc inne karty. Jeśli wszystkie karty są uruchomione w jednym procesie, a jedna z nich przestanie odpowiadać, wszystkie karty nie odpowiadają. To smutne.

mechanizm renderowania kart
Rysunek 10. Schemat przedstawiający wiele procesów uruchomionych na każdej karcie

Kolejną zaletą podzielenia pracy przeglądarki na kilka procesów jest w piaskownicy. Systemy operacyjne dają możliwość ograniczenia procesów uprawnienia przeglądarki mogą oddzielić pewne procesy od określonych funkcji. Przeglądarka Chrome ogranicza na przykład: dowolnego dostępu do plików na potrzeby procesów, które obsługują dowolne dane wejściowe użytkownika, np. mechanizm renderowania.

Procesy mają własny obszar pamięci prywatnej, więc często zawierają kopie wspólnych (np. V8, który jest mechanizmem JavaScriptu w Chrome). Oznacza to większe wykorzystanie pamięci jako nie można ich udostępniać w taki sam sposób, jakby byłyby wątkami w ramach tego samego procesu. Aby oszczędzać pamięć, Chrome ogranicza liczbę procesów, które może uruchomić. Limit różni się w zależności od ilości pamięci i mocy procesora urządzenia, ale po uruchomieniu Chrome powoduje uruchomienie wielu kart z tej samej witryny podczas jednego procesu.

Oszczędzanie pamięci – obsługa w Chrome

Takie samo podejście dotyczy procesu przeglądarki. Architektura Chrome zmienia się Uruchamianie każdej części programu przeglądarki jako usługi, co pozwala podzielić ją na różne procesy lub łączyć w jeden.

Ogólnie rzecz biorąc, jeśli Chrome działa na zaawansowanym sprzęcie, usługi mogą być podzielone na są bardziej stabilne, ale jeśli działa na urządzeniu z ograniczeniem zasobów, konsoliduje usługi w jednym procesie, oszczędzając ilość pamięci. Podobne podejście do konsolidacji przed wprowadzeniem tej zmiany na platformach takich jak Android – procesy mniejsze z wykorzystaniem pamięci.

Serwisowanie Chrome
Rysunek 11. Schemat procesu obsługi Chrome z przeniesieniem różnych usług do kilku procesów i jeden proces przeglądarki

Procesy renderowania z podziałem na klatki – izolacja witryn

Sekcja Izolacja witryn została ostatnio wprowadzona w Chrome funkcja, która uruchamia oddzielny proces renderowania dla każdego elementu iframe z innej witryny. Mówiliśmy o jednym procesie renderowania na model karty, który umożliwiał Elementy iframe uruchamiane w ramach jednego procesu renderowania z wspólną przestrzenią pamięci między różnymi witrynami. Uruchomienie domen a.com i b.com w tym samym procesie renderowania może wydawać się dozwolone. Zasady dotyczące tego samego pochodzenia to podstawowy model bezpieczeństwa sieci; Zapewnia to, że jedna witryna nie ma dostępu do danych z innych witryn. bez zgody. Omijanie tej zasady jest głównym celem ataków bezpieczeństwa. Izolacja procesów to najskuteczniejszy sposób rozdzielania witryn. Na Meltdown i Spectre, stało się jeszcze bardziej oczywiste, że trzeba oddzielić witryny za pomocą procesów. Po włączeniu izolacji witryn domyślnie na komputerach od Chrome 67 każdy element iframe z innej witryny na karcie otrzyma osobny proces renderowania.

izolacja witryn
Rys. 12: Schemat izolacji witryn wiele procesów renderowania wskazujących elementy iframe w witrynie

Włączenie izolacji witryn było wieloletnim pracą naszych inżynierów. Izolacja witryn nie jest tak prosta, przypisywanie różnych procesów renderowania; to zasadniczo zmienia sposób, w jaki elementy iframe komunikują się inne. Otwieranie narzędzi deweloperskich na stronie z elementami iframe uruchomionymi w różnych procesach oznaczało, że narzędzia deweloperskie musiały i zaimplementować rozwiązania zakulisowe, aby wszystko wyglądało płynnie. nawet użycie prostego skrótu Ctrl+F w celu „Słowo kluczowe na stronie” oznacza wyszukiwanie w różnych procesach renderowania. Możesz zobaczyć, dlaczego Inżynierowie przeglądarek mówią o wprowadzeniu funkcji izolacji witryn jako przełomowego kamienia milowego.

Podsumowanie

W tym poście omówiliśmy ogólny przegląd architektury przeglądarki i zalety architekturę wieloprocesową. Omówiliśmy też udostępnianie i izolację witryn w Chrome, lub ściśle związana z architekturą wieloprocesową. W następnym poście zajmiemy się tym, odbywa się między tymi procesami i wątkami, aby wyświetlić stronę internetową.

Podobał Ci się post? Jeśli masz pytania lub sugestie dotyczące przyszłych postów, chętnie na nie odpowiem skontaktuj się z nami, pisząc na @kosamari na Twitterze.

Dalej: Co się dzieje w nawigacji