Interviewfragen zu Browser und Performance (Junior) mit Antworten

75 Fragen fürs Vorstellungsgespräch zu Browser und Performance (Junior) mit richtigen Antworten, Erklärungen und Links zur Dokumentation.

Diesen Test machen
  1. 1.Du tippst eine URL ein und drückst Enter. Welche Reihenfolge kommt dem am nächsten, was der Browser zuerst tut?
  2. 2.Was baut der Browser aus dem geparsten HTML?
  3. 3.Was ist der Render Tree?
  4. 4.Welche Reihenfolge der Render-Stufen ist nach dem Aufbau des Render Tree richtig?
  5. 5.Was passiert in der Layout-Phase (Reflow)?
  6. 6.Was ist der Critical Rendering Path?
  7. 7.Warum nennt man CSS render-blockierend?
  8. 8.Was macht ein klassisches <script src> ohne async oder defer mit dem HTML-Parsen?
  9. 9.Was ist der Unterschied zwischen defer und async an einem Skript?
  10. 10.Wie lädt <script type="module"> standardmäßig?
  11. 11.Was ist der Unterschied zwischen den Events DOMContentLoaded und load?
  12. 12.Was ist der Preload Scanner des Browsers?
  13. 13.Welche drei Metriken sind heute die Core Web Vitals?
  14. 14.Was misst LCP (Largest Contentful Paint)?
  15. 15.Was ist ein „guter“ LCP-Wert?
  16. 16.Was misst INP (Interaction to Next Paint)?
  17. 17.Was ist ein „guter“ INP-Wert?
  18. 18.Was misst CLS (Cumulative Layout Shift)?
  19. 19.Welche Änderung verringert durch Bilder verursachten CLS am wahrscheinlichsten?
  20. 20.Was misst TTFB (Time to First Byte)?
  21. 21.Was misst FCP (First Contentful Paint)?
  22. 22.Was ist der Unterschied zwischen Labordaten und Felddaten?
  23. 23.Welches Werkzeug liefert direkt in Chrome einen Labor-Performancebericht mit Vorschlägen?
  24. 24.Warum kann Lighthouse in einem normalen Seitenlade-Audit kein INP melden?
  25. 25.Was ist ein Long Task auf dem Main Thread?
  26. 26.Warum fühlt sich eine Seite mit viel JavaScript auch nach dem Laden langsam an?
  27. 27.Was macht loading="lazy" an einem <img>?
  28. 28.Warum sollte man dem Hero-Bild oben auf der Seite kein loading="lazy" geben?
  29. 29.Was erlaubt srcset mit sizes an einem <img> dem Browser?
  30. 30.Welche Bildformate ergeben bei ähnlicher Qualität meist kleinere Dateien als JPEG und PNG?
  31. 31.Was macht font-display: swap?
  32. 32.Was ist FOIT?
  33. 33.Was ist ein billiger Weg, Bilder schneller zu laden, ohne ihren Inhalt zu ändern?
  34. 34.Was macht <link rel="preload">?
  35. 35.Was macht <link rel="preconnect" href="https://cdn.example.com">?
  36. 36.Wofür ist <link rel="prefetch"> gedacht?
  37. 37.Was macht dns-prefetch?
  38. 38.Was bedeutet Cache-Control: max-age=3600?
  39. 39.Was ist der Unterschied zwischen no-cache und no-store?
  40. 40.Wofür nutzt man ein ETag?
  41. 41.Was bedeutet eine Antwort 304 Not Modified?
  42. 42.Warum schreiben Build-Werkzeuge einen Content-Hash in Dateinamen wie app.3f9a1c.js?
  43. 43.Welche Caching-Regel passt zur HTML-Seite einer oft aktualisierten Website mit gehashten Asset-URLs?
  44. 44.Was bedeutet Cache-Control: private?
  45. 45.Wo kann eine HTTP-Antwort auf dem Weg zum Nutzer gecacht werden?
  46. 46.Was macht ein Hard Reload (Strg+Umschalt+R) typischerweise mit dem Cache?
  47. 47.Warum hilft es der Performance, Textressourcen mit Brotli oder gzip auszuliefern?
  48. 48.Was ist ein zentraler Vorteil von HTTP/2 gegenüber HTTP/1.1?
  49. 49.Wie macht ein CDN eine Seite schneller?
  50. 50.Warum sind Weiterleitungen schlecht für die Ladegeschwindigkeit?
  51. 51.Was macht zwei URLs zum selben Origin?
  52. 52.Sind https://example.com und https://example.com:8443 derselbe Origin?
  53. 53.Was verhindert die Same-Origin-Policy standardmäßig?
  54. 54.Was ist CORS?
  55. 55.Wer setzt CORS durch?
  56. 56.Ein Frontend auf https://app.com ruft https://api.com auf und sieht einen CORS-Fehler. Wo ist die Lösung meist nötig?
  57. 57.Was ist ein CORS-Preflight-Request?
  58. 58.Welcher Header in einer Antwort erlaubt jedem Origin, sie zu lesen?
  59. 59.Was ist Cross-Site Scripting (XSS)?
  60. 60.Welche Art, Nutzereingaben in die Seite einzufügen, ist sicher vor XSS?
  61. 61.Warum verursachen React- und Vue-Templates meist kein XSS, wenn man {userInput} rendert?
  62. 62.Was sind die drei klassischen Arten von XSS?
  63. 63.Was ist Content Security Policy (CSP)?
  64. 64.Wenn man von Nutzern gelieferten HTML-Code einfügen muss (etwa formatierte Kommentare), was sollte man tun?
  65. 65.Was macht das Flag HttpOnly an einem Cookie?
  66. 66.Was macht das Flag Secure an einem Cookie?
  67. 67.Was bedeutet SameSite=Lax für ein Cookie?
  68. 68.Warum gilt es als riskant, ein Auth-Token in localStorage zu speichern?
  69. 69.Wie beeinflussen Cookies die Performance?
  70. 70.Was ist Mixed Content?
  71. 71.Was macht der Header Strict-Transport-Security (HSTS)?
  72. 72.Warum ist HTTPS für viele moderne Webfunktionen wie Service Worker Pflicht?
  73. 73.Was bedeutet Content-Encoding: br in einer Antwort?
  74. 74.Was signalisiert <img decoding="async"> dem Browser?
  75. 75.Welches DevTools-Panel zeigt Timing, Größe, Status und Caching jeder Anfrage?