Web Platform Interview Questions: Practice Quiz for Developers
Reviewed by Mark Dickie · Last updated
The Web Platform is the set of technologies browsers implement to render and run web applications, including HTML, CSS, JavaScript, and the standard APIs layered on top of them. A web platform interview tests whether you understand how the browser actually works: the DOM, the event loop, the rendering pipeline, and the built-in APIs for storage, networking, and user interaction. You should know how semantic HTML affects accessibility, how CSS layout and specificity resolve, and how JavaScript interacts with the platform through promises, workers, timers, and fetch. Most questions target practical browser behavior rather than algorithmic puzzles.
What does a Web Platform interview test?
| Topic area | What an interview typically asks |
|---|---|
| HTML & semantics | Element types, document structure, accessibility roles, form validation |
| CSS layout & specificity | Flexbox, Grid, box model, cascade order, stacking contexts |
| DOM & events | Event delegation, bubbling and capturing, shadow DOM, mutation observers |
| JavaScript browser APIs | fetch, Promises, Web Workers, IndexedDB, Intersection Observer |
| Performance & rendering | Repaint vs reflow, critical rendering path, lazy loading, caching |
How should I prepare for a Web Platform interview?
- Study the event loop and how microtasks differ from macrotasks, since this comes up in nearly every front-end interview.
- Review CSS layout systems (Flexbox and Grid) and be able to explain the box model, specificity, and how stacking contexts form.
- Practice working with the DOM directly: event delegation,
querySelector, shadow DOM, and when reflows happen. - Know the major browser APIs:
fetchandAbortController, Promises, Service Workers, IndexedDB, IntersectionObserver, ResizeObserver. - Understand the rendering pipeline: how HTML parsing, CSSOM construction, layout, paint, and compositing fit together.
What mistakes do candidates make in Web Platform interviews?
Many candidates can write framework components but stumble when asked how the browser actually renders a page or why a setTimeout fires after a promise resolves. The gap between framework fluency and platform knowledge is where most rejections happen. Reviewing the event loop order, CSS cascade rules, and the difference between localStorage, sessionStorage, and IndexedDB covers the most common stumbling points.
Key facts
- Tarmac has 98 Web Platform interview questions on this topic, 10 of them on this page, at difficulty 1–4 of 5.
- Tarmac last reviewed these Web Platform interview questions on 18 August 2026.
At a glance
| Questions | 10 shown · 98 in the bank |
|---|---|
| Difficulty | 1–4 of 5 |
| Formats | True / false, Multiple choice, Fill in the blank, Multiple answer, Find the bug, Short answer, Ordering, Code output, Flashcard |
What you'll review
- core web vitals
- event bubbling
- web workers
Practice questions
Web Platform/web-performance/core-web-vitals
Largest Contentful Paint (LCP) measures the time from when the user first navigates to a page to when the largest image or text block in the viewport is fully rendered. A 'Good' LCP score is 2.5 seconds or less.#
Options
Show answer
True. Largest Contentful Paint (LCP) measures how long it takes for the largest visible image or text block to render in the viewport from the start of page navigation. Google classifies an LCP of 2.5 seconds or less as 'Good', making this the target threshold for a positive user experience.
LCP does measure the render time of the largest content element visible in the viewport from the moment the user begins navigation. Google's thresholds classify LCP ≤ 2.5 s as 'Good', 2.5–4.0 s as 'Needs Improvement', and > 4.0 s as 'Poor'. Both parts of the statement are correct.
Web Platform/web-performance/core-web-vitals
Which of the following metrics is not one of Google's three Core Web Vitals (as of 2024)?#
Options
Show answer
First Contentful Paint (FCP) is not a Core Web Vital. The three Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). FCP is a useful diagnostic metric in Lighthouse and PageSpeed Insights, but it does not count as an official Core Web Vital and does not directly influence Google Search ranking signals.
The three Core Web Vitals are LCP (loading), INP (interactivity — which replaced FID in March 2024), and CLS (visual stability). First Contentful Paint (FCP) is a diagnostic metric reported in Lighthouse and PageSpeed Insights, but it is NOT one of the three Core Web Vitals. LCP, INP, and CLS are the metrics that feed directly into Google Search ranking signals.
Web Platform/web-performance/core-web-vitals
Complete the following Core Web Vitals thresholds:#
Show answer
Complete the following Core Web Vitals thresholds:
- LCP should occur within 2.5 seconds for a "Good" score.
- CLS should be less than 0.1 for a "Good" score.
- INP should be less than 200 milliseconds for a "Good" score.
Google defines "Good" thresholds for the three Core Web Vitals as: LCP ≤ 2.5 s (measures when the largest above-the-fold content element becomes visible); CLS < 0.1 (a unitless score measuring unexpected layout shifts); and INP < 200 ms (measures end-to-end latency of user interactions). Values between the Good and Poor thresholds are rated "Needs Improvement".
Web Platform/web-performance/core-web-vitals
Which of the following practices improve Largest Contentful Paint (LCP)? Select all that apply.#
Options
Pick every one that applies.
Show answer
- Adding
fetchpriority="high"to the hero<img>element - Preloading the LCP image with
<link rel="preload" as="image"> - Serving images via a CDN to reduce Time to First Byte (TTFB)
LCP measures when the largest content element (commonly a hero image) becomes visible. fetchpriority="high" on the hero <img> (option A) tells the browser to prioritise downloading that resource early, directly shortening its fetch time. <link rel="preload" as="image"> (option C) kicks off the LCP resource request before the parser even reaches the <img> tag, reducing discovery latency. Serving via a CDN (option D) reduces TTFB, which shortens the time before any byte of the page—including the LCP resource—can begin downloading. Option B (loading="lazy") is actively harmful for the LCP element because it intentionally delays its fetch. Option E describes deferring an analytics script that is already at the end of <body> and is therefore neither render-blocking nor related to the LCP element; moving a non-blocking end-of-body script to defer has no meaningful effect on LCP.
Web Platform/dom/event-bubbling
Clicking the dim backdrop should close the modal, but clicking inside the modal content closes it too. The listener is on the backdrop element. Which line is wrong?#
backdrop.addEventListener('click', (e) => {
closeModal();
});
// modalContent is a child of backdropShow answer
The bug is on line 2.
A click inside modalContent bubbles up to the backdrop, firing this listener. The handler closes unconditionally, so inner clicks close the modal too. Guard it with the originating element, e.g. if (e.target === e.currentTarget) closeModal();, so only clicks directly on the backdrop close it.
Web Platform/web-performance/core-web-vitals
A product team is trying to improve their page's Interaction to Next Paint (INP) score. Which of the following interventions reduce INP by shortening one of its three sub-parts (input delay, processing time, or presentation delay) for the measured interaction? Select all that apply.#
Options
Pick every one that applies.
Show answer
Two interventions reduce INP by shortening one of its sub-parts: (1) breaking up long JavaScript tasks with scheduler.yield() or setTimeout so the main thread is free when the user interacts (shrinks input delay), and (2) minimizing DOM size and expensive style recalculations triggered by handlers so layout and paint complete faster (shrinks presentation delay). Image format changes, HTTP/2 stream limits, and blanket requestAnimationFrame wrapping do not.
INP measures the latency of discrete interactions from input until the next frame is painted, and is decomposed into input delay, processing time, and presentation delay. (a) Yielding long tasks with scheduler.yield() or setTimeout keeps the main thread from being blocked when the user interacts, which reduces the input delay portion of INP for subsequent interactions — a well-established optimization in Google's INP guidance. (d) Reducing DOM size and expensive style recalculations triggered by handlers shortens the layout/paint work the browser must do after the event callback, directly reducing presentation delay. (b) Switching image formats to WebP reduces page weight and affects LCP/transfer cost, but does not change how quickly the main thread responds to an interaction. (c) HTTP/2 concurrent-stream limits are a network-multiplexing concern unrelated to main-thread interaction latency. (e) Unconditionally wrapping interaction-driven DOM updates in requestAnimationFrame defers the visual update to a later frame, which generally increases presentation delay for the measured interaction; Google's INP guidance specifically warns against using rAF as a blanket wrapper for interaction visual updates for this reason.
Web Platform/web-performance/core-web-vitals
Explain what Cumulative Layout Shift (CLS) measures and describe two specific, distinct root causes that commonly produce a high CLS score on a production web page. For each cause, state the recommended fix.#
Show answer
CLS measures the sum of all unexpected layout shift scores that occur during the page's lifecycle. Each layout shift score is calculated as the product of the impact fraction (the fraction of the viewport affected) and the distance fraction (how far elements moved). A high CLS is commonly caused by: (1) Images or media without explicit width/height attributes — the browser does not reserve space for them, so when they load they push content down. Fix: always set width and height attributes or use aspect-ratio in CSS so the browser reserves the correct space before the resource loads. (2) Dynamically injected content (e.g., ad banners, cookie consent banners, or lazy-loaded components) inserted above existing content — this shifts everything below it downward. Fix: pre-reserve the space with a placeholder of the same dimensions (e.g., a min-height container), or insert the content below the fold / outside the current viewport.
CLS is the only Core Web Vital that is not a time-based metric; it quantifies visual instability. Its score is the sum of (impact fraction × distance fraction) for each unexpected shift. The two most prevalent causes are unsized media (no reserved space) and late-injected content above the fold. The fixes directly address the reservation of layout space before resources load or content appears.
Web Platform/web-performance/core-web-vitals
A browser navigates to a page whose LCP element is an <img>. Consider the following five milestones, where each milestone is defined as the first moment the described condition becomes true. Arrange them in the order in which they must occur.#
Put these in order
Show answer
The correct order is: TTFB → image request dispatched → first image byte received → first paint of the image → LCP entry recorded. Each milestone is a strict data-dependency of the next: the browser needs HTML bytes to discover the <img>, needs to send the request before bytes come back, needs some image bytes to paint any pixels, and per the Web Vitals spec the largest-contentful-paint renderTime corresponds to that first paint.
Each milestone is a strict data-dependency prerequisite of the next, giving a single uncontested total order. (s1) TTFB precedes everything — no HTML bytes means no parsing and no discovered <img>. (s2) The request for the image can only be dispatched after enough HTML has arrived to expose the tag or its preload hint, so s2 follows s1. (s3) The first image byte cannot arrive before the request has been sent, so s3 follows s2. (s4) The first paint of the image requires at least some image bytes to have been received and decoded (even progressive/streaming codecs need some bytes on hand), so s4 follows s3. (s5) The Web Vitals spec ties the LCP renderTime to the moment the element was first painted, so the entry cannot be recorded before that paint occurred; s5 follows s4. Note this version deliberately uses first-occurrence milestones (first byte, first paint) rather than completion gates, which sidesteps progressive-decode and tiled-rendering concerns — decode may overlap download and paint may overlap decode, but the first occurrence of each still respects this ordering.
Web Platform/dom/event-bubbling
#child is inside #parent. The user clicks #child. What is logged, in order?#
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', () => console.log('parent capture'), true);
parent.addEventListener('click', () => console.log('parent bubble'));
child.addEventListener('click', () => console.log('child'));
// user clicks #childShow answer
parent capture
child
parent bubble
An event runs in three phases: capture (root → target), target, then bubble (target → root). The parent's capturing listener (third arg true) fires first on the way down, then the listener on the clicked target #child, then the parent's default (bubbling) listener on the way back up.
Web Platform/browser-apis/web-workers
How does a dedicated Web Worker communicate with the page, and how is the data passed?#
Show answer
Both sides use postMessage(data) to send and listen for the message event to receive. By default the data is deep-copied via the structured clone algorithm (functions and DOM nodes can't be sent); large ArrayBuffers can instead be transferred (zero-copy, but unusable on the sender afterwards).
Workers share no memory with the main thread, so all communication is message-passing. Structured clone copies most data; the transferable-objects optimization hands ownership of a buffer to the other side without copying.
Sources
The official documentation these questions are checked against:
Related interview questions
The other 88 questions
This page shows 10. A free account opens the rest and marks your answers, which a page of answers can't do. Miss one and it returns a few days later, then a week after that, until you stop missing it.
Free · the whole bank · 100 graded answers per 30 days · written feedback and job-ad quizzes on the paid plan