Front-end HTTP caching

Web Cache can be divided into: Database caching, server-side caching (proxy caching, CDN cache), browser cache. Where the front end is more concerned about the browser cache, including today say HTTP cache and said before cookie, localStorage and other storage. (Resource caching request only for get, post, put, delete and other operations behavior without caching).

HTTP cache and cache into strong negotiation cache. By header cache-control headers in HTTP and special expries, documentation has expired, the browser requests the same secondary resource, compare, there is no strong cache was expired. Expiration check whether the modification, but the cache expires represent only wanted to check in, but not necessarily with the differences in resources, client and server-side validation if the current request can use the cached resource through some authentication mechanism, which is the negotiation cache.

 

 from-cache:

  • 200: Cache Hit
  • 304: re-match unmodified (not modified)

Strong Cache

Cache-Control和Expires

Strong cache Cache-Control and Expires using two control fields. expires: a cache expiration time (ie resource expiration time), is the absolute value of. So if the client to change the time, it can lead to confusion cache. Therefore http1.1 increased cache-control, from a combination of a plurality of fields, wherein field max-age, which is a relative time.

  • Cache-Control HTTP1.1 is new in response header, Expires in response header is HTTP1.0
  • Expires specifies a specific expiration date instead of seconds, Cache-Control using relative time
  • Cache-Control and Expires while the use of words, Cache-Control overrides the Expires

Cache-Contro-related property

max-age (unit s)

Specifies the maximum set cache valid time, when the browser sends a request to the server, max-age in this period of time the browser will no longer send server requests.

public

Specified response may be cached in the proxy cache, then be shared by multiple users. If you do not explicitly specified private, the default is public.

private

The response can only be cached in private cache, it can not be placed on the proxy cache. Some users of sensitive information resources, usually set to private.

no-cache

He expressed the need to check with the server whether the resource is changed (relying If-None-Match and Etag), and then decide whether to use the local cache.

no-store

The absolute prohibition of any resource cache, which means that each time a user requests a resource, a request is sent to the server every time to download the full resources. Confidentiality is commonly used resources.

 Cache consultation

A browser or proxy cache cached resource has expired, it does not mean that resources on the original server and there is a practical difference, simply means to be a time of reconciliation. This condition is called server revalidation, which is negotiated cache:

  • If the resource changes, the need to obtain new resources, and replace the old resources in the cache.
  • If the resource has not changed, the cache only need to get a new response header, and a new expiration time, the expiration time of the resource cache can be updated.

HTTP1.1 authentication is recommended If-None-Match / Etag, use the If-Modified-Since / Last-Modified in the HTTP1.0.

If-None-Match/Etag

Etag means generates a text string from the hash substantial contents, the state of the resource identifier generated by the server, the first request response header will bring ETag: abcd, after the request to bring If-None-Match: abcd. This browser will string the string back to the server, verify that the resource has been modified to return 304 or 200.

If-Modified-Since与Last-Modified

Last-modified: server-side resource was last modified, the head will bring the response identifier. After the first request, browser history this time, when the request again, request headers take time before the If-Modified-Since that is recorded under. Server received will go and last modified time resources after comparison with If-Modified-Since requests. If the revised return date resource status code 200, if not changed is returned 304. HTTP1.0 the two are used to verify whether the requested resource expired / response header, these two heads are dates, the verification process is similar to the Etag, not described in detail here. When using these two head to verify the resource update, the following problems:

  • Some documentation resources periodically be rewritten, but the actual content has not changed. Is displayed metadata file last modified date If-Modified-Since not the same, leading to unnecessary response.
  • Some documentation resource is modified, but the content is not important, do not need all of the cache is updated (such as code comments)

If you have a Last-modified response header without Expire or Cache-Control, the browser will have its own algorithm to calculate how long a time to cache the file, different browsers draw time is not the same, so the Last-modified to remember with Expires / Cache-Control use.

last-modified and Etag difference

  • Some servers can not accurately get the last modification time resources, so you can not pass last modified time to determine whether the resource update.
  • Last-modified only accurate to the second.
  • Last modified some of the resources have changed, but the content did not change, use the Last-modified can not see the content has not changed.
  • Etag higher accuracy than the Last-modified, are strong authentication, resource required at the byte level consistent, high priority. If the server has provided ETag, it must first be ETag Conditional Request.

application

Why use the cache:

  • Redundant data transmission
  • Bandwidth bottlenecks
  • Flash crowds
  • Distance Delay

Cache Scene:

  • CSS files, js files, html files
  • Icons, pictures
  • Accessories for download

Cache Time:

  • Files do not change often, max-age setting of a larger, generally set max-age = 31536000 (standard predetermined maximum value max-age is less than a year, it is set to max-age = 31536000)
  • Files often need to change, Cache-Control: no-cache / max-age = 0

 

Guess you like

Origin www.cnblogs.com/yuyujuan/p/11572486.html