cache-guide

Cache-guide is a simple doc site explaining browser caching, common cache-control headers, and best practices.

The site uses simple animations to explain what's happening under-the-hood when your browser is caching data. Here's an example visualizer of the max-age header in action:

client

cache

server

HTTP Message Type: request

request: GET /script-v1.js, GET /styles-v1.css, GET /cats-v1.jpg

What's happening?

Client requests a script, a stylesheet, and an image.

Ready to get started learning?

Next: Caching 101

We're open-source

This app is published under MIT license, feel free to poke around the github to see how things were built or make contributions.

Contribution areas:

HTTP animation flow content (animation component above is dynamically populated by a JSON datamodel)
cache-control header documentation
non-browser caching documentation