Writing in the front

Originally is the note, did not think of to write to write to have the meaning of a little article, that simply perfect a come up roar! This is a summary of almost everything you need to know about caches, including all headers and usage instructions in HTTP caches, as well as the corresponding groupings to help you remember them, and what to look out for in offline caches.

If you like it, please like it. If you have any questions, please leave a comment and discuss it. If there is any mistake, please correct it. 😄

HTML5 offline Cache

manifest

HTML5 offline cache mainly through the MANIFEST attribute of HTML elements to specify a file with the suffix of MANIFEST, which files for the web page to be cached, which files do not need to cache, as well as the handling method of acquisition failure, etc., the file mainly contains four parts:

  1. CACHE MANIFEST: the title, which is located in the first line of the file. If no title is specified, file parsing fails

  2. CACHE: This part specifies the list of files to be cached. The content is the relative path, corresponding to the path introduced in the HTML file. Generally, the main document does not need to be added.

  3. NETWORK: specifies a file that does not need to be cached, that is, it is always fetched from the server.

  4. FALLBACK: specifies the processing method when obtaining files fails. Such as:

CACHE MANIFEST

CACHE:
./js/main.js
./css/main.css

NETWORK:
signup.html # do not cache the login page

FALLBACK:
signup.html offline.html
# When a request from this path is not available, all requests are forwarded to the default.html file for processing
/app/ajax/ default.html
Copy the code

Its working process is roughly as follows:

  1. The first time you visit the page, the browser loads the page and the required resources
  2. Resolve tohtmlElements of themanifestFile, loadCACHEAs well asFALLBACKThe corresponding resource is put into the cache
  3. From now on you will use all the files in the browser cache, even forced refreshes will not take effect. The browser then tries to checkmanifestWhether the file is updated (online status is checked only). ifmanifestFile update, the browser will download all resources and update the cache.
  4. When a cached resource is accessed offline, the browser reads from the cache and, accordingly, accessesNETWORKThe resources in theFALLBACK.

Note: The browser will only reload new resources if the manifest file is updated, meaning that simply changing the content of the resource file will not trigger the update. This can be addressed by adding version annotations to the manifest. And the cache update does not take effect immediately, only the next access to take effect! You can listen for events through the browser API to remind the user to refresh the browser.

applicationCache API

The window.applicationCache object can trigger a series of events related to the cache state. Its status attribute 0 to 5 also corresponds to different states.

window.applicationCache.oncached = function (e) {
  console.log('cached! ')}window.applicationCache.onchecking = function (e) {
  console.log('checking! ')}window.applicationCache.ondownloading = function (e) {
  console.log('downloading! ')}window.applicationCache.onerror = function (e) {
  console.log('error! ', e)
}
window.applicationCache.onnoupdate = function (e) {
  console.log('noupdate! ')}window.applicationCache.onupdateready = function (e) {
  console.log('updateready! ')}Copy the code

Alternatively, enter chrome:// Appcache-internals in the browser address bar (this varies by browser).

You can choose to view the details or delete the cache

HTTP cache

Strong cache

Cache-control HTTP / 1.1) (

General field

  • No-cache: It can be cached locally, but must be verified to the server every time it is used, regardless of expiration
  • No-store: no cache at all, go to the server every time to get the latest value
  • Max-age: indicates the cache time of the client browser
  • No-transform: Forbids the agent from changing the returned content, for example, forbids the agent from compressing images

Request field

  • Stale: It doesn’t matter if the proxy cache expires, as long as it’s within the time limit
  • Min-fresh :(restricted) the proxy cache needs to be fresh. Take it in advance or you won’t get it
  • Only -if-cached: the client accepts the proxy server cache and does not fetch it from the source server. If the proxy expires, 504 (Gateway Timeout) is returned.

The response field

  • Public: all middle tiers can be cached (client, proxy)
  • Private: Only clients can cache
  • S-maxage: Proxy server cache time (max-age,expires is overridden)
  • Must-revalidate: The cache can be used directly before it expires. Once the cache expires, it must be verified with the server. The max-stale header is ignored
  • Proxy-revalidate: When an intermediate server receives a request from a client with this header, it verifies the cache validity with the source server before returning the data.
  • Vary: Vary is added when data is returned from the source server as a response header, and its value is the first field of the current request, such as Accept, user-agent, etc. The proxy server caches the vary header and its related contents along with it. It tells the downstream server how to properly match the cache.

About vary head

The content required by different clients may differ, for example, some support GZIP and some do not. For the same interface provided by the server, the client makes the same network request. Different types of clients may need different data, so the return mode and returned data of the server will be different, so it will be treated differently through the accept-encoding, user-agent and other information.

If Internet Explorer 6 and Chrome need to use different encoding methods for transmission, if the proxy server only judge the same interface and request, it is very likely that the two browsers get the same data, no doubt will lead to a series of problems, such as garbled characters. The same is true of the same PC and mobile applications. You may provide different content to mobile and PC, and the proxy server can prevent mobile from misusing the PC cache by identifying the Vary User-agent. This is where the Vary header comes in, differentiating the match cache by the request header information it contains.

Specific reference: MDN-vary, an understanding of the response header Vary for HTTP requests

Expires (HTTP / 1.0)

Limited by client time, last-Modified is required. If the client time is not synchronized with the server time, the cache may become invalid. This is a legacy of HTTP/1 and is currently used for compatibility purposes only.

Pragma: no-cache (HTTP/1.0)

They are also a legacy of HTTP/1 and are used only for HTTP/1 compatibility. Its behavior in HTTP responses is not exactly regulated. If cache-control does not exist, it behaves the same as cache-contorl: no-cache.

Negotiate the cache

The negotiated cache takes effect, and a 304 (Not Modified) response is returned. If the negotiated cache is invalid, 200 and the request result are returned.

Last-Modified/If-Modified-Since/If-Unmodified-Since

If the browser detects the last-Modified header in the response header and the strong cache is not hit, it adds the request header if-modified-since to the next resource request, and its value is the last-Modified value. If the server resource modification time and if-Modified-since are not equal, If the resource changes, the negotiated cache is invalid, and a new resource is returned. If-unmodified-since = if-unmodified-since

Disadvantages: Last-Modified can only be measured in seconds. If it is Modified more than once in a second, the server will not be aware of it and will not be able to correctly send the latest new resource to the client

E-Tag/If-Match/If-None-Match

When the server responds to the request, it hashes out a unique identifier for the file and carries it in the e-tag response header, which is regenerated whenever the resource changes. Similarly, If a strong cache is missed and an E-tag is detected, the browser appends an if-match/if-none-match header to the request, with the value corresponding to the E-tag, and returns 304 If the validation is successful.

Disadvantages: E-tag calculation consumes server performance. If resources change frequently, the server needs to perform frequent calculation.

E-tag and Last-Modified comparison

  1. E-TagHigher accuracy, but less performance thanLast-Modifiedlesser
  2. The existence of both is preferredE-Tag

strategy

  1. For resources that change frequently, a negotiated cache should be a priority. While not reducing HTTP requests, it can significantly reduce response volume. Even some data, such as stock market movements, are not cached and must always be updated.
  2. For nearly constant resources, strong caching is preferred. Set a very large onemax-ageAnd so on. For example, the website logo.

Source of cache

Service Worker

The Service Worker is based on HTTPS and can intercept the whole site request to determine whether the resource is cached or not. If the cache is hit, it is directly used; otherwise, fetch is used to obtain the latest resource. Unlike the browser’s built-in cache policy, the Service Worker can customize which resources need to be cached, how to match the cache, and how to read the cache. Its life cycle mainly uses:

  1. Install event: Grab resources for caching

  2. Activate event: traverses the cache to clear expired resources

  3. Fetch event: intercepts the request, queries the cache or network, and returns the requested resource

If you are interested, you can search on your own, or refer to mDN-service Worker

Memory Cache

Read speed is very fast, microsecond speed, but the capacity is small, and the timeliness is poor, generally close the current Tab Tab page will fail (released with the process).

Disk Cache

It has a larger capacity than Memory Cache and can be cached for longer time.