Interviewfragen zu Browser und Performance mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

Browser und Performance · Junior

1. Du tippst eine URL ein und drückst Enter. Welche Reihenfolge kommt dem am nächsten, was der Browser zuerst tut?
   ▸Antwort zeigen

   Richtige Antwort: DNS, TCP und TLS, HTTP-Anfrage, dann HTML parsen

   Der Browser muss den Hostnamen in eine IP auflösen, eine Verbindung öffnen (plus TLS bei HTTPS) und die Anfrage senden, bevor er HTML zum Parsen bekommt.

2. Was baut der Browser aus dem geparsten HTML?
   ▸Antwort zeigen

   Richtige Antwort: Das DOM, einen Knotenbaum des Dokuments

   HTML wird in Knoten zerlegt, die das DOM bilden. CSS wird getrennt ins CSSOM geparst; beide werden später kombiniert.

3. Was ist der Render Tree?
   ▸Antwort zeigen

   Richtige Antwort: DOM und CSSOM kombiniert, nur mit sichtbaren Knoten und ihren berechneten Stilen

   Elemente mit display: none und nicht visuelle Knoten wie <head> fehlen. Der Render Tree ist die Eingabe für das Layout.

4. Welche Reihenfolge der Render-Stufen ist nach dem Aufbau des Render Tree richtig?
   ▸Antwort zeigen

   Richtige Antwort: Layout, Paint, Composite

   Layout berechnet die Geometrie, Paint füllt Pixel für Ebenen, und Compositing zeichnet die Ebenen in der richtigen Reihenfolge auf den Bildschirm.

Browser und Performance · Middle

1. Welche CSS-Eigenschaften lassen sich meist animieren, ohne Layout oder Paint auszulösen?
   ▸Antwort zeigen

   Richtige Antwort: transform und opacity

   Der Compositor kann sie auf einer schon gezeichneten Ebene behandeln, Animationen bleiben also flüssig, auch wenn der Main Thread beschäftigt ist.

2. Was ist das Risiko, vielen Elementen will-change: transform zu geben?
   ▸Antwort zeigen

   Richtige Antwort: Jedes bekommt eventuell eine eigene Ebene, die GPU-Speicher kostet

   will-change ist ein Hinweis für Elemente, die gleich animiert werden, keine allgemeine Beschleunigung. Übermäßiger Einsatz führt zu einer Explosion an Ebenen.

3. Warum ist requestAnimationFrame für visuelle Updates besser als setInterval(fn, 16)?
   ▸Antwort zeigen

   Richtige Antwort: Es läuft direkt bevor der Browser einen Frame rendert

   Timer driften und sind nicht an Frames ausgerichtet, Updates können also ausfallen oder doppelt passieren. rAF passt sich auch an 120-Hz-Displays an.

4. Was macht content-visibility: auto?
   ▸Antwort zeigen

   Richtige Antwort: Überspringt Renderarbeit für Inhalte außerhalb des Sichtbereichs

   Auf langen Seiten kann es die anfängliche Renderzeit stark senken. Kombiniere es mit contain-intrinsic-size, damit die Scrollleiste nicht springt.

Browser und Performance · Senior

1. Was garantiert Site Isolation in Chromium?
   ▸Antwort zeigen

   Richtige Antwort: Seiten verschiedener Sites werden in verschiedenen Betriebssystemprozessen gerendert

   Nach Spectre wurden Prozessgrenzen zur wichtigsten Abwehr dagegen, dass eine Site den Speicher einer anderen liest, auch bei Cross-Site-iframes.

2. Warum haben Browser SharedArrayBuffer standardmäßig abgeschaltet und nur für cross-origin-isolierte Seiten wieder aktiviert?
   ▸Antwort zeigen

   Richtige Antwort: Es ermöglicht hochauflösende Timer für Spectre-Angriffe

   Mit COOP und COEP kann die Seite keine Cross-Origin-Ressourcen einbinden, die nicht zugestimmt haben, ein Spectre-Gadget findet also nichts Geheimes zum Lesen.

3. Nach dem Aktivieren von COEP: require-corp laden Bilder von Drittanbietern nicht mehr. Welche Optionen gibt es?
   ▸Antwort zeigen

   Richtige Antwort: CORP: cross-origin, CORS oder credentialless

   credentialless lädt no-cors-Ressourcen anderer Origins ohne Cookies, sie können also keine nutzerspezifischen Geheimnisse enthalten.

4. Wogegen schützt Cross-Origin-Opener-Policy: same-origin außer dem Ermöglichen der Isolation?
   ▸Antwort zeigen

   Richtige Antwort: Cross-Origin-Fenster, die eine window.opener-Verbindung behalten

   Popups in einer eigenen Browsing-Context-Gruppe können deine Frames nicht zählen, dich nicht umleiten und über das Fenster-Handle keine Timings messen.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.