Introduction
Referred to on page optimization, browser cache, but must be a topic around, judge the performance of a website is to see the most intuitive web page open speed, and a way to improve the response speed of the web is to use the cache. A good caching strategy can shorten the distance page request resources, reduce latency, and since the cache file can be recycled can also reduce bandwidth and reduce network load. Therefore, understanding the browser's caching mechanism, it is particularly important.
Here we briefly under the browser's cache
The browser HTTPrequests a response mode, HTTPinitiated the request, the server responds to the request, then the browser how to determine whether a resource cache when requests a resource, should go to your browser's cache to take or send a request to obtain the resources it
Cache Key:
- The results each time the browser initiates a request, the request will first look in the browser cache and cache identifier
- Each time the browser requests to get the results are returned and the result is stored in the browser cache identifier cache
We are divided into mandatory consultation cache and cache based on whether or not to initiate a browser request
Forced Cache
Does not send a request to the server, the resource is read directly from the cache, the chromeconsole networkoptions can see that the request returns a status code 200, and the sizedisplay from disk cacheorfrom memory cache
Gray status code represents a request to use a hard cache, the request corresponds to Sizea value representative of the position of the buffer storage, respectively, from memory cacheandfrom disk cache
from memory cacheRepresentatives to use in-memory cache, from disk cacherepresents the use of a hard disk cache, the cache of the browser reads the order is memory – disk. In the browser, the browser will direct deposit after js file parsing and execution pictures cache memory, simply read directly from the memory cache when you refresh the page (from memory cache); while the cssfile will be stored in the hard disk file, so every time rendering pages need to be read from the hard disk cache (from disk cache).
HTTP1.0 cache
In the HTTP1.0era of the cache is set to the client by way of two fields - Pragmaand Expiresto regulate. Although these two fields as early as disposable, but in order to do http protocol is backward compatible, you can still see a lot of sites will still bring these two fields.
pragma
When the field is no-cachetime (in fact only now RFC also marked the optional values), will inform the client not to read the cache resources that each had made a request to the server for the job.
expires
Had Pragmato disable the cache, naturally need to have something to enable caching and define the buffer time for HTTP1.0, it Expiresis to do this header field. ExpiresIt corresponds to a value of GMT（格林尼治时间）, for example, Mon, 22 Jul 2002 11:12:01 GMTto tell the browser cache expiration time of the resource, if you have not had that point in time will not send the request.
Set time expires is the time server, set the resource "failure" of the moment, if the time period is inconsistent client and server time, and that the cache does not make sense
HTTP1.1 new cache-control
For "above Expirestime is relative server, and the client can not guarantee the unity of time" issue, http1.1 added Cache-Controlto define the cache expiration time. Note: If the message also appeared Expiresand Cache-Control, places Cache-Controlprevail, using the format:
"cache-control":cache-directive
As a response to the first portion, cache-directivethe possible values are:
public: All content will be cached (client and proxy server can cache). Specifically, the response can be any intermediate node cache, such as Browser - proxy1 - proxy2 - Server, the middle of the proxy can cache resources, such as requests for the same resource again next proxy1 directly to their cache again without something to Browser proxy2 to.private: All content only the client can cache, the default value of Cache-Control. Specifically, it represents an intermediate node does not allow caching for Browser - proxy1 - proxy2 - Server, proxy will honestly Server sends the data returned to the proxy1, it does not cache any data. Browser request again when the next proxy will forward the request to do while he is not given a free hand to cached data.no-cache: Client-side caching content, whether to use the cache buffer is required to validate the decision after consultations. It indicates no cache control to do pre-Cache-Control verification, but the use of Etag or Last-Modified field to control buffer. Note that, no-cache the name a little misleading. After setting up no-cache, it does not mean that the browser will not cache data, while using just the browser cache data, you need to confirm whether the server was kind enough data consistency.no-store: All content will not be cached, that is, without the use of forced cache, the cache is not using the negotiatedmax-age: Max-age = xxx (xxx is numeric) represent cached content will expire in xxx secs-maxage(单位为s): With max-age, only for shared caches (such as cache CDN). For example, when s-maxage = 60 time, 60 seconds in this, even if updated CDN content, the browser does not request. maxage for normal cache, s-maxage for proxy cache. s-maxage higher priority than maxage. If there are s-maxage, and will overwrite maxage Expires header.
Highest to lowest priority are Pragma -> Cache-Control -> Expires
Cache-Control using a time interval, Expires time using the failure
Cache consultation
Cache strong basis to determine whether the cache from exceeding a certain time or whether a certain period of time, without regard to whether or not the server-side file has been updated, which may lead to the latest content files are not loaded on the server side, then we know how server-side content has it occurred to update? At this point we need to use caching policy consultation
After the consultation is to force a cache miss the cache, the browser sends a request to carry identity cache server, the process of deciding whether to use cached by the server according to the cache identifier
Cache check field
Last-Modified
When the server resources passed to the client, the last time the resource will change in Last-Modified: GMT”the form of increase in the return on the header to the client, entity, represents the resource of last modification time
When times requested again, will the information included with the request packet together to bring the server to do the inspection, the time value passed to the server if the resource final modification time is the same, it indicates that the resource has not been modified, direct return 304status code, the content is empty , thus saving the amount of data transferred. If the two time inconsistency, the server sends back the resource and returns 200a status code, and for the first time when a similar request. This ensures that the client not to issue duplicate resources, but also to ensure that when the server changes, the client can get the latest resources. A 304response is usually much smaller than a static resource, thus saving network bandwidth
Transfer Last-Modifiedrequest packet header field a total of two:
- If-Modified-Since: Last-Modified-value
示例为 If-Modified-Since: Thu, 31 Mar 2016 07:07:52 GMT
该请求首部告诉服务器如果客户端传来的最后修改时间与服务器上的一致，则直接回送304 和响应报头即可。
当前各浏览器均是使用的该请求首部来向服务器传递保存的 Last-Modified 值。- If-Unmodified-Since: Last-Modified-value
该值告诉服务器，若Last-Modified没有匹配上（资源在服务端的最后更新时间改变了），则应当返回412`(Precondition Failed) 状态码给客户端。 Last-Modified 存在一定问题，如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）ETag
In order to address Last-Modifiedinaccurate (file modification time changed, but the contents of the file has not changed) problem, HTTP1.1also increased the ETagentity header field, the server via an algorithm to calculate the resources to arrive at a unique identifier (such as md5 mark), in the resource response time to the client, the entity would add a header “ETag: 唯一标识符”back to the client together.
The client will retain the ETagfield, and when the next one and the next request to the server with the past. Server need only compare the client came ETagwith the resources on their own server ETagare the same, can be a good resource to determine whether the terms of the relative client have been modified. If the server finds ETagmatch is not on, then directly to conventional GET 200return package in the form of new resources (including of course the new ETag) to the client; If you ETagare consistent, then returned directly 304inform the client that is directly using the local cache can
Transmitting ETagthe request packets there are two:
- If-None-Match: ETag-value
示例为 If-None-Match: "5d8c72a5edda8d6a:3239" 告诉服务端如果 ETag 没匹配上需要重发资源数据，否则直接回送304 和响应报头即可。 当前各浏览器均是使用的该请求首部来向服务器传递保存的 ETag 值- If-None-Match:ETag-value
告诉服务器如果没有匹配到ETag，或者收到了“*”值而当前并没有该资源实体，则应当返回412(Precondition Failed) 状态码给客户端。否则服务器直接忽略该字段to sum up
Forced to negotiate cache cache priority, if forced cache (Expires and Cache-Control) entry into force of the direct use of the cache, if the cache entry into force of the consultations (Last-Modified / If-Modified-Since and Etag / If-None-Match) consultation cache server to decide whether to use the cache, the cache if the negotiation fails, the failure of the request on behalf of cache, a 200, and return to the resource cache identifier, and then stored in the browser cache; 304 is returned into effect, continue to use the cache.
Users refresh / access behavior
- In the URI input field and then enter a carriage return / access via the bookmark, which speak trigger cache mechanism
- F5 / Refresh button in the toolbar, click / right-click menu to reload the browser will set the max-age = 0, skip strong cache judge will consult the cache to determine
- Ctl + F5, skip the cache and strong negotiation cache, pulling resources directly from the server