Web Development Performance Optimization 4 — Questions and Answers
Question 1: What does the term 'layout thrashing' refer to in browser performance?
- Excessive repaints caused by CSS transitions
- Repeatedly triggering layout by interleaving DOM reads and writes in JavaScript (Correct answer)
- Memory leaks caused by detached DOM nodes
- Blocking the main thread with synchronous fetch calls
Correct 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.
Question 2: Which web API allows you to observe when elements enter or exit the viewport without scroll event listeners?
- ResizeObserver
- MutationObserver
- IntersectionObserver (Correct answer)
- PerformanceObserver
Correct answer: IntersectionObserver
IntersectionObserver asynchronously notifies you when a target element's intersection with the viewport changes.
Question 3: What is the purpose of prefetching a resource with <link rel='prefetch'>?
- To preload resources needed for the current page's critical path
- To hint the browser to fetch a resource that may be needed for future navigation (Correct answer)
- To preconnect to a third-party origin before making requests
- To prerender an entire page in the background
Correct 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.
Question 4: What does 'code splitting' allow you to do in a JavaScript application?
- Remove duplicate code across multiple files
- Split your bundle into smaller chunks loaded on demand (Correct answer)
- Separate CSS from JavaScript at build time
- Inline critical JS directly into HTML
Correct 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.
Question 5: Which Performance API method would you use to mark a specific point in time during script execution for performance measurement?
- performance.now()
- performance.mark() (Correct answer)
- performance.measure()
- performance.getEntries()
Correct answer: performance.mark()
performance.mark() creates a named timestamp in the performance timeline that you can later reference with performance.measure().
Question 6: What is the main advantage of using a Service Worker for caching over standard HTTP caching?
- Service workers compress assets automatically
- Service workers give you programmatic control over cache strategies and offline support (Correct answer)
- Service workers bypass HTTPS requirements
- Service workers eliminate the need for a CDN
Correct 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.
Question 7: In the context of web fonts, what does 'font-display: swap' do?
- Prevents web fonts from loading until CSS is parsed
- Shows a fallback font immediately, then swaps to the web font when loaded (Correct answer)
- Downloads only the character subsets needed for the page
- Inlines the font as a base64 data URI
Correct 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.
Web Development Performance Optimization 4
What does the term 'layout thrashing' refer to in browser performance?