Interviewfragen zu Browser und Performance (Middle) mit Antworten

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

Diesen Test machen
  1. 1.Welches Problem verursacht dieser Code?
  2. 2.Welche CSS-Eigenschaften lassen sich meist animieren, ohne Layout oder Paint auszulösen?
  3. 3.Was ist das Risiko, vielen Elementen will-change: transform zu geben?
  4. 4.Warum ist requestAnimationFrame für visuelle Updates besser als setInterval(fn, 16)?
  5. 5.Was macht content-visibility: auto?
  6. 6.Warum schadet ein sehr großes DOM (Zehntausende Knoten) der Reaktionsfähigkeit?
  7. 7.Was sagt CSS contain: layout paint dem Browser?
  8. 8.Welche Änderung verursacht meist nur ein Repaint, ohne Layout?
  9. 9.Wofür ist der Main Thread in einem typischen Browser-Tab zuständig?
  10. 10.Aus welchen drei Teilen besteht die Latenz einer einzelnen Interaktion bei INP?
  11. 11.Ein Klick-Handler erledigt nach dem UI-Update schwere, nicht dringende Arbeit. Wie lässt man das Update früher erscheinen?
  12. 12.Was ist der Vorteil von scheduler.yield() gegenüber setTimeout(resolve, 0) zum Abgeben?
  13. 13.Wann passen Web Worker gut, um INP zu verbessern?
  14. 14.Was misst Total Blocking Time (TBT) in einem Labortest?
  15. 15.Welcher INP-Wert wird für eine Seite mit vielen Interaktionen gemeldet?
  16. 16.Ein Suchfeld filtert bei jedem Tastendruck eine Liste mit 5 000 Einträgen, und das Tippen fühlt sich träge an. Welche Lösung hilft INP am meisten?
  17. 17.Wovon hängt die Darstellungsverzögerung bei INP vor allem ab?
  18. 18.Was macht requestIdleCallback?
  19. 19.Warum können Skripte von Drittanbietern INP schaden, auch wenn sie mit async laden?
  20. 20.LCP lässt sich in vier Teile zerlegen. Welche Liste stimmt?
  21. 21.Das LCP-Bild ist als CSS-background-image gesetzt. Warum schadet das LCP oft?
  22. 22.Was macht fetchpriority="high" am LCP-<img>?
  23. 23.Warum kann eine clientseitig gerenderte SPA selbst in einem schnellen Netz schlechtes LCP haben?
  24. 24.Was erlaubt eine Antwort 103 Early Hints dem Server?
  25. 25.Was macht ein Bild-CDN typischerweise?
  26. 26.Bis wann wird LCP gemessen?
  27. 27.Welche Layout Shifts sind von CLS ausgenommen?
  28. 28.Wie wird der CLS-Wert für einen Seitenbesuch berechnet?
  29. 29.Wie verringert man durch Webschriften verursachten CLS?
  30. 30.Nach einem API-Aufruf wird oben auf der Seite ein Banner eingefügt und schiebt Inhalt nach unten. Was ist die beste Lösung?
  31. 31.Warum sind Animationen mit transform für CLS besser als top zu animieren?
  32. 32.Warum muss eine vorab geladene Schrift das Attribut crossorigin haben?
  33. 33.Was macht <link rel="modulepreload"> anders als preload?
  34. 34.Was bringt Code Splitting mit dynamischem import()?
  35. 35.Worauf verlässt sich Tree Shaking, um ungenutzten Code zu entfernen?
  36. 36.Was ist eine Fassade für eine schwere Drittanbieter-Einbettung, etwa einen Videoplayer?
  37. 37.Was erlaubt die Speculation Rules API?
  38. 38.Warum sollte man nicht zu viele Ressourcen vorab laden?
  39. 39.Was erlaubt Cache-Control: max-age=60, stale-while-revalidate=600?
  40. 40.Wofür nutzt man s-maxage?
  41. 41.Wofür ist der Antwort-Header Vary da?
  42. 42.Eine Antwort hat weder Cache-Control noch Expires, aber Last-Modified. Darf der Browser sie cachen?
  43. 43.Was ergänzt must-revalidate bei einer gecachten Antwort?
  44. 44.Welche Caching-Strategie im Service Worker passt am besten zu gehashten statischen Assets?
  45. 45.Welche Strategie passt zu einer API-Antwort, die frisch sein soll, aber auch offline funktionieren muss?
  46. 46.Was ist die Cache Storage API (caches.open) im Vergleich zum HTTP-Cache?
  47. 47.Welche Cross-Origin-Anfrage wird ohne Preflight gesendet?
  48. 48.Das Frontend sendet fetch(url, { credentials: "include" }) an einen anderen Origin. Was muss die Antwort enthalten?
  49. 49.Dein JS kann einen eigenen Header X-Total-Count aus einer Cross-Origin-Antwort nicht lesen. Warum?
  50. 50.Was macht Access-Control-Max-Age?
  51. 51.Ein Server spiegelt für eine Allowlist von Seiten den Origin der Anfrage in Access-Control-Allow-Origin. Welchen Header sollte er zusätzlich senden?
  52. 52.Bedeutet ein CORS-Fehler, dass die Anfrage den Server nie erreicht hat?
  53. 53.Was ist eine opake Antwort?
  54. 54.Was ist CSRF?
  55. 55.Was ist Clickjacking, und welcher Header schützt davor?
  56. 56.Was macht X-Content-Type-Options: nosniff?
  57. 57.Wogegen schützt das Attribut integrity (Subresource Integrity)?
  58. 58.Warum ist <a href={userUrl}> gefährlich, wenn userUrl nicht validiert wird?
  59. 59.Was muss ein message-Event-Handler prüfen, bevor er event.data vertraut?
  60. 60.Warum bietet CSP mit 'unsafe-inline' in script-src wenig Schutz vor XSS?
  61. 61.Wie entscheidet eine Nonce-basierte CSP, welche Inline-Skripte laufen dürfen?
  62. 62.Was sendet Referrer-Policy: strict-origin-when-cross-origin (der Browser-Standard)?
  63. 63.Was ist der Unterschied zwischen Same-Site und Same-Origin?
  64. 64.Was ist der Back/Forward Cache (bfcache)?
  65. 65.Wie erkennt eine Seite, dass sie aus dem bfcache wiederhergestellt wurde?
  66. 66.Was ist der zuverlässigste Moment, Analytics zu senden, bevor der Nutzer geht?
  67. 67.Wie markiert man eigene Zeitpunkte, um sie in DevTools zu sehen und im Code zu messen?
  68. 68.Wie sammelt man LCP, INP und CLS von echten Nutzern mit wenig Code?
  69. 69.Was ist CrUX (Chrome UX Report)?
  70. 70.Wofür ist der Header Server-Timing nützlich?
  71. 71.Warum zeigt Resource Timing für manche Cross-Origin-Ressourcen Nullen bei DNS, Connect und Request?
  72. 72.Welches Problem von HTTP/2 über TCP löst HTTP/3?
  73. 73.Was macht der Header Clear-Site-Data, etwa beim Logout?
  74. 74.Was macht Permissions-Policy: camera=(), geolocation=(self)?
  75. 75.Warum funktioniert ein in einem eingebetteten iframe gesetztes Drittanbieter-Cookie oft nicht mehr?