Resource Loading u0026 Caching Strategies Quiz Quiz

Explore essential concepts of resource loading and caching strategies with this focused quiz, designed to test your knowledge of efficient content delivery and browser optimization techniques. Understand how various caching methods and best practices impact performance and user experience in web environments.

1. Cache-Control Directives

   When configuring cache behavior for static resources, which Cache-Control directive ensures that browsers must always revalidate the content with the server before using a cached version?

   1. public
   2. immutable
   3. stale-while-revalidate
   4. no-cache

   Explanation: The 'no-cache' directive requires browsers to revalidate the resource with the server before serving a cached copy, ensuring up-to-date content. 'Public' allows caching by any cache but does not force revalidation, while 'immutable' signals the resource will not change, avoiding revalidation altogether. 'stale-while-revalidate' permits use of stale content while revalidation happens in the background, which is different from requiring explicit revalidation before use.

2. Preloading Critical Resources

   Which approach is used to prioritize the loading of essential resources, such as stylesheets or fonts, by instructing the browser to fetch them earlier in the page load?

   1. Defer
   2. Lazyload
   3. Prefetch
   4. Preload

   Explanation: Preload is specifically designed to fetch important resources early, ensuring they are available as soon as they are needed, such as CSS or font files. Prefetch is intended for resources that might be needed in the future, not immediately. Defer is used for script loading so scripts run after parsing, and lazyload delays loading assets until needed, like when an image enters the viewport. Only 'Preload' ensures critical resources are prioritized in the loading sequence.

3. Cache Busting Techniques

   What is the main purpose of including a hash or version number in resource filenames (e.g., app.9a2c4f.js) when deploying web assets?

   1. To support HTTP2 multiplexing
   2. To reduce file size
   3. To prevent hotlinking
   4. To enable cache busting

   Explanation: Adding a hash or version number to resource filenames ensures that when the file changes, browsers recognize it as a new resource and do not serve an outdated cached version. This technique, known as cache busting, is unrelated to preventing hotlinking or reducing file size. HTTP2 multiplexing is a protocol-level feature not dependent on filename changes.

4. LocalStorage vs. Caching

   If a web application uses localStorage to store image data instead of relying on browser caching, which potential downside could affect performance or reliability?

   1. localStorage automatically compresses all assets
   2. localStorage always encrypts files, increasing CPU usage
   3. localStorage bypasses HTML parsing during load
   4. localStorage is synchronous and can block the main thread

   Explanation: localStorage operations are synchronous, which means reading or writing large amounts of data can block the main thread and harm app responsiveness. It does not encrypt files nor does it automatically compress content. Bypassing HTML parsing is not related to how localStorage works; its synchronous nature is the main consideration affecting performance.

5. Cache Scope in Service Workers

   In a service worker-enabled web application, what determines which URLs and resources a particular cache can control?

   1. The maximum cache size set in headers
   2. The origin of the indexed database
   3. The priority of the resource in the manifest
   4. The path specified in the service worker’s scope

   Explanation: A service worker’s scope, defined at registration, sets which URLs the worker and its caches can intercept and control. Maximum cache size only limits storage, not scope. The origin of the indexed database is unrelated, as are resource priorities in manifests, which affect only loading, not cache control.