Performance Optimization Flashcards

What does the term 'layout thrashing' refer to in browser performance?

Answer: Repeatedly triggering layout by interleaving DOM reads and writes in JavaScript

Layout thrashing occurs when JS alternately reads then writes layout properties, forcing the browser to recalculate layout repeatedly.

Which web API allows you to observe when elements enter or exit the viewport without scroll event listeners?

Answer: IntersectionObserver

IntersectionObserver asynchronously notifies you when a target element's intersection with the viewport changes.

What is the purpose of prefetching a resource with ?

Answer: To hint the browser to fetch a resource that may be needed for future navigation

rel='prefetch' tells the browser to fetch a low-priority resource in the background for likely future use.

What does 'code splitting' allow you to do in a JavaScript application?

Answer: Split your bundle into smaller chunks loaded on demand

Code splitting breaks a large bundle into smaller chunks that are loaded lazily, reducing the initial JavaScript payload.

Which Performance API method would you use to mark a specific point in time during script execution for performance measurement?

Answer: performance.mark()

performance.mark() creates a named timestamp in the performance timeline that you can later reference with performance.measure().

What is the main advantage of using a Service Worker for caching over standard HTTP caching?

Answer: Service workers give you programmatic control over cache strategies and offline support

Service workers let you implement custom caching logic (cache-first, network-first, stale-while-revalidate) and enable offline functionality.

In the context of web fonts, what does 'font-display: swap' do?

Answer: Shows a fallback font immediately, then swaps to the web font when loaded

font-display: swap renders text with a fallback font right away, then replaces it with the web font once downloaded, avoiding invisible text.