This article we're talking about the slow-down strategy of static resources, and if you're going to do page optimization, you have to understand this knowledge point。
First of all, the concept of static resources, which could be understood as unchanged. Documents such as js, csss, img are static documents on the page, because all users will get the same content when you go online, and it will not change, because such files can be cached and load faster。
Like a normal HTML file, you need templates because the data are different, the content is different, the most typical is the headline page, the thousands of people, each page is different, and it's difficult for you to make the whole cache, so it's not a static resource。
Figure 1
In retrospect, when you develop a project to go online, you usually go ahead with static resources and then the template, which is different from the way you go online. Static resources tend to be pushed onto cdn servers, while templates are on back-end service machines, the former are designed to use cdn's cache strategy to provide users with better page loading experience。
Strong cache
1. For the first time, the browser requested a resource from the server, which, while returning to the resource, added excels to the response head, such as:
Figure 2
2. After receiving the resource, the browser will cache it with all the response headers
3. When the browser then requests this resource, it will first be found in the cache, and when the resource is found, it will be compared with the current request time. If the request is made before the time specified by express, the cache will be missed or not
If the cache is not hit, the browser sends the request to the server, and express header is updated when reloading。
Expires is an older, strong cache managementhead, which, because it is an absolute time for the server to return, is prone to problems when the server's time is significantly different from the client's time, such as changing the client's time at random to influence the outcome of the cache. So, at http1. 1, a new header, cache-control, is proposed, which is a relative time, in seconds, when the cache is configured, and is expressed in values such as cache-control: max-age = 315360,000, which is based on the following principles:
1. For the first time, the browser requested a resource from the server, which, while returning to the resource, added the header of cache-controll, such as:
Figure 3
2. After receiving the resource, the browser will cache it with all the response headers
3. When the browser asks for this resource again, it finds the resource from the cache, calculates the time at which the resource expires, based on its first request time and the validity period set by cache-control, then compares the time at which the request is made with the current request time, if the time at which the request is made is before the deadline, or not。
4. Cache-co when browser loads resources directly from server if cache is not hitNcontrol header is updated when reloading。
Cache-control describes a relative time, when the time of the cache is used to judge, so cache-control's cache management is more efficient and safer than expires. The two headers can be enabled either by one or at the same time, and cache-controll has priority above expires when both expires and cache-control exist。
Consultation cache
If you do not have a strong cache, the request comes to the server, which checks if the http request header contains a cache authentication information, and if you negotiate a cache, the request is returned in a state of 304 at http and shows a not modified string. The consultation caches are managed by two headers: [last-modified, if-modified-since] and [etag, if-none-match]
1. For the first time, the browser requested a resource from the server, which, while returning to the resource, added to the response header of last-modified header, indicated the final timing of the modification of the resource on the server
Figure 4
2. When the browser requests this resource again with the server, add to the request a header of if-modified-since, the value of which is the value of last-modified returned at the time of the previous request
Figure 5
3. When a request for resources is received again by the server, a determination is made as to whether the resources have changed in comparison with the final time of modification on the server from the browser of if-modified-since and the resources, and if no change has occurred, returns 304 not modified, but does not return the resource content. If so, the resource content is returned normally. When the server returns the response of 304 not modified, respoNo more last-modifiedheads will be added to the nse header because, since resources have not changed, last-modified will not。
4 when the browser receives 304 responses, it loads the resources from the cache。
5. If the consultation cache is not hit, the last-modified header will be updated when reloading and the last-modified value returned by if-modified-since will be enabled at the next request。
[last-modified, if-modified-since] are headers who return according to server time. Generally speaking, the two headers work together to manage the consultation cache without adjusting the server time and tampering with the client cache, but sometimes the resources on the server change, but the timing of the final modification does not change, and the problem is very difficult to locate, and when this happens, the reliability of the consultation cache is affected. So there's another pair of headers to manage the consultation cache, which is the way they're managed:
1 the browser requested a resource for the first time from the server, which, while returning to this resource, added etag's header to the response head, which is the only identifier generated by the server on the basis of the resources currently requested, which is a string, which is different from the string and has nothing to do with the time of the final modification, so that the question of last-modified is well supplemented
Figure 6
2. When the browser requests this resource again with the server, add the value of if-none-match to the head of the request, the value of which is the value of etag returned at the time of the previous request:
Figure 7
3. When a request for resources is received again by the server, a new etag is generated on the basis of the if-none-match sent by the browser and a new etag based on the resources, which, if the two values are the same, would indicate that there has been no change in the resources; if there is no change, the resource content will be returned to 304 not modified but will not be returned; if there is a change, the resource content will be returned normally. Unlike last-modified, when the server returns the response of 304 not modified, the response head returns the etag, even if it remains unchanged, as etag was regenerated。
4 when the browser receives 304 responses, it loads the resources from the cache。
[last-modified, if-modified-since] and [etag, if-none-match] are generally available simultaneously to address the unreliable situation of last-modified. There's a scene that needs attention:
Summary
