Pytania rekrutacyjne z przeglądarki i wydajności z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

Przeglądarka i wydajność · Junior

1. Wpisujesz URL i naciskasz Enter. Która kolejność kroków jest najbliższa temu, co przeglądarka robi najpierw?

   Poprawna odpowiedź: Zapytanie DNS, połączenie TCP (i TLS), żądanie HTTP, potem parsowanie odpowiedzi HTML

   Przeglądarka musi zamienić nazwę hosta na IP, otworzyć połączenie (plus TLS dla HTTPS) i wysłać żądanie, zanim dostanie HTML do parsowania.

2. Co przeglądarka buduje z parsowanego HTML?

   Poprawna odpowiedź: DOM - drzewo węzłów dokumentu

   HTML jest dzielony na tokeny, z których powstają węzły DOM. CSS jest osobno parsowany do CSSOM; później oba są łączone.

3. Czym jest render tree?

   Poprawna odpowiedź: Połączeniem DOM i CSSOM, zawierającym tylko widoczne węzły z obliczonymi stylami

   Elementy z display: none i niewizualne węzły jak <head> są pomijane. Render tree to dane wejściowe dla layoutu.

4. Która kolejność etapów renderowania jest poprawna po zbudowaniu render tree?

   Poprawna odpowiedź: Layout, paint, composite

   Layout oblicza geometrię, paint wypełnia piksele warstw, a kompozycja rysuje warstwy na ekranie we właściwej kolejności.

Przeglądarka i wydajność · Middle

1. Które właściwości CSS zwykle można animować bez wywoływania layoutu ani paint?

   Poprawna odpowiedź: transform i opacity

   Może je obsłużyć compositor na już narysowanej warstwie, więc animacje pozostają płynne nawet przy zajętym głównym wątku.

2. Jakie jest ryzyko dodania will-change: transform wielu elementom?

   Poprawna odpowiedź: Każdy może dostać własną warstwę compositora, co kosztuje pamięć GPU i czasem wszystko spowalnia

   will-change to wskazówka dla elementów, które zaraz będą animowane, a nie ogólne przyspieszenie. Nadużycie prowadzi do eksplozji warstw.

3. Dlaczego requestAnimationFrame jest lepszy od setInterval(fn, 16) do aktualizacji wizualnych?

   Poprawna odpowiedź: Działa tuż przed wyrenderowaniem następnej klatki i wstrzymuje się w kartach w tle

   Timery dryfują i nie są zsynchronizowane z klatkami, więc aktualizacje mogą przepaść albo wykonać się dwa razy. rAF dostosowuje się też do ekranów 120 Hz.

4. Co robi content-visibility: auto?

   Poprawna odpowiedź: Pomija pracę renderowania (layout i paint) dla treści poza ekranem, dopóki nie zbliży się do widocznego obszaru

   Na długich stronach może mocno skrócić początkowe renderowanie. Łącz z contain-intrinsic-size, żeby pasek przewijania nie skakał.

Przeglądarka i wydajność · Senior

1. Co gwarantuje Site Isolation w Chromium?

   Poprawna odpowiedź: Strony z różnych serwisów są renderowane w różnych procesach systemu

   Po Spectre granice procesów stały się główną obroną przed odczytem pamięci jednego serwisu przez inny, także w iframe'ach cross-site.

2. Dlaczego przeglądarki domyślnie wyłączyły SharedArrayBuffer, a potem włączyły go tylko dla stron cross-origin isolated?

   Poprawna odpowiedź: Umożliwia timery wysokiej rozdzielczości przydatne w atakach Spectre; izolacja gwarantuje, że w procesie nie ma danych cross-origin

   Z COOP i COEP strona nie może wciągnąć zasobów cross-origin, które się na to nie zgodziły, więc gadżet Spectre nie ma czego tajnego odczytać.

3. Po włączeniu COEP: require-corp przestały się ładować obrazy z zewnątrz. Jakie są opcje?

   Poprawna odpowiedź: Strona trzecia musi wysyłać Cross-Origin-Resource-Policy: cross-origin albo serwować przez CORS; lub użyj COEP: credentialless

   credentialless ładuje zasoby cross-origin w trybie no-cors bez ciasteczek, więc nie mogą zawierać sekretów konkretnego użytkownika.

4. Przed czym, oprócz włączenia izolacji, chroni Cross-Origin-Opener-Policy: same-origin?

   Poprawna odpowiedź: Okna cross-origin otwarte przez twoją stronę lub ją otwierające tracą referencję window.opener, co blokuje wiele XS-Leaks i tabnabbing

   Popupy w osobnej grupie kontekstów przeglądania nie mogą liczyć twoich ramek, nawigować cię ani mierzyć czasów przez uchwyt okna.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.