A few days ago, I saw an article about cache to thoroughly understand the Http cache mechanism – three elements decomposition method based on cache strategy. I felt very interesting, so I planned to systematically learn the knowledge related to Http cache.

I divide cache into two parts: cache storage and cache comparison.

  1. The basic concept

  2. Cache hit speed comparison

  3. 200 from cache  vs  304 Not Modified 

  4. Consider: localStorage storage

(1) Basic concepts

(1) Cache storage

  • Pragma: no-cache http1.0 attributes are used for compatibility

  • Expires: 0 Indicates an HTTP1.0 attribute

  • Cache-control http1.1 cache-control http1.1 cache-control http1.1 cache-control http1.1

    • Public/Private Private cache/Common cache

    • No-cache: the local cache is not recommended, but is still cached locally

    • No-store: No data is cached on the client side

    • Max-age: A special attribute that is a hybrid property instead of an expiration date

For example, if you want to set the client to not cache and be http1.0 compliant, you can write:



Pragma : no-cacheExpires.0
Cache- the Control:no-storeCopy the code

Is equivalent to



Pragma : no-cache  // PragmaFor compatibility with HTTP1. 0
Cache- the Control:max-age=0// The Expires attribute is removed, and merged tomax- the age,Copy the code

Private cache: One way to do private Expires caching is to type about:cache into your browser and see what’s in your browser’s cache. This will give you a “disk cache statistics” page that displays the cache’s contents. This is interesting to look at and displays a lot of information: The expiration limit, in GMT format, is a Web server response header field that tells the browser that the browser can cache data from the browser before the expiration of the HTTP request without requesting it again. However, Expires is an HTTP 1.0 thing, and the default browser now uses HTTP 1.1 by default, so its role is largely ignored. One drawback to Expires is that the time returned is the server’s time. The problem with Expires is that if the client’s time is out of sync with the server’s time (for example, clocks are out of sync, or across time zones), the error can be large, so as of HTTP 1.1, cache-control is used: Max-age = second replacement.

(2) Cache comparison

  • Last-modified HTTP1.0 era properties are still in use today

  • ETag (Entity Tag) http1.1 new attribute, using inode+mtime (explained below) to calculate. A hash string (similar to the result after MD5 or SHA1) generated from the entity content identifies the state of the resource. When the resource send changes, the ETag changes with it.

Inode: contains meta information about a file, including the following

  • Number of bytes of the file, User ID of the file owner, and Group ID of the file

  • Read, write, and execute permissions on files

  • Ctime indicates the last time the inode changed, mtime indicates the last time the content of the file changed, and atime indicates the last time the file was opened.

  • Mtime: Indicates the time when the contents of the file were last changed

2.1 Why ETag with HTTP1.1

  1. Some servers don’t know exactly when a file was last modified, so you can’t use the last modified time to determine whether a file was updated.

  2. Some files are modified very frequently, making changes in seconds or less. Last-modified is only accurate to the second.

  3. The last modification time of some files has changed, but the content has not. We don’t want the client to think the file has changed.

2.2 What are problems with ETag

ETag has its own problems, so it is often turned off in use. For example, the same file has different inodes on different physical machines, which results in different ETags being returned when access lands on different physical machines in a distributed Web system, resulting in 304 failures and relegated to 200 requests. The solution is to strip the inode from the ETag algorithm using mtime, but this is actually the same as last-Modified. Of course, you can also make the ETag algorithm for static resources hash. However, since we usually use CDN technology, ETag issues in cluster deployment are not a big deal, so there are not too many people involved. Reference: Answer by Hefangshi

(2) Comparison of hit cache speed

The image description cites a diagram from the Definitive GUIDE to HTTP that shows the hit cache process:

(1) Cache hit rate

Cache hit > Cache reverification succeeded > Cache missed = Cache reverification failed;

1.1 Cache hit Priority

Cache-control http1.1 > Expires > Pragma http1.0 to determine whether (200 from Cache)

1.2 Cache Reverification Succeeded

If 304 is Not Modified, then 304 is returned. If 304 is Not Modified, then 304 is returned. If 304 is Not Modified, then 304 is returned.

Picture description

  • The server response header last-modified corresponds to the client request header if-modified-since

  • The server response header ETag matches the client request header if-none-match

(3) 200 from cache vs 304 Not Modified

Why does Status in the console not display 200 from cache when a cache hit? It turns out it’s the browser:

  • Trigger 200 from cache:

    • Click the link directly to visit

    • Enter the url and press Enter to access it

    • Qr code scanning

  • Trigger 304 Not Modified:

    • Triggered when the page is refreshed

    • Triggered when a long cache is set but Entity Tags are not removed

How to choose between the two

No doubt the option is to hit as many caches as possible and then invalidate the cache by updating the version number of the static file. Is it recommended to use file.xxx.js instead of file.js for the version number? V = XXX.

You can see these two articles for reasons:

  1. Best Practices for Speeding Up Your Web Site

  2. How do you develop and deploy front-end code in large companies

(4) Thinking

What are the disadvantages of static resources (JS/CSS) stored in localStorage? Why is it not widely used? If the speed is really super fast, this can be ignored and worth the time to study, but if the speed of reading and executing may be lower than the browser direct 304 performance, there is no need to use this method.

(5) Reference articles:

  1. Configuration error: 200 OK (FROM CACHE) vs. 304 NOT MODIFIED

  2. www.benhallbenhall.com/2012/03/htt…