Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
How would you use dynamic import() to lazy-load a component-specific library?
Tests lazy loading and bundle splitting. Good answers call import() inside the component lifecycle, await the module namespace, let the bundler split the chunk, and handle loading and error states. Bad answers put import() at top level, defeating lazy loading.
How do you lazy-load a route in Vue or Angular?
Tests route-level code splitting. Strong answers mention dynamic imports in Vue Router or Angular loadChildren and highlight a smaller initial JS bundle. Red flag: confusing this with image lazy loading or claiming it speeds up runtime navigation.
Vue computed vs method: performance difference and when to choose each?
This tests Vue reactivity caching. Answer: computed caches and reruns only when reactive deps change, while methods run each render. Choose computed for derived data; methods for events/args. Red flag: saying computed is always faster or passing arguments.
Would you use a Service or a custom Pipe for currency formatting?
Choose Pipe for declarative syntax; implement PipeTransform with transform(value, ...args); use Intl.NumberFormat; register standalone. Using Pipes for template formatting versus Services.
Explain Angular default change detection, zone.js, and OnPush
Deep knowledge of Angular's automatic vs explicit change detection. Explain zone.js monkey-patching async APIs to trigger default checks; contrast with OnPush requiring immutable inputs, async pipe, or markForCheck.
How does Angular OnPush change detection affect rendering?
This tests change detection tree knowledge. OnPush skips checks unless inputs change by reference, events fire, or async pipes mark for check. Mutated objects or manual subscriptions without markForCheck cause silent misses.
How would you implement lazy loading for an Angular feature module?
This tests route-level code splitting and CLI workflows. A great answer hits: ng generate module, loadChildren in the route config, and excluding the feature from AppModule. A red flag is suggesting manual chunking instead of router-driven lazy loading.
What is the primary end-user benefit of Svelte's compiler-first approach?
Tests if you connect compiler architecture to user-facing performance. Strong answer: build-time work shrinks bundles and reduces browser overhead for faster loads on slow devices. Red flag: answering with developer ergonomics instead of runtime performance.
How do you architect an automated performance and accessibility testing pipeline?
This tests operationalizing quality gates via automation, not manual checks. A strong answer covers Lighthouse CI in CI/CD, fail thresholds for CWV and WCAG, and a triage workflow assigning regressions to owners.
Discuss custom web font performance and loading strategies
Critical rendering path tradeoffs between speed and design fidelity. Strong answers match font-display to UX goals, combine preloading with subsetting, and quantify byte savings. Red flag: calling swap a free win while ignoring layout shift from reflow.
How would you structure Figma files for a new design system?
Tests Figma memory limits and library publishing. Strong answers split files by type—tokens, icons, components—and publish each as shared libraries to limit memory and enable parallel ownership.
How do you optimize nested Auto Layout for performance?
Tests architectural restraint and layer complexity in Figma. Strong answers use Grid and Wrap to avoid deep nesting, remove redundant groups, and favor component instances. Red flag: proposing invisible spacers or manual positioning hacks.
How would you optimize and implement a full-bleed responsive hero image?
Use srcset with AVIF/WebP, CSS object-fit cover, and width/height to prevent CLS. responsive image delivery and performance budgeting across breakpoints. serving one 4K JPEG as a background image with no size hints.
Chrome 136 cuts JS startup 630ms with compile hints
Chrome 136 ships Explicit Compile Hints, cutting parse and compile times by 630ms in V8 tests. The //# allFunctionsCalledOnLoad comment triggers eager background compilation for entire files, avoiding main-thread bottlenecks.
Chrome M137 Ships Speculative Deopts and Inlining for Wasm
Chrome M137 adds speculative inlining and deoptimization to V8's WebAssembly engine, cutting Dart microbenchmarks by over 50%. It targets WasmGC, making Java, Kotlin, and Dart faster using JS-style JIT assumptions. Benchmark WasmGC apps on M137 now.
V8 doubles JSON.stringify speed with side-effect-free fast path
V8 doubled JSON.stringify speed with a side-effect-free fast path. Every network and storage serialization of plain objects gets faster with zero code changes. Check your profiles if JSON encoding shows up hot.
Optimize a canvas with thousands of moving objects
Tests GPU-bound vs CPU-bound bottleneck diagnosis. Strong answers: batch draw calls to cut JS-to-GPU overhead, and render to a smaller back buffer to reduce fill-rate cost.
Which video event signals completion, and how do you track playback time?
Tests HTMLMediaElement events and UI performance. Answer: use ended for replay; read currentTime on timeupdate but throttle updates or use requestAnimationFrame. Red flag: setInterval polling, currentTime===duration checks, or unthrottled state writes.
How do you create a smooth Canvas 2D loop with requestAnimationFrame?
Tests render pipeline timing. Outline: queue rAF per refresh; derive delta from timestamp for frame-rate independence; recurse each frame; cancel via cancelAnimationFrame. Red flag: claiming rAF locks 60fps, ignoring timestamp, or setInterval is fine.
Design a Service Worker caching strategy for a news app
Cache First for the app shell, Stale-While-Revalidate for static assets, and Network First for article APIs. Matching resources to caching patterns and justifying speed vs freshness. One strategy everywhere or ignoring cache quotas.
Why access IndexedDB exclusively from a Web Worker?
Tests whether you know IndexedDB in workers keeps the main thread free from serialization and transaction overhead, while recognizing that postMessage copying and request-response coordination add real architectural complexity.
How do you query IndexedDB products by price range?
Tests IndexedDB indexing and range query APIs. You need a price index created in onupgradeneeded, then IDBKeyRange.bound(50, 100) with index.getAll or openCursor. Red flag: fetching all records and filtering in JavaScript.
What are localStorage's capacity and synchronous blocking limitations?
This tests Web Storage API trade-offs and main-thread blocking. A strong answer notes synchronous calls block the main thread; cites a finite per-origin quota; and names IndexedDB for async needs. Red flag: calling it a database or ignoring UI freezes.
Implement IntersectionObserver in TypeScript for lazy-loading images
Tests precise DOM typing and observer lifecycle. A strong answer types the callback as receiving IntersectionObserverEntry[], narrows entry.target to HTMLImageElement, swaps data-src to src, and calls unobserve.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.