Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

Introduction to the

The browser cache mechanism is a common interview question and a necessary knowledge during the development process

Start with a big picture you drew

Several locations of the cache

  • From disk cache: Reads the cache from the hard disk
  • From memory cache: Reads data from the memory cache

Both can only read some derived class files, such as some external resources introduced in HTML

Browser cache judgment method

Corresponding to the large image above, you can see how the browser cache is determined.

Cache-Control

Check cache-control first

Cache-control: max-age=2592000 cache-control: max-age=2592000 No-catch // Request the server each time and download cache-control: no-storeCopy the code

Etag

If cache-control is max-age and the specified time is exceeded, Etag will be determined. Etag is the unique identifier of the current file, and the generated rule is determined by the server (file index + size + modification time hash).

Sends a request to the server, requesting a header

If-None-Match: Etag
Copy the code

If the server returns 200, the file is expired. If the server returns 304, the file is not expired

Last-Modified

If there is no Etag, the last-Modified request headband is determined

If-modify-since: indicates that the time is accurate to secondCopy the code

If the server returns 200, the file is expired. If the server returns 304, the file is not expired

The above is a small knowledge of the browser cache mechanism, you can see the larger picture of the study, welcome to like and comment ~