⏱️5 min read · 957 words
Bei den Interviewfragen für Frontend-Entwickler im Jahr 2026 geht es um HTML-Semantik, CSS-Layout, JavaScript-Leistung, Reaktionsmuster, Barrierefreiheit und Web-Performance-Optimierung. Dieser Leitfaden behandelt die am häufigsten gestellten Fragen für Frontend- und UI-Entwicklerrollen.
HTML/CSS-Fragen
1. Was ist der Unterschied zwischen Inline-, Block- und Inline-Block-Elementen?
<!-- Block elements: take full width, start on new line -->
<!-- Examples: div, p, h1-h6, ul, ol, li, section, article -->
<p>This paragraph takes full width</p>
<!-- Inline elements: only take needed width, don't break flow -->
<!-- Examples: span, a, strong, em, img, button -->
<p>Click <a href="#">this link</a> here</p>
<!-- Inline-block: inline positioning but block-like box model -->
<span style="display:inline-block; width:100px; height:40px">
Has dimensions like a block but flows inline
</span>2. Erklären Sie die CSS-Spezifität und die Kaskade
/* Specificity (higher wins): */
/* [inline styles], [IDs], [classes/attrs/pseudo-classes], [elements/pseudo-elements] */
/* 0,0,0,1 — element selector */
p { color: black; }
/* 0,0,1,0 — class selector */
.paragraph { color: blue; }
/* 0,0,1,1 — class + element */
p.paragraph { color: green; }
/* 0,1,0,0 — ID selector */
#main { color: red; }
/* 1,0,0,0 — inline style */
/* <p style="color: purple"> */
/* !important overrides everything (avoid!) */
p { color: orange !important; }
/* Same specificity: LAST declaration wins (cascade) */
.btn { color: blue; }
.btn { color: red; } /* red wins — defined later */3. Wie wirkt sich die Boxgröße auf das Layout aus?
/* content-box (default): width = content only */
/* Total width = width + padding + border */
.element {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 2px solid;
/* Actual width: 244px (200 + 40 + 4) */
}
/* border-box: width INCLUDES padding and border */
.element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid;
/* Actual width: 200px (as specified) */
}
/* Best practice: apply globally */
*, *::before, *::after {
box-sizing: border-box; /* almost every project should do this */
}Fragen zur JavaScript-Leistung
4. Was verursacht Layout-Thrashing und wie vermeidet man es?
// Layout thrashing: alternating reads and writes to the DOM
// Each read after a write forces browser to recalculate layout
// BAD: reads and writes interleaved
for (const element of elements) {
const height = element.offsetHeight; // READ — forces layout
element.style.height = height * 2 + 'px'; // WRITE
// Next iteration reads cause recalculation! 60x per 60fps frame = jank
}
// GOOD: batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // all reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2 + 'px'; // all writes
});
// Even better: avoid layout properties in animation
// Use transform instead of top/left/width/height
element.style.transform = 'translateX(100px)'; // compositor only, no layout
// requestAnimationFrame for animations
function animate() {
// All reads and writes here are batched by browser
requestAnimationFrame(animate);
}5. Erläutern Sie die Optimierung des kritischen Rendering-Pfads
<!-- Block rendering: CSS in <head> (sync), render-blocking JS -->
<head>
<!-- CSS blocks rendering — must be in head, must be small/inlined for critical CSS -->
<link rel="stylesheet" href="critical.css" />
<!-- Non-critical CSS: load async -->
<link rel="preload" href="non-critical.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
</head>
<!-- Defer/async JS to not block HTML parsing -->
<script defer src="app.js"></script> <!-- executes after HTML parsed -->
<script async src="analytics.js"></script> <!-- executes ASAP, non-blocking -->
<!-- Preload important resources -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<!-- Priority hints for images -->
<img src="hero.jpg" fetchpriority="high" loading="eager" /> <!-- LCP image -->
<img src="below-fold.jpg" loading="lazy" /> <!-- others -->6. Was ist der Unterschied zwischen localStorage, sessionStorage und Cookies?
| Besonderheit | lokaler Speicher | Sitzungsspeicher | Kekse |
|---|---|---|---|
| Beharrlichkeit | Bis zur manuellen Löschung | Bis der Tab geschlossen wird | Bis zum Ablauf/zur Löschung |
| Speichergröße | 5-10 MB | 5 MB | 4 KB |
| An den Server gesendet | No | No | Ja, bei jeder Anfrage |
| Zugang | Nur clientseitiges JS | Nur clientseitiges JS | Client + Server |
| Verwendung für | Thema, Vorlieben | Temporäre Sitzungsdaten | Authentifizierungstoken (HttpOnly!) |
7. Was sind Core Web Vitals und wie optimieren Sie sie?
- LCP (Größte Contentful Paint)<2,5 s: Heldenbild optimieren (Vorladen, WebP, richtige Größe)
- INP (Interaktion mit nächster Farbe)<200 ms: JS im Hauptthread minimieren, Scheduler-API verwenden
- CLS (Cumulative Layout Shift)<0,1: Legen Sie explizite Breite/Höhe für Bilder fest und vermeiden Sie die dynamische Inhaltsinjektion oberhalb der Falte
<!-- LCP optimization: preload hero image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="Hero">
<!-- CLS fix: always set image dimensions -->
<img src="photo.jpg" width="400" height="300" alt="Photo">
<!-- Or use aspect-ratio CSS -->
.image-container {
aspect-ratio: 4 / 3;
}8. Was ist Code-Splitting und warum ist es wichtig?
// Without code splitting: one huge bundle = slow initial load
// With dynamic imports (Webpack/Vite auto-split):
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent /> // only loaded when rendered!
</Suspense>
);
}
// Route-based splitting in Next.js (automatic)
// Each page is automatically split into its own chunk
// Only the current page's code loadsFrontend-Interviews testen Breite (HTML, CSS, JS, Leistung, Zugänglichkeit) und Reaktionstiefe. Machen Sie sich mit der CSS-Spezifität und den Layout-Eigenschaften vertraut, erklären Sie die Ereignisschleife klar, demonstrieren Sie Kenntnisse zur Leistungsoptimierung (CRP, Core Web Vitals, Code-Splitting) und zeigen Sie Bewusstsein für Barrierefreiheit. Erstellen Sie reale Projekte, die diese Fähigkeiten unter Beweis stellen – theoretisches Wissen allein wird Ihnen den Job nicht verschaffen.
🔗 Share this article
✍️ Leave a Comment