Card 1 of 50
Front. Long-task. What is a long task?
These cards are original study material. They are not questions from a named employer or a live hiring loop.
All 50 cards in this deck
1.Long-task
What is a long task?
Work on the main thread that runs long enough to delay input and paint. A 400 ms sort in a click handler is one.
2.Main-thread
What does the main thread do?
It runs your JavaScript, computes style and layout, and paints. Work you put there competes with the user's next click.
3.Worker
What is a web worker for?
Running script off the main thread. It cannot touch the page directly. You pass it data and take a result back.
4.Render-steps
What is the usual order after a style change?
Style is recalculated, layout may run, then paint, then composite. Skipping layout is cheaper than forcing it.
5.Reflow
What is layout, or reflow?
The browser computing where each box sits. Reading a size after changing style can force that work early.
6.Paint
What is paint?
Filling in pixels for text, colors, and borders. A change that only composites, such as a transform, can avoid it.
7.Composite
What is compositing?
Combining already painted layers, often on the GPU. Moving a layer with a transform stays on this cheap step.
8.Thrash
What is layout thrashing?
A loop that writes style, then reads layout, then writes again. Each read forces a fresh layout.
9.Lcp
What is largest contentful paint?
When the largest visible element finishes painting. It is a stand-in for when the page looks ready.
10.Inp
What does interaction to next paint measure?
How long after an input the next frame appears. A busy main thread makes this number large.
11.Cls
What is cumulative layout shift?
How much visible content jumps after it first appears. A late image with no reserved size is a common cause.
12.Lazy
What does lazy-loading an image do?
The image is fetched when it is near the screen, not when the page opens. The first screen paints with less to download.
13.Split
What is code splitting?
Shipping JavaScript in pieces so a route downloads the code it needs, not the whole app, on first load.
14.Controlled
What is a controlled input?
The input's displayed value lives in your state, and every keystroke updates that state. The DOM is not the source of truth.
15.Waterfall
What is a request waterfall?
A child waits to fetch until its parent has fetched and rendered. The calls run in series even when they could overlap.
16.Contrast
What does a contrast requirement protect?
Text has to stand out from its background enough to be read, including by people with low vision. Light gray on white often fails.
17.Focus
What is keyboard focus?
Which element receives keys. A control that only works on click, with no focus style, is unusable from a keyboard.
18.Semantic
Why use a button element for a button?
A button is in the tab order and fires from the keyboard with no extra code. A div that only has a click handler needs that keyboard behavior added and tested.
19.Viewport
What does the viewport meta tag do?
It tells the browser how to scale the page on a small screen. Without it, a phone may show a tiny desktop layout.
20.Xss
What is the risk of inserting raw HTML?
A string from a user can include script. If you inject it as HTML, that script runs as your origin.
21.Date
Why is parsing a date string unreliable?
The rules differ by browser once you leave the standard formats. Parse an explicit format, or an ISO string with a zone.
22.Hydration
What is hydration?
Client JavaScript attaches to HTML the server already sent, and makes it interactive. A mismatch between the two is a bug.
23.Virtual
What is list virtualization?
Rendering only the rows on screen, plus a small buffer. The rest exist as data, not as DOM nodes.
24.Key
What is a list key for?
So the framework can match a row to its state across renders. An index used as a key breaks that match when the list reorders.
25.Event-loop
What does the event loop do?
It takes the next task when the stack is clear: a timer, a click, a network callback. Long work delays everything behind it.
26.Microtask
What is a microtask?
A job queued by a promise, run after the current stack and before the next paint or timer. A chain of them can still starve the page.
27.Debounce
What does debounce do?
It waits until a burst of events pauses, then runs once. A search box uses it so you do not fetch on every key.
28.Throttle
What does throttle do?
It runs at most once per interval, while the events continue. A scroll handler uses it to sample, not to wait for silence.
29.Cors
What does CORS control?
Whether a page on one origin may read a response from another. The browser enforces it. The server opts in with headers.
30.Cookie
What is an HttpOnly cookie?
A cookie script cannot read. It can still be sent with requests, which is how a session id stays out of JavaScript.
31.Storage
What is local storage for?
Small strings that survive reloads on this origin. It is synchronous, not shared like a server, and not a place for secrets.
32.Sw
What is a service worker?
A script that can intercept fetches and serve a cached response. It is how an app keeps working when the network does not.
33.Cache-header
What does Cache-Control tell the browser?
Whether a response may be stored, and for how long. A hashed filename can be cached for a long time because the name changes when the bytes do.
34.Preload
What does a preload link do?
It starts a fetch you know you will need, before the parser reaches the tag that uses it.
35.Srcset
What is an image srcset for?
Offering several sizes so a phone does not download the desktop file. The browser picks.
36.Font
How can a web font hurt loading?
Text may stay invisible, or swap and shift layout, until the font arrives. A fallback and a reserved line height limit that.
37.Tree-shake
What is tree shaking?
Dropping exports that nothing imports, so they are not in the bundle. It only works when the bundler can see that the export is unused.
38.Error-boundary
What is an error boundary?
A component that catches a render error below it and shows a fallback, so one broken widget does not blank the page.
39.Contain
What is CSS containment?
Telling the browser that layout or paint inside an element stays inside it, so a change there does not invalidate the whole page.
40.Content-vis
What does content-visibility do?
It lets the browser skip layout and paint for content that is off screen, which helps a long page.
41.Motion
What is prefers-reduced-motion?
A user setting that asks for less animation. A large motion you do not gate ignores that request.
42.Aria
What is an accessible name?
The text a screen reader speaks for a control. A button with only an icon needs one, from visible text or an explicit label.
43.Live
What is an aria live region?
An area where updates are announced. Announcing every small change, such as each new row, can make the page unusable.
44.Form
Where should a form error be announced?
Next to the field, tied to it in the accessibility tree, and summarized where focus can find it. Color alone is not an error.
45.Abort
What is an AbortController for?
Canceling a fetch when the component goes away or a newer request replaces it, so a slow response cannot overwrite fresh state.
46.Race
What is a fetch race in the UI?
An older request finishing last and writing stale data over the newer answer. A sequence number, or aborting the old call, prevents it.
47.Memo
When does memoizing a component help?
When it re-renders often with the same inputs and its render is expensive. Memoizing a cheap component costs more than it saves.
48.Source-map
What is a source map?
A file that maps the shipped, transformed code back to the source you wrote, so a production stack trace names the real line.
49.Bundle
What is the JavaScript bundle?
The script the browser must download, parse, and run. Less of it on the first screen means a faster start.
50.Cls-font
How do you keep an image from shifting layout?
Give it a width and height, or a reserved aspect ratio, so the space exists before the file arrives.