Colloquio Tecnico Frontend — Cheat Sheet

Tag: frontend, javascript, typescript, react, web-performance, browser, css

Livello: intermedio

TL;DR: Sintesi rapida su architettura frontend, rendering nel browser, gestione dello stato, ottimizzazione delle prestazioni e ciclo di vita dei componenti.

Concetti chiave

Critical Rendering Path: parsing HTML, costruzione DOM e CSSOM, calcolo layout, compositing e paint.

Event Loop: Call Stack, Web APIs, Microtask queue (Promise, queueMicrotask) e Macrotask queue (setTimeout, setInterval, I/O).

Virtual DOM: riconciliazione basata su alberi immutabili e algoritmo di diffing euristico.

State Management: separazione tra UI state locale, server state asincrono e global application state.

Scopes e Chiusure: accesso allo scope lessicale esterno anche dopo il ritorno della funzione outer.

Reattività: binding dichiarativo tra mutazione dei dati e aggiornamento selettivo dell'interfaccia.

Web Vitals fondamentali: LCP per caricamento, INP per interattività e CLS per stabilità visiva.

Bundle Optimization: tree shaking, dynamic import con code splitting e lazy loading delle rotte.

Strategie di rendering: CSR per interattività client, SSR per SEO/TTFB, SSG per contenuti statici pre-renderizzati.

Accessibilità (a11y): semantica HTML nativa, ruoli ARIA, gestione del focus e navigabilità da tastiera.

Domande tipiche e risposte pronte

Q: Qual è la differenza sostanziale tra Microtask e Macrotask nell'Event Loop?R: I Microtask hanno precedenza assoluta e vengono svuotati completamente dopo ogni operazione sincrona prima che il browser ceda il passo a un Macrotask o al ciclo di rendering.

Q: Come previeni re-render inutili in un'applicazione React complessa?R: Isolo lo stato locale il più in basso possibile nell'albero, normalizzo i dati e applico memoization mirata con memo, useMemo e useCallback solo su calcoli costosi o riferimenti stabili.

Q: Come funziona il meccanismo di event delegation nel DOM?R: Sfrutto l'event bubbling agganciando un singolo listener a un nodo genitore comune anziché a ogni singolo elemento figlio, verificando target o currentTarget.

Q: Qual è la differenza tra debounce e throttle?R: Debounce ritarda l'esecuzione finché non trascorre una pausa prestabilita dall'ultimo evento; throttle garantisce l'esecuzione a intervalli regolari durante eventi continui.

Q: In che modo ottimizzi il Largest Contentful Paint (LCP)?R: Precarico l'immagine o risorsa LCP critica via preload, elimino risorse bloccanti nel tag head e utilizzo formati compressi moderni con caching aggressivo su CDN.

Insidie e errori comuni

Modifica diretta dello stato anziché aggiornamento immutabile, causando mancati re-render o incongruenze.

Memory leak provocati da listener sul DOM, subscription o timer non ripuliti all'unmount del componente.

Layout thrashing causato dall'alternanza ravvicinata di letture e scritture di proprietà geometriche del DOM.

Utilizzo dell'indice dell'array come prop key in liste dinamiche con riordinamento o eliminazione.

Chiusure stantie (stale closures) dentro hook asincroni o callback che catturano riferimenti obsoleti.

Blocco del thread principale con computazioni CPU-heavy eseguite direttamente anziché spostate su Web Worker.

Snippet e comandiTypeScript

// Implementazione essenziale di debounce tipizzato
function debounce<T extends (...args: unknown[]) => void>(
  fn: T,
  delayMs: number
): (...args: Parameters<T>) => void {
  let timerId: ReturnType<typeof setTimeout> | undefined;
  return (...args: Parameters<T>) => {
    if (timerId !== undefined) clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delayMs);
  };
}

TypeScript

// AbortController per cancellare fetch pendenti al cambio input
const controller = new AbortController();
fetch("/api/search?q=" + encodeURIComponent(query), {
  signal: controller.signal,
})
  .then((res) => res.json())
  .catch((err: Error) => {
    if (err.name !== "AbortError") console.error(err);
  });
// In cleanup: controller.abort();

Da ripassare

[ ] Meccanismi di repaint, reflow e GPU compositing con CSS transform/opacity

[ ] Specifica di INP (Interaction to Next Paint) e diagnostica Long Animation Frames (LoAF)

[ ] Gestione e sincronizzazione della cache client con stale-while-revalidate

[x] Principi di semantica HTML5 e gestione tabIndex per accessibilità

[x] Sintassi e utilizzo pratico di Promise.all vs Promise.allSettled