How Caching Works on the Web
There are multiple caching layers between a client and a server during a request.
Levels of caching
- Memory cache
- Service Worker cache - Cache controlled by the developer
- HTTP cache - Automatic cache
- HTTP 2 push cache
Memory cache
- Preloader - After the HTML tokenization done automatically by the browser Guide
- Preload - Special preload link
1 | <link rel="preload" as="script" href="super-important.js"> |
Service Worker cache
A specialized javascript worker thread. It acts as a proxy between the browser and the server.
Has elevated permissions to listen to and overwrite fetch requests.
The service worker itself is javascript file that has to be requested from the server so the service worker files caching must be handled with extreme caution.
HTTP cache
This is the classic browser cache.
Checks HTTP headers of incoming resources and caches them accordingly.
The http cache can be controlled trough HTTP headers.
HTTP2 push cache
HTTP2 gives the servers the ability to push resources to the client that it did not request.
Usually if the request does not contain a cookie the extra resources are pushed, in order to avoid multiple identical pushes.
The pushed resources are cached.
ETag
This is a validation token in the HTTP header of a file.
ETag is like a checksum of the file, if the cached resource expired the browser just has to check with the server if the resources ETag has not changed. If it did not change the resource can be retrieved from cache without the need for a network request.
ETags in express with static are implemented with an md5 hash by default.
Most of the functionality is coming from the send function directly.
Express serve static
Backward and Forward cache
This cache is implemented by the browsers.
It’s an in memory cache to make navigation faster.
