Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
How do you debug out-of-memory errors in a Spark job?
Tests your systematic debugging of distributed systems. A great answer diagnoses via the Spark UI, investigates data skew and inefficient code (e.g., shuffles), and only then tunes memory or partition configs. Red flag: immediately increasing executor memory.
Design a client-side event batching system for a high-traffic app
This tests your grasp of frontend performance and data reliability. Outline a batching strategy (timer/size), then explain using `visibilitychange` with `navigator.sendBeacon()` to prevent data loss on unload. A red flag is suggesting synchronous XHR.
Angular Universal: Hybrid Rendering for Faster Apps
Angular Universal enables hybrid rendering, letting you choose where each page is built: on the server (SSR), at build time (SSG), or in the browser (CSR). This improves load times and SEO. The footgun is misconfiguring routes, negating performance gains.
SSR Hydration: Bringing Static Pages to Life
Hydration attaches JavaScript interactivity to a static HTML page sent from a server. It's used in Server-Side Rendering (SSR) frameworks to make the initial fast-loading page interactive.
Angular Lazy Loading: Ship Less Code Upfront
Think of your app as an encyclopedia. Lazy loading only fetches the volume (feature module) you need, when you need it, instead of loading the whole set upfront. Use it for distinct sections like dashboards.
Lazy Loading Routes: Faster Initial Loads
Lazy loading routes splits your app into smaller chunks, loading code only when a user visits a specific page. This drastically cuts initial load times for large SPAs. Just be sure not to use Vue's async components directly as route components.
NgRx Selectors: Memoized Queries for Your State
NgRx selectors are smart, cached queries for your app's state. They use memoization to avoid re-computing derived data if the underlying state hasn't changed. This prevents needless re-renders.
Angular's Default Change Detection with Zone.js
Zone.js tells Angular to re-check your entire app whenever any async event finishes. This is Angular's default magic: a variable updates after an HTTP call, and the UI just works. The footgun? This "check everything" approach is expensive in large apps.
ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
Angular TransferState: Avoid Double Data Fetching in SSR
TransferState is a key-value cache that bridges your Angular SSR server and the browser, preventing the client from re-fetching data the server already got. Use it to pass resolved API data from the server render to the client, avoiding wasted network calls.
Static Site Generation: Pre-built Pages for Speed & Simplicity
Static Site Generation (SSG) pre-builds every page of your site into static HTML files, instead of generating them on-demand. This makes sites incredibly fast and cheap to host on a CDN, perfect for blogs or docs. The footgun: build times grow with site size.
Angular Incremental Compilation: Faster Rebuilds
Angular's incremental compilation avoids full rebuilds by tracking changes, making performance proportional to what you changed, not the whole app. It speeds up development by reusing analysis and skipping file generation for unchanged code.
Angular Ivy: The Tree-Shakable Compiler
Angular's Ivy engine compiles components like separate puzzle pieces, making apps smaller and faster. This enables effective tree-shaking for smaller bundles and faster rebuilds.
Partial Hydration: Interactive Islands in a Static Sea
Partial hydration makes sites faster by treating interactive UI as "islands" in a sea of static HTML, loading JavaScript only where needed. It's ideal for content-heavy pages. The biggest challenge is managing state between these isolated interactive islands.
Svelte's Legacy immutable={true} Optimization
The `immutable={true}` option was a contract with the Svelte 3/4 compiler: you promise to never mutate data, and it uses fast referential checks for updates. It was a performance boost for immutable patterns.
JavaScript Bundle Analysis: Seeing Your App's Weight
Think of it as an X-ray for your compiled JavaScript, showing which libraries take up the most space. Use it to diagnose slow load times by finding large or duplicated dependencies.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
Angular's OnPush: Faster Apps by Doing Less
OnPush tells Angular to only re-render a component when its inputs change or its own events fire, not on every global event. It's a key performance boost for large apps, but mutating an input object directly won't trigger a re-render, causing a stale UI.
Vue Async Components: Defer Loading Until Needed
Vue async components defer loading a component's code until it's rendered, speeding up initial app loads. Use them for heavy components not needed right away, like modals or admin panels. The footgun is a blank UI if you don't handle loading/error states.
Vue's v-once: Render Once, Then Ignore
Use `v-once` to render a part of your template exactly once. After the initial render, Vue treats it as static content, ignoring future data updates for that element and its children. This is a performance optimization for content that never needs to change.
Angular AOT: Compile Before the Browser
Angular's AOT compiler converts your app into efficient JavaScript during the build process, not in the browser. This means faster rendering and smaller bundles, as the compiler itself isn't shipped.
SSR Hydration: Don't Re-render, Reuse
Hydration tells your client-side app to reuse the HTML sent by the server instead of wastefully re-rendering it. This prevents UI flicker in Server-Side Rendered apps and improves load performance.
Optimistic UI: Assume Success for a Faster Feel
An optimistic UI assumes an action will succeed, updating the interface instantly instead of waiting for the server. This makes actions like liking a post or adding to a cart feel instant. The footgun is failing to revert the UI when the server reports an.
*ngFor trackBy: Smarter DOM Updates in Angular
*ngFor's `trackBy` tells Angular how to uniquely identify items in a list. This prevents it from destroying and recreating the entire list in the DOM on every data update, instead allowing it to reuse existing elements.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.