Introduction
This website demonstrates how caching works at different levels (browser, cache, server) and what happens when a browser fetches a resource from a server.
Browser Cache
How Browser Caches Work
The browser caches resources such as images, scripts, and stylesheets. When you visit a website multiple times, the browser retrieves these resources from its local cache instead of the server.
Server Cache
How Server Caches Work
Some servers implement caching mechanisms to reduce server load and improve performance. These caches are often located on the same network as the client's device.
Caching Levels
1. Browser Cache
This is the fastest level of caching. It stores resources locally on the user's device.
2. Local Cache
These are more advanced caches used by some platforms like Google Chrome. They store resources in memory and can be backed by disk storage.
Cache Expiration
What Happens If a Resource Expired?
If a cached resource expires, the browser may have to re-fetch it from the server. This process ensures that outdated resources are not displayed.
Cache Invalidation
How to Invalidate a Cache
Invalidate a cache by sending an HTTP cache-control headers with "max-age=0" which forces the browser to request the resource again from the server.
Conclusion
Caching plays a crucial role in improving the performance of web applications by reducing the number of requests made to the server.