Detailed explanation of browser caching mechanism

Hello everyone , I meet you again , I'm the king of the whole stack

Browser cache

The knowledge of browser caching is a must for front-end engineers , Because this knowledge directly affects the user experience of your page , Affect the loading strategy of your page . Next, we will talk about the overview of browser caching in detail Principle of mindfulness and harmony , New people should read carefully , Even ruminate many times , The knowledge of caching is related to browsers , Also involves HTTP agreement , So this is also the content that is difficult to master .

Usually in hardware , Cache is divided into one level cache in hardware , Second level cache . But the cache in software is different .

In a narrow sense, cache is called cache , Strictly speaking, it means temporarily storing data in a certain place . First make a statement , My definition may not be strict , But that's my understanding , Easy to understand .

As for where to save, there are many ways , Can be put into file , In the memory （ Such as session）, also cache（ Cache ）, also cookie,session,viewstate, These are the things we use a lot , But you can think of them as caching data . Actually cache Follow session Have similar functions , but cache The expiration time can be set in the code , Dependencies . So called dependencies （ for example ： Microsoft's class cachedependcy sqlCacheDependency） When the dependency changes , System will inform cache Be overdue , Invalid . The above is just about caching , The cache has server cache , Client cache .

In recent days, I studied the client cache （ Browser cache ）, I want to share with you , What are the different opinions to comment on .

It is estimated that most people rarely talk about client caching , Including me . That's because we basically don't consider client caching when programming , There is also little written in the book . In fact, the browser automatically manages the cache , But knowing it at least knows that there is such a thing , If you need programming, you need to control the client cache .

Browser caching is when you open a web page , The browser will automatically download a copy to your computer , It's equivalent to saving as a web page to a certain place , It's just automatic . Of course, it's not that browsers can put all kinds of Web pages can be downloaded to the local computer , It has special circumstances . commonly html, the latter request yes get request , and post Generally no cache .（ I'll talk about it later ）

Of course, whether the client cache is needed can be controlled on the server code . That's the response head .

The response header tells the buffer not to keep the cache , The buffer will not cache the corresponding content ;

If the requested information needs authentication or security encryption , The corresponding content will not be cached ;

Calibration parameters are very important , If you are responding 1 None of the parameters exist , And there is no information about the preservation period （Expires or Cache-Control） Under the circumstances , The cache will not store any copies ; The most common verification parameter is the last modification time of the document , Pass the final Last-Modified Header information can , When a cache contains Last-Modified Information , Based on this information , By adding a If-Modified-Since Request parameters , Query the server ： Has this copy been modified since last view . HTTP 1.1 Another calibration parameter is introduced ： ETag, The server is the unique identifier generated by the server ETag, The label of each copy will change . Because the server controls ETag How to generate , The cache server can use If-None-Match If the return of the request is unchanged, the current copy is exactly the same as the original . All cache servers use Last-Modified Time to determine if the copy is new , and ETag Calibration is becoming more and more popular .

If the response header is POST Mode submission data , Then most of the returned pages will not be cached by the browser , If you send content through URL And query （ adopt GET Pattern ）, Then the returned content can be cached for future use .

HTTP In the protocol, the information header keywords about cache include Cache-Control(HTTP1.1),Pragma(HTTP1.0),last-Modified,Expires etc. .

Cache control head Cache-Control

Cache-Control Is the most important rule . This field is used to specify all caching mechanisms throughout the request / Instructions that must be obeyed in the response chain . These instructions specify the behavior used to prevent the cache from adversely interfering with requests or responses . These instructions Usually override the default caching algorithm . Caching instructions are one-way , That is, the existence of an instruction in the request does not mean that the same instruction will exist in the response .

cache-control Is defined as ：Cache-Control = “Cache-Control” “:” cache-directive. surface 1 Shows the applicable values .

surface 1. Commonly used cache-directive value

Cache-directive	explain
public	Everything will be cached
private	Content is cached only in the private cache
no-cache	Nothing is cached
no-store	All content will not be cached to the cache or Internet Temporary file
must-revalidation/proxy-revalidation	If the contents of the cache are invalidated , The request must be sent to the server / Proxy for revalidation
max-age=xxx (xxx is numeric)	The contents of the cache will be in xxx Seconds after the failure , This option is for HTTP 1.1 You can use , And if and Last-Modified When used together , High priority

surface 2 Show that in different situations , Whether the browser will resend the request to the server or use the cached content .

surface 2. Yes cache-directive Value browser response

Cache-directive	Open a new browser window	Click... In the original window Enter Button	Refresh	single click Back Button
public	The browser renders pages from the cache	The browser renders pages from the cache	The browser resends the request to the server	The browser renders pages from the cache
private	The browser resends the request to the server	for the first time , The browser resends the request to the server ; thereafter , The browser renders pages from the cache	The browser resends the request to the server	The browser renders pages from the cache
no-cache/no-store	The browser resends the request to the server	The browser resends the request to the server	The browser resends the request to the server	The browser resends the request to the server
must-revalidation/proxy-revalidation	The browser resends the request to the server	for the first time , The browser resends the request to the server ; thereafter , The browser renders pages from the cache	The browser resends the request to the server	The browser renders pages from the cache
max-age=xxx (xxx is numeric)	stay xxx Seconds later , The browser resends the request to the server	stay xxx Seconds later , The browser resends the request to the server	The browser resends the request to the server	stay xxx Seconds later , The browser resends the request to the server

Cache-Control Is the most important setting for browser caching , Because it overrides other settings , such as Expires and Last-Modified. in addition , Because the behavior of browsers is basically the same , This attribute is the most effective way to deal with the problem of cross browser caching .

Expired header (Expires)

Expires The header field provides a date and time , The response is considered invalid after this date and time . Expired cache entries are usually not cached （ Whether proxy cache or user proxy cache ） return , Unless first through the original The server （ Or a mediation cache with the latest copy of the entity ） verification .（ Be careful ：cache-control max-age and s-maxage Will cover Expires Head .）

Expires Fields receive values in the following format ：“Expires: Sun, 08 Nov 2009 03:37:26 GMT”. If the date when viewing the content is before the given date , It is considered that the content has not expired and is extracted from the cache . conversely , It is considered invalid , Caching will take some measures . surface 3-6 Indicates the behavior of different browsers for different user operations .

surface 3. Invalid operation when the user opens a new browser window

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content is not invalid	The browser renders pages from the cache	The browser resends the request to the server . The return code is 200	The browser renders pages from the cache	The browser renders pages from the cache
Content failure	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

surface 4. When the user clicks... In the original browser window Enter Button failure

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content is not invalid	The browser renders pages from the cache	The browser renders pages from the cache	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304
Content failure	The browser resends the request to the server . The return code is 200	The browser renders pages from the cache	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

surface 5. When the user presses F5 Key refresh page invalid operation

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content is not invalid	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304
Content failure	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

surface 6. When the user clicks Back or Forward Button failure

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content is not invalid	The browser renders pages from the cache	The browser renders pages from the cache	The browser renders pages from the cache	The browser renders pages from the cache
Content failure	The browser renders pages from the cache	The browser renders pages from the cache	The browser renders pages from the cache	The browser resends the request to the server . The return code is 200

Be careful ： All browsers are assumed to run with default settings .

Whether the control document has been modified Last-Modified/E-Tag

Last-Modified Entity header field values are often used as a cache validator . Simply speaking , If the entity value is Last-Modified The value has not been changed since , The cache entry is considered valid .ETag The response header field value is an entity tag , It provides a “ Opaque ” Cache validator . This may provide more reliable verification in the following situations ： It is inconvenient to store the modified date ;HTTP Of date value one-second The solution is not enough ; Or the original server wants to avoid some conflicts caused by using the modified date .

Different browsers have different configuration behaviors . surface 7-10 Indicates the behavior of different browsers for different user operations .

surface 7. When the user opens a new browser window Last-Modified E-Tag operation

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content has not been modified since the last visit	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304
The content has been modified since the last visit	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

surface 8. When the user clicks... In the original browser window Enter When you press the button Last-Modified E-Tag operation

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content has not been modified since the last visit	The browser renders pages from the cache	The browser renders pages from the cache	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304
The content has been modified since the last visit	The browser resends the request to the server . The return code is 200	The browser renders pages from the cache	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

surface 9. When the user presses F5 Key to refresh the page Last-Modified E-Tag operation

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content has not been modified since the last visit	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304	The browser resends the request to the server . The return code is 304
The content has been modified since the last visit	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

surface 10. There is no cache setting and the user clicks Back or Forward Button

	Firefox 3.5	IE 8	Chrome 3	Safari 4
The content has not been modified since the last visit	The browser renders pages from the cache	The browser renders pages from the cache	The browser renders pages from the cache	The browser renders pages from the cache
The content has been modified since the last visit	The browser renders pages from the cache	The browser renders pages from the cache	The browser renders pages from the cache	The browser resends the request to the server . The return code is 200

Be careful ： All browsers are assumed to run with default settings .

Do not make any cache related settings

If you do not define any cache related settings , Different browsers have different behaviors . Sometimes , The behavior of the same browser is different every time it runs in the same situation . The situation can be complicated . in addition , If some content that should not be cached is cached , It will lead to safety problems . Different browsers have different behaviors . surface 11 Shows different browser behaviors .

surface 11. There is no cache setting and the user opens a new browser window

	Firefox 3.5	IE 8	Chrome 3	Safari 4
Open a new page	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200
Click in the original window Enter Button	The browser resends the request to the server . The return code is 200	The browser renders pages from the cache .	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200
Press F5 Key refresh	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200
single click Back or Forward Button	The browser renders pages from the cache .	The browser renders pages from the cache .	The browser resends the request to the server . The return code is 200	The browser resends the request to the server . The return code is 200

Be careful ： All browsers are assumed to run with default settings .

Key conclusions

Last , Summarize the key conclusions

operation	Behavior
Open a new window	If specified cache- control The value of is private、no-cache、must-revalidate, Then when you open a new window to access, you will visit the server again . And if you specify max-age value , Then the server will not be accessed again within this value , for example ：Cache-control: max-age=5 After visiting this page 5 Second access will not go to the server .
Enter in the address bar	If the value is private or must-revalidate, Only the first access will access the server , No more visits in the future . If the value is no-cache, So every time I visit . If the value is max-age, It will not be accessed again until it expires .
Press the back button	If the value is private、must-revalidate、max-age, It won't revisit , And if for no-cache, Then repeat every time .
Press the refresh button	Whether for

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/120497.html Link to the original text ：https://javaforall.cn