Frontend Developer Mock Interview — mit AI üben

Frontend-Interviews prüfen zwei Dinge gleichzeitig: ob Sie UI ausliefern und ob Sie verstehen, was tatsächlich passiert, wenn ein Browser eine Seite rendert. Die Fragen, die über Angebote entscheiden, sitzen meist an der Nahtstelle — „warum ist das langsam?“, „warum ist das nicht zugänglich?“, „warum aktualisiert sich dieser State nicht?“. Dieser Leitfaden zeigt, wie Sie mit AI-Mocks die Antworten trainieren, bis sie automatisch kommen.

Die Form eines modernen Frontend-Interviews

Ein typischer Frontend-Loop hat vier Phasen: ein Screening-Gespräch mit dem Recruiter, ein technisches Screening (45–60 Minuten, ein Engineer befragt Sie zu Ihrem Stack und Ihrer Auslieferungserfahrung), eine Take-Home- oder Live-Coding-Aufgabe und ein Vor-Ort- oder virtueller Loop mit 3–5 Runden (Coding, System Design für UI, Behavioral, manchmal eine Design-Kritik). Senior-Loops fügen eine Architektur-Runde hinzu, in der Sie ein UI-System gegen jemanden verteidigen müssen, der versucht, es zu zerlegen.

AI-Mocks helfen am meisten beim technischen Screening und bei der UI-System-Design-Runde. Beide sind größtenteils Gespräch. Die Coding-Aufgaben sollten Sie in einem echten Editor üben — AI-Mocks sind schlecht darin, Ihnen den Feedback-Loop von „lief das tatsächlich?“ zu geben. Für Interview-Runden, in denen die Antwort aus Absätzen besteht („beschreiben Sie, wie React eine Liste reconciled“ oder „führen Sie mich durch das Schnellermachen dieser Seite“), reproduzieren AI-Mocks das Format nahezu perfekt.

JavaScript und TypeScript: Was Interviewer tatsächlich abklopfen

Die klassischen JS-Fragen tauchen weiterhin auf, weil sie weiterhin als Filter funktionieren. Closures, Hoisting, this-Binding, die Event Loop, Micro- vs. Macrotasks, Promises vs. async/await, der Unterschied zwischen == und === — alles vernünftige Erwartungen. Aber die interessanten Fragen liegen eine Ebene tiefer. Nicht „was ist ein Closure“, sondern „warum loggt dieses setTimeout in einer for-Schleife die falsche Zahl, und wie beheben Sie das auf drei verschiedene Arten?“.

TypeScript-Fragen, die Sie beantworten können sollten

• Unterschied zwischen interface und type und wann welches richtig ist.
• Was unknown Ihnen gibt, das any nicht gibt.
• Wie Discriminated Unions Typen in der Praxis einengen.
• Wann Generics helfen und wann sie Code unleserlich machen.
• Was as const tut und warum Sie danach greifen würden.

Die Falle, die Sie vermeiden sollten: Zitieren Sie nicht die Docs wortwörtlich. Interviewer merken das. Sprechen Sie über echten Code — „Ich habe letztes Quartal eine Discriminated Union für unsere Payment-Status-Typen verwendet, weil der Compiler einen Bug gefangen hat, bei dem wir vergessen hatten, den Refunded-Fall zu behandeln“.

React und Vue: Framework-Level-Fragen

React

Erwarten Sie Reconciliation, die Rules of Hooks, was ein Re-Render auslöst, warum useEffect mit dem falschen Dependency Array Dinge kaputtmacht, wie sich useMemo und useCallback in der Praxis unterscheiden, wann man State liftet und wann man ihn kolloziert, Server Components vs. Client Components, falls Sie sich auf eine Next.js-Rolle bewerben. Der häufigste Fehlermodus: Kandidaten erklären die Hooks-Regeln, können aber nicht sagen, warum die Regeln existieren. Der Grund ist, dass React die Aufrufreihenfolge nutzt, um Hook-Aufrufe mit State zu verknüpfen — brechen Sie die Reihenfolge, brechen Sie die Verknüpfung.

React-Fragen auf Senior-Niveau dringen in Performance und Architektur vor. Wie würden Sie eine Liste mit 10.000 Elementen scrollbar machen, ohne Frames zu verlieren? Wann hilft Virtualisierung und wann schadet sie? Wie messen Sie, ob ein Memo tatsächlich hilft oder nur Overhead hinzufügt? Der AI-Mock hakt nach — wenn Sie „ich würde Virtualisierung nutzen“ sagen, erwarten Sie „mit welcher Library, warum diese, und was kostet sie Sie?“.

Vue

Vue-3-spezifische Themen: die Composition API vs. die Options API, wann Reactivity bricht (Zuweisung an einen Index, Ersetzen des gesamten Arrays), ref vs. reactive, wie sich die Proxy-basierte Reactivity von der von React unterscheidet. Vue-Interviewer fragen gern nach Reactivity-Fallstricken, weil das Modell „magischer“ ist als das von React, und magische Modelle haben mehr Kanten.

Browser-Internals, Performance, Accessibility

Browser-Internals

Das DOM ist ein Tree, das CSSOM ist ein Tree, der Render Tree ist das, was Sie tatsächlich painten. Style Invalidation, Layout (Reflow), Paint, Composite — kennen Sie die Pipeline und was jede Stufe auslöst. Eine verlässliche Interviewfrage: „warum ist das Animieren von top schlecht und das Animieren von transform gut?“. Antwort: transform überspringt Layout und Paint, läuft auf dem Compositor-Thread.

Performance

Core Web Vitals sind für jeden wichtig, der eine öffentliche Seite betreibt. LCP, INP (das Anfang 2024 FID ersetzt hat), CLS — seien Sie bereit, jedes zu definieren, zu sagen, mit welchem Nutzerverhalten es korreliert, und ein bis zwei Wege zu nennen, jedes zu verbessern. Bundle Splitting, Lazy Loading von Routes, Wahl des Bildformats (AVIF/WebP), fetchpriority, die Resource Hints (preload, preconnect, dns-prefetch). Wenn Sie je eine Performance-Verbesserung ausgeliefert haben und die Vorher-/Nachher-Kennzahl kennen, führen Sie damit.

Accessibility

Tastaturnavigationsreihenfolge, Focus Traps für Modals, ARIA-Rollen vs. semantisches HTML (semantisch bevorzugen), Farbkontrastverhältnisse (4,5:1 für Fließtext, 3:1 für große Schrift), Screenreader-Verhalten bei dynamischem Inhalt (aria-live), zugängliche Namen für reine Icon-Buttons. Eine häufige Fangfrage: „ist ein div mit onclick zugänglich?“ — Antwort: nein, Sie brauchen tabindex, Keyboard Handler und eine Rolle, oder verwenden Sie einfach einen button.

Behavioral-Runden: Unterschätzen Sie sie nicht

Frontend-Kandidaten verlieren regelmäßig Angebote in der Behavioral-Runde, weil sie sie als Smalltalk behandeln. Das ist sie nicht. Erwarten Sie: eine Geschichte über eine schwierige technische Entscheidung, eine Geschichte über funktionsübergreifenden Konflikt (Designer vs. Engineer ist das kanonische Frontend-Szenario), eine Geschichte über das Ausliefern von etwas mit knapper Deadline, eine Geschichte über einen Production-Incident. Halten Sie drei oder vier Geschichten bereit, die Sie anpassen können — STAR-Format (Situation, Task, Action, Result), wobei das Result eine Kennzahl oder ein konkretes Ergebnis ist.

Ein spezifischer Frontend-Fallstrick: Auf die Frage „erzählen Sie mir von einer schwierigen technischen Entscheidung“ wählen Kandidaten oft eine Framework-Migration (React zu Vue, Webpack zu Vite). Die sind in Ordnung, aber generisch. Eine stärkere Geschichte ist ein spezifischer UI/UX-Tradeoff — „wir haben ein Feature mit Optimistic Updates ausgeliefert und gelegentliches Reconciliation-Flackern akzeptiert, weil der Latenzgewinn mehr wert war als der visuelle Feinschliff“. Echt, konkret und offenbart Urteilsvermögen. Siehe unseren Leitfaden zum Üben von Behavioral-Interviews für das vollständige STAR-Framework.

Häufig gestellte Fragen