Frontend Developer Interview Questions and Answers

Questions and model answers

9 questions you are likely to hear.

1. 1

   Explain the JavaScript event loop.

   Why they ask: This is the foundation for understanding async behaviour and many subtle bugs.

   Sample answer: JavaScript runs on a single thread with a call stack. When I call async APIs like setTimeout or fetch, the browser handles them outside the stack, and their callbacks are queued when ready. The event loop runs each task to completion, then drains the microtask queue, which holds promise callbacks and queueMicrotask, before rendering and taking the next task. So a resolved promise callback runs before a setTimeout of zero. I once debugged a UI freeze caused by a long synchronous loop processing 50,000 rows; splitting the work into chunks with requestIdleCallback kept the page responsive.

2. 2

   What is a closure? Give a practical example.

   Why they ask: Closures are central to JavaScript patterns and frequently asked.

   Sample answer: A closure is a function that remembers variables from the scope where it was created, even after that outer function has returned. A practical example is a debounce function: it keeps a timer variable in its closure and returns a new function that clears and resets that timer on each call. I used debounce on a search input so the API is called only after the user stops typing for 300 milliseconds, which cut search requests by about 80 percent. Closures can also cause memory leaks if they hold references to large objects or DOM nodes that should be released.

3. 3

   How does the browser render a page, and what causes layout thrashing?

   Why they ask: This tests browser internals and performance awareness.

   Sample answer: The browser parses HTML into the DOM and CSS into the CSSOM, combines them into a render tree, calculates layout, paints pixels and composites layers. Layout thrashing happens when code repeatedly writes to the DOM and then reads layout properties like offsetHeight in a loop, forcing the browser to recalculate layout many times per frame. The fix is to batch reads first and then writes, or use requestAnimationFrame. For animations I prefer transform and opacity, which can be handled by the compositor without layout. Fixing this on a scrolling table removed visible jank on low-end Android phones.

4. 4

   How do you make a custom dropdown accessible?

   Why they ask: Accessibility is now a standard expectation, and custom widgets are where most failures happen.

   Sample answer: First I check whether a native select works, because it is accessible by default. If a custom dropdown is needed, I use a button with aria-haspopup and aria-expanded, and a list with role listbox and options with role option and aria-selected. Keyboard support must include arrow keys, Enter, Escape and Home and End, and focus must return to the button when the menu closes. I test with a screen reader such as NVDA or VoiceOver and with keyboard only. On a banking portal, fixing these patterns helped us pass an accessibility audit that had blocked release.

5. 5

   What are Core Web Vitals, and how have you improved them?

   Why they ask: Performance directly affects business metrics, so interviewers want hands-on experience.

   Sample answer: Core Web Vitals are Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness and Cumulative Layout Shift for visual stability. On an ecommerce site, LCP was around 4 seconds because the hero image was large and loaded late. I served responsive WebP images, preloaded the hero, and inlined critical CSS, bringing LCP under 2.5 seconds on mobile. CLS came from ads and images without dimensions, so I reserved space with aspect-ratio. INP improved after we split a heavy third-party script and deferred it. I track field data in Search Console, not only Lighthouse.

6. 6

   Explain CSS specificity and how you avoid specificity wars.

   Why they ask: Interviewers check CSS fundamentals and maintainable styling practices.

   Sample answer: Specificity decides which rule wins when several match an element. Inline styles beat IDs, IDs beat classes, attributes and pseudo-classes, and those beat element selectors; !important overrides normal rules. Specificity wars happen when teams keep adding more specific selectors or !important to override each other. I avoid this by using single-class selectors with a naming convention like BEM, CSS modules or utility classes, and cascade layers with @layer to control order. In one legacy app we had over 200 !important declarations; moving component styles into layers let us remove most of them.

7. 7

   How would you prevent XSS in a frontend application?

   Why they ask: Security awareness is expected from every frontend developer.

   Sample answer: I never insert untrusted data as HTML. I render text with textContent or the framework's default escaping, and avoid innerHTML or dangerouslySetInnerHTML unless the content is sanitised with a library like DOMPurify. I validate URLs before using them in href to block javascript: links. I also rely on a Content Security Policy that restricts script sources and disallows inline scripts where possible, and I keep auth tokens in httpOnly cookies rather than localStorage. During a review, I found a rich text comment field rendering raw HTML and fixed it with sanitisation before it reached production.

8. 8

   Build an autocomplete search box. What would you consider?

   Why they ask: This common live coding task checks practical UI engineering.

   Sample answer: I would debounce input to around 300 milliseconds, cancel stale requests with AbortController so older responses do not overwrite newer ones, and cache recent queries. The UI needs loading, empty and error states. For accessibility I would use the combobox pattern with aria-expanded, aria-activedescendant and full keyboard navigation. I would highlight the matched text safely without injecting HTML, and limit results to a manageable number. On mobile I would make sure the list does not get hidden behind the keyboard. I would build a working version first, then add these improvements in order of user impact.

9. 9

   Tell me about a frontend performance problem you solved.

   Why they ask: This shows ownership and measurable impact.

   Sample answer: Our analytics dashboard took about 9 seconds to become interactive because the main bundle was over 2 MB. Using the bundle analyser, I found a full charting library, a date library with all locales and several unused UI components. I code-split each dashboard route, lazy-loaded charts, replaced the date library with a smaller one and removed dead code. The main bundle dropped to around 600 KB, and time to interactive fell to roughly 3 seconds on a mid-range phone. I added a bundle size check to CI so regressions are caught in pull requests.

Keep going.

• React Developer Interview Questions and Answers
• Full Stack Developer Interview Questions and Answers
• UI/UX Designer Interview Questions and Answers
• React Job Support Online for Frontend Developers
• Technical Interview Tips That Actually Help
• Coding interview help