Web Development Performance Optimization 2 — Questions and Answers
Question 1: What does the browser's Critical Rendering Path (CRP) determine?
- The order in which DNS lookups are resolved
- The sequence of steps to convert HTML/CSS/JS into pixels on screen (Correct answer)
- The priority of HTTP/2 stream multiplexing
- The order in which service workers intercept requests
Correct answer: The sequence of steps to convert HTML/CSS/JS into pixels on screen
The Critical Rendering Path describes the steps the browser takes—DOM, CSSOM, render tree, layout, paint—to display content.
Question 2: Which HTTP header instructs the browser to cache a resource for exactly 1 hour?
- Cache-Control: max-age=3600 (Correct answer)
- Expires: 3600
- Cache-Control: s-maxage=1h
- Pragma: cache=3600
Correct answer: Cache-Control: max-age=3600
Cache-Control: max-age=3600 tells the browser the resource is fresh for 3600 seconds (1 hour).
Question 3: What is the primary benefit of using a Content Delivery Network (CDN)?
- It compresses server-side code automatically
- It reduces latency by serving assets from servers geographically closer to users (Correct answer)
- It eliminates the need for browser caching
- It encrypts all traffic between client and server
Correct answer: It reduces latency by serving assets from servers geographically closer to users
CDNs cache and serve static assets from edge nodes nearest the user, reducing round-trip time.
Question 4: Which technique reduces the number of HTTP requests by combining multiple CSS or JS files into one?
- Tree shaking
- Code splitting
- Bundling (Correct answer)
- Minification
Correct answer: Bundling
Bundling merges multiple files into a single file, reducing the number of individual HTTP requests.
Question 5: What does 'tree shaking' accomplish in modern JavaScript build tools?
- Removes unused exports from the final bundle (Correct answer)
- Reorders DOM nodes for faster rendering
- Splits code into lazy-loaded chunks
- Compresses images using lossy algorithms
Correct answer: Removes unused exports from the final bundle
Tree shaking statically analyzes ES module imports and eliminates dead code that is never imported.
Question 6: Which image format provides both lossless and lossy compression and supports transparency, with excellent browser support as of 2024?
- JPEG
- GIF
- WebP (Correct answer)
- BMP
Correct answer: WebP
WebP supports both lossless and lossy compression with alpha transparency and typically produces smaller files than JPEG or PNG.
Question 7: What is 'render-blocking' in the context of web performance?
- When a CSS animation blocks GPU compositing
- When a resource must be downloaded and processed before the browser can render content (Correct answer)
- When JavaScript prevents service workers from activating
- When third-party scripts block first-party code execution
Correct answer: When a resource must be downloaded and processed before the browser can render content
Render-blocking resources like synchronous CSS and JS in <head> pause the browser's rendering pipeline until fully downloaded and parsed.
Web Development Performance Optimization 2
What does the browser's Critical Rendering Path (CRP) determine?