Frontend Developer interview questions

How to approach thisThe critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JS into pixels on screen. Optimize by: minimizing critical resources, reducing critical path length (defer non-essential CSS/JS), and reducing critical bytes (minification, compression, tree-shaking).

How to approach thisCSR sends an empty shell and renders in the browser (fast deploys, poor initial load). SSR renders on every request server-side (good for SEO, slower TTFB under load). SSG pre-renders at build time (fastest, but stale until rebuild). Discuss when each is appropriate and mention ISR as a hybrid.

How to approach thisThe event loop processes the call stack, then checks the microtask queue (Promises, queueMicrotask), then the macrotask queue (setTimeout, I/O callbacks, requestAnimationFrame). Microtasks always drain completely before the next macrotask. This is why a resolved Promise callback fires before a setTimeout(fn, 0).

How to approach thisWeb Vitals (LCP, FID/INP, CLS) measure real user experience. To fix poor LCP: identify the LCP element (usually a hero image or heading), preload critical resources, use responsive images with srcset, eliminate render-blocking CSS, and server-render the above-the-fold content.

How to approach thisSpecificity is calculated as (inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). When two rules conflict, the higher specificity wins. If equal, the last rule in source order wins. To avoid specificity wars, use methodologies like BEM or utility-first CSS (Tailwind).

How to approach thisUse IntersectionObserver to detect when the user nears the bottom, then fetch the next page. For performance, virtualize the list (only render visible items + buffer) using a library like react-window or TanStack Virtual. Debounce scroll events if not using IntersectionObserver.

How to approach thisA custom dropdown needs: role='listbox' on the container, role='option' on each item, aria-expanded on the trigger, keyboard navigation (arrow keys, Enter, Escape), focus management when opening/closing, and screen reader announcements for selection changes. Consider using a headless library (Radix, Headless UI) instead of building from scratch.

How to approach thisCookies are sent with every HTTP request (max 4KB, can be httpOnly and Secure). localStorage persists until explicitly cleared (5-10MB, same-origin). sessionStorage is cleared when the tab closes. Use cookies for auth tokens, localStorage for user preferences, sessionStorage for ephemeral form state.

How to approach thisLoad it with async or defer attributes. If it is not critical, load it after the window load event. Measure its impact with the Performance API. Consider self-hosting if the CDN is unreliable. For analytics scripts, use the Partytown library to move them to a web worker.

How to approach thisA service worker is a background script that intercepts network requests. For offline support: cache critical assets during the install event, serve from cache on fetch (cache-first or stale-while-revalidate strategy), and show a fallback page when the network and cache both miss. Be careful with cache invalidation.

How to approach thisLayout thrashing happens when you repeatedly read layout properties (offsetHeight, getBoundingClientRect) then write to the DOM in a loop, forcing the browser to recalculate layout on every read. Batch all reads first, then batch all writes. Use requestAnimationFrame or libraries like FastDOM to schedule DOM operations.

How to approach thisFlexbox is one-dimensional (row OR column). Grid is two-dimensional (rows AND columns simultaneously). Use Flexbox for navigation bars, card rows, centering content. Use Grid for page layouts, dashboards, or any layout where items need to align on both axes. They compose well together.