Top 30 Performance Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   Which change to Vue's template parser in 3.4 is primarily responsible for its 2× speed improvement?

   • aIt delegates parsing to htmlparser2 while keeping the old regex-based tokenizer
   • bIt replaced recursive descent and heavy regex with a single-pass state-machine tokenizer
   • cIt added look-ahead caching to the existing recursive descent approach
   • dIt skips source-map generation during single-file component compilation
   Show the answer

   Answer: b · It replaced recursive descent and heavy regex with a single-pass state-machine tokenizer

   The card states the parser was rewritten from a recursive descent approach relying on heavy regex to a state-machine tokenizer based on htmlparser2 that iterates only once. Option A is tempting because it mentions htmlparser2, but the old regex-based tokenizer was fully replaced, not retained.

   Read the full bite: Vue 3.4 Cuts Build Times 44%, Stabilizes defineModel

2. Question 2 of 30

   For which file is //# allFunctionsCalledOnLoad the most appropriate optimization?

   • aEvery script on a page to ensure all compilation happens off the main thread
   • bA lazily-loaded module that splits code to reduce initial bundle size
   • cA core entry-point bundle whose functions execute during initial page load
   • dA large utility library fetched during page load but only used after user interaction
   Show the answer

   Answer: c · A core entry-point bundle whose functions execute during initial page load

   The hint is designed for known startup files so V8 can compile them in the background during network load. Using it on all scripts (A) or on non-startup files (A, D) wastes CPU and memory without improving startup time.

   Read the full bite: Chrome 136 cuts JS startup 630ms with compile hints

3. Question 3 of 30

   What condition forces V8's JSON.stringify to abandon its new side-effect-free fast path and use the slower recursive serializer?

   • aOne of the properties defines a custom toJSON method
   • bThe object graph nests deeper than the previous recursive stack limit
   • cThe object was created with Object.create(null)
   • dString values contain two-byte Unicode characters
   Show the answer

   Answer: a · One of the properties defines a custom toJSON method

   Custom toJSON methods execute user code during serialization, violating the side-effect-free guarantee required for the fast path. Deep nesting is actually improved by the iterative fast path, while Unicode strings and null-prototype objects do not inherently trigger the slower recursive serializer.

   Read the full bite: V8 doubles JSON.stringify speed with side-effect-free fast path

4. Question 4 of 30

   Why does WasmGC benefit significantly from speculative inlining while traditional Wasm 1.0 modules generally do not?

   • aWasmGC binaries are larger and more complex, exceeding the optimization budgets of static compilers.
   • bLanguages targeting WasmGC compile through JavaScript, requiring V8 to optimize them with the same speculative pipeline used for JS.
   • cWasmGC features like virtual methods and subtyping produce indirect call targets that static analysis cannot predict, unlike statically structured Wasm 1.0.
   • dWasm 1.0 code lacks static type information, so it already relies on V8's speculative JIT rather than ahead-of-time toolchains.
   Show the answer

   Answer: c · WasmGC features like virtual methods and subtyping produce indirect call targets that static analysis cannot predict, unlike statically structured Wasm 1.0.

   WasmGC's higher-level constructs such as virtual methods and subtyping create opaque indirect call sites that defeat static analysis, making runtime feedback and speculative inlining essential. Option D reverses the actual relationship: Wasm 1.0 works well with ahead-of-time optimization precisely because it exposes sufficient static structure, not because it lacks it.

   Read the full bite: Chrome M137 Ships Speculative Deopts and Inlining for Wasm

5. Question 5 of 30

   An Angular app suffers from both excessive backend requests during username checks and bloated bundles from legacy ngIf/ngFor usage. Which paired approach best resolves both issues?

   • aDebounce async validators in Signal Forms and migrate structural directives to Control Flow syntax
   • bReplace Signal Forms with RxJS reactive forms and wrap templates in @defer blocks
   • cUse synchronous validators only and convert all components to standalone
   • dAdd client-side HTTP caching and enable production build optimizations
   Show the answer

   Answer: a · Debounce async validators in Signal Forms and migrate structural directives to Control Flow syntax

   The correct paired approach is debouncing Signal Forms async validators to stop redundant backend calls and migrating legacy structural directives to Control Flow syntax for bundle and runtime gains. The most tempting distractor suggests using only synchronous validators and standalone components, but synchronous validators cannot check username availability against a backend, and standalone components do not replace legacy ngIf or ngFor directives.

   Read the full bite: Angular 21.1 ships with Signal Forms debounce patterns

6. Question 6 of 30

   When using Vue 3.5's stable reactive props destructure, what must you do to keep a destructured prop reactive when passing it to watch or a composable?

   • aConvert it to a ref using toRef()
   • bUse withDefaults as a fallback wrapper
   • cPass it directly; destructured props retain reactivity automatically
   • dWrap the variable in a getter function
   Show the answer

   Answer: d · Wrap the variable in a getter function

   Vue 3.5 requires wrapping destructured props in getters when passing them to watch or composables to preserve reactivity. Passing them directly severs the reactive link, and withDefaults is the old boilerplate this feature replaces.

   Read the full bite: Vue 3.5 cuts reactivity memory 56%, adds lazy hydration

7. Question 7 of 30

   Why does a 200ms synchronous data mapping on a React Native screen freeze interactive components like TouchableOpacity?

   • aThe mapping executes on the native UI main thread, blocking rendering and touch handling for 12 frames.
   • bIt monopolizes the JavaScript thread, so batched native updates and queued touch events cannot be processed.
   • cThe native main thread stalls waiting for the JavaScript mapping to complete before it can render updates.
   • dReact.memo cannot prevent reconciliation because the mapping creates new references, forcing expensive re-renders that exceed the 16.67ms frame budget.
   Show the answer

   Answer: b · It monopolizes the JavaScript thread, so batched native updates and queued touch events cannot be processed.

   The correct answer recognizes that the JavaScript thread is blocked, preventing batched native updates and touch events from being handled. Option A is tempting because it confuses the JavaScript thread with the native UI main thread, which is the exact misconception the card highlights.

   Read the full bite: UI unresponsive during large data processing on main thread

8. Question 8 of 30

   How does Svelte's compiler-first design most directly improve the end-user experience compared to virtual DOM frameworks?

   • aIt shifts work to build time, producing smaller bundles and less browser CPU work for faster page loads.
   • bIt removes every byte of framework runtime code, so apps run without any JavaScript overhead.
   • cIt pre-computes virtual DOM diffs at build time to speed up reconciliation in the browser.
   • dIt allows developers to write less boilerplate, making UI code easier to read and maintain.
   Show the answer

   Answer: a · It shifts work to build time, producing smaller bundles and less browser CPU work for faster page loads.

   Svelte's compiler generates imperative vanilla JavaScript at build time, which shrinks bundles and eliminates virtual DOM diffing overhead for end users. Option D describes a developer experience benefit, not a user-facing performance improvement.

   Read the full bite: What is the primary end-user benefit of Svelte's compiler-first approach?

9. Question 9 of 30

   What is the primary effect of enabling inline requires in a React Native app?

   • aIt defers a module's evaluation until the first time it is actually used
   • bIt removes unused exports from the bundle through tree shaking
   • cIt moves all module loading onto a background thread automatically
   • dIt compiles JavaScript to native machine code ahead of time
   Show the answer

   Answer: a · It defers a module's evaluation until the first time it is actually used

   Inline requires transform top-level imports so a module is evaluated lazily on first use, cutting startup work. It does not compile to machine code (that is closer to Hermes bytecode) nor perform tree shaking, which is a separate bundler concern.

   Read the full bite: Improving React Native startup time

10. Question 10 of 30

    Why does wrapping a heavy synchronous computation in an async function fail to keep a Node server responsive?

    • aThe computation is still synchronous and never yields the single JS thread
    • bPromises lower the priority of CPU work in the loop
    • cAsync functions run on a separate OS thread automatically
    • dThe garbage collector preempts long Promises
    Show the answer

    Answer: a · The computation is still synchronous and never yields the single JS thread

    async/await only helps when there is an awaited asynchronous boundary; a synchronous CPU loop still occupies the single thread, blocking the event loop. Worker Threads provide real parallelism.

    Read the full bite: Offloading CPU-bound work with Worker Threads

11. Question 11 of 30

    Why does indexing a Swift String by an integer like myString[5] not compile, unlike in many other languages?

    • aInteger subscripting was removed only for security reasons and may return later
    • bString.Index is just an alias for Int but Apple hid the operator
    • cCharacters are variable-width grapheme clusters, so an integer offset cannot give O(1) or unambiguous access
    • dSwift strings are immutable, so any subscript access is disallowed
    Show the answer

    Answer: c · Characters are variable-width grapheme clusters, so an integer offset cannot give O(1) or unambiguous access

    Swift Characters are extended grapheme clusters of varying byte length, so an integer offset is neither constant-time nor meaningful, which is why String.Index is opaque. Immutability is unrelated, and String.Index is not an Int alias.

    Read the full bite: Why can't you subscript a Swift String with an Int?

12. Question 12 of 30

    Which statement best captures the mechanical cost of maintaining multiple indexes on a write-heavy table?

    • aEach write requires updating only the indexes whose key columns changed, minimizing I/O for unrelated indexes
    • bThe database uses binary search trees for indexes, causing frequent full-tree rebalancing on every insert
    • cEvery table write typically triggers random I/O to update each index's B-Tree, plus node splits and log overhead
    • dIndexes are stored as hash maps, so range queries require full table scans but writes remain cheap
    Show the answer

    Answer: c · Every table write typically triggers random I/O to update each index's B-Tree, plus node splits and log overhead

    The card explains that every write likely updates every index, causing extra random I/O, node splits, and WAL overhead. Option B reflects the common misconception that binary search trees are the classic disk structure, while D confuses hash indexes with the standard B-Tree approach.

    Read the full bite: Explain database indexes, the classic data structure, and write-heavy trade-offs

13. Question 13 of 30

    Why can defining styles with StyleSheet.create be preferable to inline literal objects in a long list?

    • aIt forces all styles to be applied synchronously on the native main thread
    • bIt automatically converts pixel units to platform-independent dp values
    • cIt reuses a stable object reference across renders instead of allocating a new object each time
    • dIt enables CSS cascade and selector matching for nested components
    Show the answer

    Answer: c · It reuses a stable object reference across renders instead of allocating a new object each time

    StyleSheet styles are created once and referenced by key, giving stable references that avoid per-render allocations. React Native has no CSS cascade, and unit handling is not what StyleSheet.create provides.

    Read the full bite: Inline styles vs StyleSheet.create

14. Question 14 of 30

    What is the fundamental mechanism by which Hermes improves React Native app startup performance?

    • aIt dynamically optimizes JavaScript code during runtime using a Just-In-Time (JIT) compiler.
    • bIt replaces JavaScript with a more performant native language for critical UI components.
    • cIt significantly reduces the final app's JavaScript bundle size by automatically tree-shaking unused modules.
    • dIt performs Ahead-Of-Time (AOT) compilation of JavaScript into optimized bytecode during the app's build phase.
    Show the answer

    Answer: d · It performs Ahead-Of-Time (AOT) compilation of JavaScript into optimized bytecode during the app's build phase.

    Hermes is an Ahead-Of-Time (AOT) focused engine that pre-compiles JavaScript into optimized bytecode during the build process, reducing the work the device has to do at startup. While it contributes to a smaller app size, its primary mechanism for faster startup is not tree-shaking or JIT compilation.

    Read the full bite: Hermes: The JS Engine for Faster React Native Apps

15. Question 15 of 30

    What is the primary benefit of splitting a CPU-intensive synchronous operation into smaller pieces using setTimeout(fn, 0)?

    • aTo ensure the entire operation completes faster by leveraging asynchronous execution.
    • bTo allow the browser to process UI updates and user input between task segments.
    • cTo execute each piece of the task in parallel, improving overall performance.
    • dTo guarantee that each piece runs immediately after the previous one, without any delay.
    Show the answer

    Answer: b · To allow the browser to process UI updates and user input between task segments.

    The card states that splitting work with setTimeout(fn, 0) allows yielding control back to the event loop, enabling the browser to process user input and render updates, keeping the UI alive. Option A is incorrect because this technique adds overhead and does not necessarily speed up the overall execution time; its purpose is responsiveness, not raw speed.

    Read the full bite: JavaScript's Event Loop: Macrotasks & Microtasks

16. Question 16 of 30

    What is the fundamental problem Node.js streams are designed to solve for data handling?

    • aProcessing large datasets without exhausting system memory.
    • bEnsuring data integrity during network transmission.
    • cProviding random access to data within large files.
    • dReducing the complexity of asynchronous I/O operations.
    Show the answer

    Answer: a · Processing large datasets without exhausting system memory.

    The card states streams were created to 'process data piece by piece, keeping memory usage low and constant regardless of the total data size' because loading large files entirely into memory is inefficient or impossible. While streams can simplify I/O (option D), their core purpose is memory efficiency for large data, and they are not ideal for random access (option C).

    Read the full bite: Node.js Streams: Processing Data in Chunks, Not Blobs

17. Question 17 of 30

    Why can using array indices as keys cause state pollution when a list is reordered?

    • aReact uses keys purely to optimize diffing speed, so indices only slow down reconciliation without affecting which component state is attached to which DOM node.
    • bReact requires globally unique keys, so indices fail when multiple lists render and cause cross-component state leakage during reconciliation.
    • cReact interprets changed indices as new components, forcing a full remount of the list and resetting all state and focus on every update.
    • dReact relies on keys to identify elements across renders; indices make React match DOM nodes to the wrong data, preserving state for the wrong item.
    Show the answer

    Answer: d · React relies on keys to identify elements across renders; indices make React match DOM nodes to the wrong data, preserving state for the wrong item.

    Keys provide sibling-scoped identity, not just a performance shortcut; when indices are reused after reordering, React incorrectly associates the old DOM node and its state with new data. Option A is wrong because keys fundamentally determine state preservation, so unstable keys create correctness bugs rather than merely slower reconciliation.

    Read the full bite: How does React use keys in reconciliation? When do keys cause bugs?

18. Question 18 of 30

    Why must a Kotlin function be declared `inline` to use a `reified` type parameter?

    • aTo ensure the function call avoids creating a lambda object, which would otherwise interfere with runtime type checks.
    • bBecause `reified` checks are computationally expensive and require the performance optimizations that `inline` provides.
    • cTo prevent the JVM's type erasure from removing the generic type information from the function's signature in the compiled class file.
    • dBecause inlining moves the function's bytecode to the call site, where the compiler can access the concrete type argument.
    Show the answer

    Answer: d · Because inlining moves the function's bytecode to the call site, where the compiler can access the concrete type argument.

    The `reified` keyword needs to know the actual type at runtime, which is normally erased by the JVM. The `inline` keyword enables this by copying the function's code to the call site, where the compiler knows the concrete type (e.g., `String`) and can substitute it directly into the bytecode. Option C is incorrect because `inline` doesn't prevent type erasure in general; it provides a clever workaround for a specific call.

    Read the full bite: Explain `inline` and `reified` in Kotlin

19. Question 19 of 30

    For which scenario would Python's async/await typically NOT provide a performance benefit?

    • aReading data from several different database tables.
    • bProcessing a large dataset with intensive numerical calculations.
    • cMaking multiple concurrent API calls to different services.
    • dHandling many simultaneous incoming web requests in a server.
    Show the answer

    Answer: b · Processing a large dataset with intensive numerical calculations.

    Async/await is designed for I/O-bound tasks where the program spends time waiting, allowing other tasks to run during these waits. CPU-bound tasks, like intensive numerical calculations, will block the single event loop, preventing any other tasks from progressing and thus negating the benefits of concurrency.

    Read the full bite: Python's async/await: Concurrent, Not Parallel

20. Question 20 of 30

    An endpoint fires 1 query for a list and then one extra query per item to load a relation. Which fix most directly reduces the number of round trips?

    • aIncrease the database connection pool size
    • bAdd a read-through cache in front of the queries
    • cEager-load the relation with a JOIN or single batched IN query
    • dAdd a covering index on the child table
    Show the answer

    Answer: c · Eager-load the relation with a JOIN or single batched IN query

    Eager loading collapses the per-item queries into one or two statements, attacking the round-trip count itself. Caching only masks the volume and adds invalidation work without removing the structural N+1 pattern.

    Read the full bite: Diagnosing and fixing the N+1 query problem

21. Question 21 of 30

    What is the main performance trade-off introduced by adding a database index?

    • aIt requires manual updates to maintain data consistency.
    • bIt increases the complexity of database schema design.
    • cIt makes queries on non-indexed columns significantly slower.
    • dIt speeds up data retrieval but slows down data modification operations.
    Show the answer

    Answer: d · It speeds up data retrieval but slows down data modification operations.

    The card explicitly states that indexes speed up data retrieval but add overhead to INSERT, UPDATE, and DELETE operations, as the index structure must also be modified. This trade-off between faster reads and slower writes is the primary consideration. Indexes do not inherently complicate schema design, slow down non-indexed queries, or require manual updates for consistency.

    Read the full bite: Database Index: The Phonebook for Your Data

22. Question 22 of 30

    What is the primary benefit of Go's garbage collector for concurrent network services?

    • aIt completely eliminates all "stop-the-world" pauses during memory reclamation.
    • bIt allows developers to manually manage memory for performance-critical components.
    • cIt performs most of its work concurrently with the application, ensuring high responsiveness.
    • dIt guarantees memory is always deallocated immediately after an object becomes unreachable.
    Show the answer

    Answer: c · It performs most of its work concurrently with the application, ensuring high responsiveness.

    Go's GC is designed to run concurrently with the application, minimizing the duration of "stop-the-world" pauses to maintain responsiveness for services. While pauses are very short, they are not completely eliminated, making option A incorrect.

    Read the full bite: Go's Garbage Collector: The Concurrent Cleaner

23. Question 23 of 30

    A social app adds a like_count column directly on the posts table instead of counting rows in a likes table on every read. According to the card, what new problem does this denormalization introduce?

    • aThe count can drift out of sync if updates aren't handled atomically, requiring periodic reconciliation
    • bReads become slower because the column must still be computed with a join
    • cIt removes the need for any consistency handling since counts are now precomputed once
    • dIt only works if the underlying database doesn't support ACID transactions
    Show the answer

    Answer: a · The count can drift out of sync if updates aren't handled atomically, requiring periodic reconciliation

    The card's example warns that a missed update or race condition can leave the count wrong, requiring periodic reconciliation, that is the core cost of denormalizing. The tempting wrong answer has it backwards: the point of adding the column is that reads become a fast single column fetch, not a join.

    Read the full bite: When to intentionally denormalize a schema

24. Question 24 of 30

    During page navigation, a 75 KB analytics batch must be sent immediately. Which approach best prevents data loss?

    • aQueue it in memory for the next page load
    • bUse navigator.sendBeacon with the entire batch
    • cUse synchronous XMLHttpRequest in a beforeunload handler
    • dUse fetch with keepalive set to true
    Show the answer

    Answer: d · Use fetch with keepalive set to true

    fetch with keepalive can transmit payloads larger than sendBeacon's 64 KiB cap during page teardown, whereas navigator.sendBeacon would exceed its size limit and synchronous XMLHttpRequest blocks the main thread, harming navigation speed.

    Read the full bite: Design client-side event batching and prevent unload data loss

25. Question 25 of 30

    For which task would Node.js Worker Threads provide the most significant benefit?

    • aHandling concurrent network requests from many clients.
    • bQuerying a remote database for user profiles.
    • cProcessing a large video file to apply a filter.
    • dReading multiple files from the local filesystem.
    Show the answer

    Answer: c · Processing a large video file to apply a filter.

    Worker threads are specifically designed for CPU-bound operations like video processing to offload heavy computation from the main thread. I/O-bound tasks, such as database queries or network requests, are already efficiently managed by Node's event loop and do not benefit from worker threads.

    Read the full bite: Worker Threads: True Parallelism in Node.js

26. Question 26 of 30

    What is the main advantage of using a Tag Management System (TMS) for website analytics and marketing scripts?

    • aIt converts all client-side scripts into server-side operations for enhanced security.
    • bIt allows non-developers to deploy and manage third-party scripts without direct code changes.
    • cIt completely replaces the need for any custom JavaScript development on a website.
    • dIt automatically optimizes the loading order and performance of all website scripts.
    Show the answer

    Answer: b · It allows non-developers to deploy and manage third-party scripts without direct code changes.

    The card highlights that a TMS empowers non-technical users, such as marketers, to add, edit, and manage third-party scripts through a web interface, eliminating the need for engineers to manually update website code. While a TMS can indirectly impact performance through better script management, its primary benefit is enabling independent script deployment by non-developers.

    Read the full bite: Tag Management Systems: Control Your Analytics Snippets

27. Question 27 of 30

    To prevent data loss in a client-side event batching system when a user closes the tab, which approach best balances reliability and user experience?

    • aDecrease the `setInterval` duration for batch sends to 1 second to minimize the window for data loss.
    • bUse `navigator.sendBeacon()` within a `pagehide` event listener to send the final batch asynchronously without blocking the page unload.
    • cTrigger a standard `fetch()` POST request in an `unload` event listener to send the remaining events.
    • dUse a synchronous `XMLHttpRequest` inside a `beforeunload` event handler to block the page until the request completes.
    Show the answer

    Answer: b · Use `navigator.sendBeacon()` within a `pagehide` event listener to send the final batch asynchronously without blocking the page unload.

    `navigator.sendBeacon()` is designed for this exact use case, reliably sending data without blocking the unload process. A standard `fetch()` is not guaranteed to complete, and synchronous XHR is a deprecated practice that harms user experience.

    Read the full bite: Design a Client-Side Event Batching System

28. Question 28 of 30

    When designing a client-side event batching system, why is navigator.sendBeacon() preferred for dispatching final events during page unload?

    • aIt is specifically designed to send data asynchronously and non-blocking, ensuring the request is sent even after the page has unloaded without freezing the UI.
    • bIt automatically handles network retries and guarantees event ordering on the server, simplifying backend implementation.
    • cIt provides a reliable callback mechanism to confirm server receipt of data before the page closes.
    • dIt allows for sending arbitrarily large data payloads, exceeding typical XMLHttpRequest limits, which is crucial for large event batches.
    Show the answer

    Answer: a · It is specifically designed to send data asynchronously and non-blocking, ensuring the request is sent even after the page has unloaded without freezing the UI.

    navigator.sendBeacon() is ideal for unload because it's asynchronous and non-blocking, ensuring data is sent without freezing the UI or being canceled by page unload. Option C is incorrect because sendBeacon is a fire-and-forget mechanism and does not provide a callback for server receipt.

    Read the full bite: Design a client-side event batching system for a high-traffic app

29. Question 29 of 30

    When initializing UI handlers on a page with external images, which distinction between DOMContentLoaded and window.load matters most?

    • aDOMContentLoaded always blocks until all stylesheets finish downloading, so load is safer for initialization
    • bwindow.load fires once the HTML parser finishes, while DOMContentLoaded waits for every stylesheet and image
    • cThe two events are interchangeable today, though load provides better backward compatibility
    • dDOMContentLoaded fires after deferred scripts run but does not wait for images, letting handlers bind earlier
    Show the answer

    Answer: d · DOMContentLoaded fires after deferred scripts run but does not wait for images, letting handlers bind earlier

    DOMContentLoaded fires after HTML parsing and deferred scripts complete, so you can bind UI handlers before heavy assets like images finish, whereas window.load waits for all subresources. The most tempting distractor reverses the two events: window.load is the one that waits for every asset, not DOMContentLoaded.

    Read the full bite: Describe the difference between DOMContentLoaded and window.load

30. Question 30 of 30

    When building a full-bleed landing page hero, which combination of techniques best prevents layout shift while optimizing image delivery across devices?

    • aApply the image as a CSS background-image with background-size: cover and serve a single 4K JPEG.
    • bUse a picture element with multiple source tags for art direction, CSS object-fit: cover, and omit width/height attributes to allow fluid scaling.
    • cUse an img tag with HTML width/height attributes, srcset with AVIF/WebP variants, CSS object-fit: cover, and fetchpriority="high".
    • dUse an img tag with a single high-resolution WebP source, object-fit: cover, and rely on CSS width: 100% for layout reservation.
    Show the answer

    Answer: c · Use an img tag with HTML width/height attributes, srcset with AVIF/WebP variants, CSS object-fit: cover, and fetchpriority="high".

    This approach reserves space to eliminate CLS, lets the browser choose the optimal resolution and modern format, and prioritizes the likely LCP element. Option A is a common mistake because background-image sacrifices native responsive selection, accessible alt text, and browser optimizations while a single 4K JPEG wastes mobile bandwidth.

    Read the full bite: How would you optimize and implement a full-bleed responsive hero image?