Front end caching mechanism


What is caching?

A cache can be considered a copy of a resource. It is different from the local cache, such as local storage. The local cache is more about data records and less data. The purpose of cache is to reduce requests, more for files and more storage.
The front-end cache can be divided into HTTP cache and browser cache.

Let’s explain the words that will appear later

  • Hit cache: the accessed data is in the cache

HTTP cache

What is HTTP caching

HTTP cache is actually: when the client sends a request to the server, it will first access the browser cache. If the browser cache has the requested resources, it will not send the request to the server, but use the cached resources.

This involves the process of loading a page by the browser, which is simply:

  1. The browser judges the information in the HTTP request header to see if it hits the strong cache. If it hits, it finds the information in the cache instead of sending the request to the server;
  2. If the strong cache hit fails, the negotiation cache will be performed, that is, the browser will send a request to the server, and the server will judge whether the browser local cache is invalid. If it does not fail, the server will return 304 and the browser will continue to load the cached resources;
  3. If the negotiation cache is not hit, the server will return the complete request resource information to the browser, the browser will load the new resource, and update the cache.

HTTP cache can be divided into strong cache and negotiation cache:

What is strong caching?

Strong cache is controlled by the cache control and expires fields of HTTP request header, indicating the expiration time of resources.
When the strong cache is hit, the browser will not send the request to the server. Then the status code returned is 200, which is very fast and has good performance. But sometimes we may change some styles and refresh the page without any change, because of strong cache. At this time, we can press Ctrl + F5 to force refresh.

  • Cache-Control

The relative time of cache, for example, cache control: 3600, means that the time of changing the resource to be cached is 3600 seconds, and then it becomes invalid.

  • Expires

It refers to the expiration time of the cache. Once it exceeds this time point, the cache will fail.

When the two exist at the same time, the priority of cache control is higher.

(pragma exists in http1.0 and is discarded in HTTP1.1. If the three exist at the same time, pragma has the highest priority.)

What is negotiation caching?

If the browser sends a request to the server, the server will judge whether the comparison resource is updated according to the last modify / if modify since or Etag / if none match of the HTTP request header. This can be regarded as the negotiation process between the browser and the server. If the resource of the server is not modified last time, the HTTP status code returns 304, and the browser loads the resource from the cache. If modified, the status code 200 is returned, and the updated resource and cache information are returned together.

  • Last-Modify/If-Modify-Since

Last modify / if modify since is a time to identify the last modification time of the resource. It is a way to check whether the server-side resource is updated.

  • Etag/If-None-Match

Etag / if none match returns an Etag (entity tag). Etag can ensure that every resource is unique, and resource changes will lead to Etag changes *. The change of Etag value indicates that the resource status has been modified.

The execution process looks like this:
When the browser sends the HTTP request to the server for the first time, it will return last modify and Etag in the response header; then, when the browser sends the request to the server for the second time, it will bring if none match corresponding to Etag and if modify since corresponding to last modify on the request header. After receiving the request, the server will compare the two parameters. If the return status code is 304, the resource has not been modified.

Browser cache

Browser cache includes cookies, webstorage (local storage, session storage), etc.


Cookies are plain text information stored in the client, mainly used for the storage of user information, with a capacity of 4KB.


Create cookies

document.cookie="username=John Doe";

Add expiration time to cookies

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

Tell the browser the path of the cookie through the path parameter

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Read cookies

Var CK = document. Cookie // returns all cookies as text


The data of localstorage is kept in the browser until the user clears the browser cache manually, with a capacity of 5MB.


var localStorage = window.localStorage

Store data

Localstorage. Setitem ("name", "caibin") // stores a variable with name and caibin
Localstorage. Name = "caibin"; // equivalent to the above command

Read data

Localstorage.getitem ("name") // caibin, read the value of the variable named name stored in the localstorage object // "caibin"

Localstorage. Valueof() // read all data stored on localstorage

Localstorage. Key (0) // read the variable name (key value) of the first data

//Traverse and output the name and value stored in localstorage

i=0; i<localStorage.length;i++){

  Console. Log ('+ I +' data stored in 'localstorage is named' + localstorage. Key (I) + ', and the value is' + localstorage. Getitem (localstorage. Key (I))));


Delete data

localStorage.removeItem("name"); //undefined

Clear localstorage



Sessionstorage is the same as the localstorage property, except that it is cleared when the current page is closed.

Usage is consistent with localstorage

The difference between cookie, localStorage and sessionStorage