Web Programming Web Performance and Optimization 2 — Questions and Answers
Question 1: What is code splitting in the context of web applications?
- Dividing code into frontend and backend
- Breaking a JavaScript bundle into smaller chunks loaded on demand (Correct answer)
- Separating HTML, CSS, and JavaScript into different files
- Splitting code across multiple developers
Correct answer: Breaking a JavaScript bundle into smaller chunks loaded on demand
Code splitting breaks a large JavaScript bundle into smaller chunks that can be loaded on demand or in parallel, reducing the initial bundle size and improving load time.
Question 2: What does the HTTP/2 protocol improve over HTTP/1.1?
- Stronger encryption
- Multiplexing — allowing multiple requests over a single connection simultaneously (Correct answer)
- Larger maximum file sizes
- Improved cookie security
Correct answer: Multiplexing — allowing multiple requests over a single connection simultaneously
HTTP/2 introduces multiplexing, which allows multiple HTTP requests and responses to be sent simultaneously over a single TCP connection, eliminating HTTP/1.1's head-of-line blocking.
Question 3: What is the purpose of image optimization in web performance?
- To improve image copyright protection
- To reduce image file sizes while maintaining acceptable visual quality, improving load times (Correct answer)
- To apply CSS filters to images
- To convert images to base64 encoding
Correct answer: To reduce image file sizes while maintaining acceptable visual quality, improving load times
Image optimization reduces file sizes through compression, proper formatting (WebP, AVIF), and appropriate dimensions, significantly improving page load performance since images are often the largest page assets.
Question 4: What is a service worker in web development?
- A background process on the web server
- A script that runs in the browser background, enabling offline functionality and push notifications (Correct answer)
- A database worker thread
- A CSS animation process
Correct answer: A script that runs in the browser background, enabling offline functionality and push notifications
A service worker is a JavaScript file that runs in the background separate from the web page, acting as a network proxy to enable offline capabilities, caching, and push notifications.
Question 5: What does the 'render-blocking' term mean in web performance?
- JavaScript that prevents server rendering
- Resources like CSS or JavaScript that must load before the browser can render the page (Correct answer)
- Backend processes that block HTTP responses
- CSS animations that block user input
Correct answer: Resources like CSS or JavaScript that must load before the browser can render the page
Render-blocking resources are files (usually CSS or synchronous JS in the <head>) that the browser must download and process before it can render any of the page content.
Question 6: What is the benefit of using WebP image format over JPEG?
- WebP supports animated images only
- WebP typically provides smaller file sizes with similar or better quality for both lossy and lossless compression (Correct answer)
- WebP has wider browser support than JPEG
- WebP supports higher resolution than JPEG
Correct answer: WebP typically provides smaller file sizes with similar or better quality for both lossy and lossless compression
WebP offers superior lossless and lossy compression compared to JPEG and PNG, resulting in smaller file sizes (25-35% smaller than JPEG) while maintaining comparable image quality.
Web Programming Web Performance and Optimization 2
What is code splitting in the context of web applications?