Browser caching policy

The browser's cache focused on HTTP "request" (the Request) and the "response" (the Response) in.

In the process of Request, the browser can be used directly by the result of the selection cache Cache, reducing the number of HTTP requests
Response in the process, there is the checksum determination mechanism between the server and the browser, the cache may be due to the presence of reduced transmission resources, speed up the response.

A storage location cache can be divided into the following categories:

Service Worker
memory cache
disk cache
network request

Order of the above four cache is arranged in order of priority, if one does not get a response and then continue down the judgment, which is logical.

See Baidu's little brother mushrooms students will speak the traditional browser cache header in the field and all this within a disk cache storage location, I feel very interesting. First sort out the categories, so when it comes to revisit the details of the principle.

Service Worker

Because Service Worker is to appear in a service-enabled pages, you need to find serviceWorker registration page, for example, used Google's PWA (progressive Web applications) page can be found. Service Worker example , there are micro-Bo Wei sister participation PWA

Service Worker is a registered independent threads under the specified source and event-driven path , using a page or site associated resources JavaScrip t control, access and resources to intercept and modify requests more finely cache resources.
Service Worker can intercept the request, so it is necessary to use the HTTPS protocol, Service Worker cache is permanent, open or close the browser there is, in addition to calling the API manual clearance and storage capacity exceeds the limit is removed, in general, can persist.

Need to register before using the Service Worker, after successful registration in the browser will try to install and activate ServiceWorker for the page, the installation process need to cache some static resources (using a global object cache storage resource response received).

Subsequent HTTP requests are intercepted Service Worker, if the requested resource is Service Worker control, will fetch trigger event , dealing fetch event, you can use caches.match (event.request) to request the network resources and cache in matching available resources to see if the cache has the appropriate resources, if the cache to match the resources used directly. If a match is not found in the cache resources, you can control the browser to fetch the direct resources toward default network requests. FIG using the following procedure:

Throughout the process, even if the final request for network resources, as long as through the Service Worker's fetch event, the network will include a request from ServiceWorker.

memory cache

memory cache is a memory cache, while trying to read a local cache memory are read, read hard, after all, faster memory access.

Almost all of the requested resources can be placed in memory cache, there are two related preloader and preload and memory cache mechanisms:

preloader browser when parsing and executing JavaScript and CSS resources, you can use a number of resources at the request preloader mechanism, and then placed in a memory cache for later use when parsing and execution of these resources.
preload can explicitly specify resource requirements preloaded, is placed in the memory cache for subsequent use

If a page has many of the same request, the memory cache mechanism ensures that only the most practical requested once can reduce the waste of resources HTTP request.

cache memory cache when matching resources to deal with URL contrast resources, it will also compare other features Content-Type, CORS domain name rules, only exactly the same resource requests will be matched.
cache memory cache resources, after the close tab will fail, just a short-term memory . If the in-memory cache of resources too, will fail prematurely.
When the resource acquisition memory cache, the browser will ignore the HTTP head configuration, e.g. max-age = 0, no- cache , etc., even if the representation does not mean the cache, read the resource request or the next start of the memory cache. Only use head-Store NO , Memory-Cache will not be stored resources, the need to obtain directly from the server.

disk cache

disk cache has become a HTTP cache, the cache is stored on the hard disk, are persistent. Stored in the file system of the device, and cross-site support across sessions and so on. disk cache will be strictly in accordance with the various types of HTTP header fields to determine whether the resource can be cached, if available, etc. If available, read directly from the hard disk resources, much faster than downloading from the server.
HTTP protocol about cache field has: Cache-Control, Expires, Last -Modified & If-Modified-Since and ETag & If-None-Match and so on.

Cache-Control

Cache-Control field indicates the maximum lifetime of the cache resources, and degree to allow caching, mainly contains the following common fields:

max-age: set the cache valid time of the maximum (max-age = 86400 indicates the cache 24 hours)
s-maxage: (the maximum settings shared cache valid time)
public: specify a response is cached, and share (s browser can read this cache) among multiple users
private: only respond as a private cache, can not be shared among users
no-cache: specify not to cache the response, before using a copy of the resource, be sure to check the validity of a copy of the source server
no-store: the absolute prohibition of cache, each request must be reacquired from the server resource
must-revalidate: expires before local resources, local resources can be used; the local cache upon expiration of the resource, to the source server must verify validity (max-age = 0, must-revalidate the equivalent no-cache)

And a priority over the use of a mixture shown below in several fields:

Expires

Expires represents cache expiration time, the expiration time used to specify the resource, typically Expires = max-age + the request time, and the need to use binding Last-modified

Cache-Control and Expires belong to strong buffer , i.e. the server does not send a request to read directly from the cache resources, the debugging can be seen that the Network option request returns a status code 200, and the display from disk cache or Size from memory cache.

Cache-Control priority over Expires, actual use Cache-Control and Expires field fields are used.

The strong corresponding to the cache is negotiated cache , the cache invalidation that is mandatory, the browser sends a request to carry identity cache server, the process of deciding whether to use cached by the cache server based on the identification. Including the Last-Modified and ETag.

Last-Modified

Last modified server-side resource files , you need to use common and Cache-Control can be used to check whether a server-side resource update. (When the browser request again, will be sent to the server If-Modified-Since header (previous Last-Modified), asked after the Last-Modified point in time whether the resource has been modified. If there are no changes, the code is returned to 304 (Not modified), use the cache; if modified, the resource request to the server again, and return code is the same as the first request 200, the server resources for new resources)

Last-Modified use to determine whether a file change some shortcomings:

Some servers can not get accurate resource was last modified, so you can not determine whether the resource update by last modified time
If the resource modified very frequently, Last-modified only accurate to seconds
Last modified some of the resources have changed, but the content did not change, leading to repeated requests resources

ETag

ETag hash string is generated according to a period of the substantial contents, the state of the resource identifier generated by the server, the server also stores an Etag field file. (When the browser request again, the same as if the hash server transmits the If-None-Match field (hash files last), asking resources to determine whether the files have been modified. If there are no changes to the code is returned 304 (Not modified), use the cache; if modified, the resource request to the server again, and return code is the same as the first request 200, the server resources for new resources)

ETag higher priority than the Last-Modified.

HTTP Cache workflow

HTTP Cache workflow shown below:

After determining whether there is a cache, if there is to be a strong buffer to determine if it can not be used directly negotiate the caching process, and ultimately access to resources.

Article Description

This article was originally recorded in my 2019.03.321's blog caching strategy browser , the recently collating information, that they turned out for everyone to learn the exchange, if any inaccuracies please criticism.