Reprint :http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ

Introduction

Http Caching mechanism as web Important means of performance optimization , To engage in Web It is a necessary knowledge for development partners , But recently I came across several problems related to cache header settings , I found several questions wrong , Some even don't understand the reason after knowing the correct answer , It's quite depressing !! In order to make sure if I just don't understand deeply , I specially consulted several other friends , I found that the situation was more or less similar to mine .

In order not to show you the details , I'll post 2 Problem , You can try to answer :

The following is a page.html Content :

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>page page </title></head><body>
   <img src="data:images/head.png" />
   <a href="page.html"> revisit page page </a></body></html>

Visit the page for the first time , On the page head.png The response header information is as follows :

HTTP/1.1 200 OK
Cache-Control: no-cache
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Accept-Ranges: bytes
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534
  • problem 1: When you click “ revisit page page ” After the link reloads the page , head.png How to reload ?

  • problem 2: If the Cache-Control Set to private, So what happens ?

above 2 Problem , If you get it all right ( ha-ha , Please make sure that why, Just in case you're going straight ), So congratulations , You have a thorough understanding of this knowledge , You can ignore what I'll talk about later , Otherwise, please continue to nag with me !

The first Let's go back to the beginning and talk about a lot of little friends ( Including me ) In the answer Http The problem of failing to cache the title , I think the fundamental reason for this phenomenon is that the knowledge we absorb is not systematic enough , Usually, when we learn these knowledge, we usually take them as knowledge points , What? This cache What does the head do 、 What's the cache head for , But in practice, the cache header often works cooperatively , There is a complete working system .

Today, I will follow my own understanding , From the point of view of systematization Http How cache heads work together ( Please correct the mistakes , But please don't spray me ):

HTTP Caching system

First of all, I will Http The cache system is divided into the following three parts :

1. Cache storage strategy

Used to determine Http Whether the response content can be cached by the client , And which clients can cache it

There is only one function of this strategy , Used to decide Http Whether the response content can be cached to the client

Yes On Cache-Control In the head Public、Private、no-cache、max-age 、no-store They are all used to indicate whether the response content can be stored by the client , The top 4 Every city will cache file data ( About no-cache It should be understood as “ Local caching is not recommended ”, It still caches data locally ), the latter no-store No response data is cached on the client . Also about no-cache and max-age A little special , I think it's a mixture , I'll talk about .

through too Cache-Control:Public We can set up Http The response data is stored locally , But this does not mean that subsequent browsers will directly read data from the cache and use , Why? ? Because it can't determine if the locally cached data is available ( It may have failed ), I have to borrow it Help a set of identification mechanism to confirm , That's what we're going to talk about next “ Cache expiration policy ”.

2. Cache expiration policy

The client is used to confirm whether the cache data stored locally has expired , And then decide whether to send a request to the server to get data

There is only one function of this strategy , That is to decide whether the client can load data directly from the local cache and display it ( Otherwise, send a request to the server to get )

Just. As we have explained above, data caching needs to be judged before it can be used , So what conditions do browsers use to judge ? The answer is :Expires,Expires Named the absolute time that the cached data is valid , Tell the client that it's time ( Compared to the client point in time ) After that, the local cache becomes invalid , At this point in time, the client can consider the cached data valid , Directly from Load the presentation in the cache .

however Http The design of cache header is not as formal as expected , As mentioned above Cache-Control( This head is in Http1.1 What's in it ) In the head no-cache and max-age It's a special case , They include both cache storage policy and cache expiration policy , With max-age For example , He's actually equivalent to :

Cache-Control:public/private( I'm not sure which one )
Expires: Current client time + maxAge .

and Cache-Control:no-cache and Cache-Control:max-age=0 ( The unit is seconds ) Quite a

What needs to be noted here is :

  1. Cache-Control The cache expiration policy specified in takes precedence over Expires, When they exist at the same time , The latter will be covered .

  2. Marking the cache data as expired just tells the client that it can no longer read the cache directly from the local , You need to send another request to the server to confirm , It's not the same as caching data locally, and it's no longer useful , In some cases, even if it has expired, it will still be used again , Specifically, I will talk about .

3. Cache comparison strategy

Send the data ID cached in the client to the server , The server judges the client by its identity Whether the cached data is still valid , And then decide whether to resend the data .

customer After the client detects that the data is out of date or the browser is refreshed , There's always a new one http Request to server , The server is not in a hurry to return the data at this time , It depends on whether the request header is marked ( If-Modified-Since、If-None-Match) To come over , If the identification is still valid , Then return to 304 Tell the client to use the local cache data ( Here Note that you have to output the corresponding header in the first response (Last-Modified、ETags) To client ). So far, we understand that even if the local cache data is recognized Is overdue , It doesn't mean that the data is no longer useful .

About Last-Modified, Pay attention to the use of this response header , May affect cache expiration policy , The specific reason , Later, I'll answer the questions mentioned at the beginning 2 Let's talk about it .

That's what I know about caching strategies , Next, I will describe the three elements of cache strategy and several common cache headers ( term ) Combine together , Let us have a clearer understanding of the relationship between them :

From the figure above, I can clearly see which cache policy category each cache item belongs to , There's some overlap , It shows that these cache items have multiple cache policies , So when actually analyzing the cache header , In addition to the regular head , We also need to decompose these items with dual caching policy .

Finally, let's go back to the beginning 2 questions , Let's break it down together :

The first question :

HTTP/1.1 200 OK
Cache-Control: no-cache
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Accept-Ranges: bytes
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534

Analysis of the above Http Response hair has two things to do with caching :

Cache-Control: no-cache
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT

We talked about Cache-Control: no-cache amount to Cache-Control: max-age=0, And they are all multi strategists , We need to break it down :

Cache-Control: no-cache be equal to Cache-Control: max-age=0,
next Cache-Control: max-age=0 It can be decomposed into :

Cache-Control: public/private ( Not sure which of the two )
Expires: current time

Finally, we get the following three elements of a complete caching strategy :

So the end result is : The browser will request the server again , And carry it with you Last-Modified Go to the server at the specified time :

  • a) Comparison failed : Server return 200 And resend the data , After the client receives the data, it displays , And refresh the local cache .

  • b) Compare success : Server return 304 And do not resend data , Client received 304 Read cache data from local after status code . The following is the simulation of packet capture after request in this case :

The problem itself is not difficult , But if you think no-cache Will not cache data locally , So it's very contradictory for you to understand , Because if the file data is not cached locally , Server return 304 You will not be able to show the content of the picture after the test , But in fact it can be displayed normally . This is a good proof of no-cache It also caches data locally .

The second question :

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Accept-Ranges: bytes
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534

The solution is the same as above , First, find the cache related items :

Cache-Control: private    
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT

At this point, we will find that we can't find the cache expiration policy item at all , Will the answer be the same as above ? I can't analyze the answer for a while , That can only be tested in practice :

I want to see others Chrome Grab a bag under the browser :

You can see , All subsequent browser requests directly access the local cache , It seems that there is some kind of cache expiration policy ( According to my cache expiration policy theory above , If the browser loads the cache data directly from the local , Explain it Believe that the local cache data is effective , There must be some kind of cache expiration condition ). There is no solution to this problem , It's been bothering me for a long time , Until a chance I was in Fiddler Respond to... In the information panel Caching The answer is found in the tab :

original , In the absence of any browser cache expiration policy , Browsers follow a heuristic cache expiration policy :

According to the response header 2 Time fields Date and Last-Modified Time difference between , Take the value of 10% As a cache time period .

Stick the Caching The description in the panel , Good English students can translate accurately :

HTTP/1.1 Cache-Control Header is present: private
HTTP Last-Modified Header is present: Tue, 08 Nov 2016 06:59:00 GMT
No explicit HTTP Cache Lifetime information was provided.
Heuristic expiration policies suggest defaulting to: 10% of the delta between Last-Modified and Date.
That's '05:15:02' so this response will heuristically expire 2016/11/11 0:46:01.

Finally, we get the following three elements of a complete caching strategy :

final result

Liu The browser will be based on Date and Last-Modified The time difference between caching for a period of time , During this period, the local cache data will be directly used instead of requesting the server ( Except for mandatory requests ), After the cache expires , The server will be requested again , And carry it with you Last-Modified Go to the server at the specified time to compare and decide whether to load the cache data locally according to the response state of the server .

summary

Http Cache settings are not complicated , But it's easy to be despised , Today's article combines 2 questions , Through analysis 、 Anatomically relevant cache heads , From a systematic point of view Http This paper makes a complete analysis of caching mechanism :Http The caching mechanism is actually Http There are three elements of caching strategy ( latitude ) The set of interactions , So in analyzing and setting Http Message cache header , As long as we can accurately decompose the three elements of cache , We can very accurately predict the final effect of cache settings .

Http agreement : Understand thoroughly Http Caching mechanisms - More related articles based on cache strategy three factor decomposition method

  1. 【 tencent Bugly Dry cargo sharing 】 Understand thoroughly Http Caching mechanisms - Based on the three factor decomposition of cache strategy

    This article is from Tencent Bugly official account (weixinBugly), Without the consent of the author , Do not reprint , Original address :https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ author : Li ...

  2. Understand thoroughly JavaScript Execution mechanism

    The purpose of this article is to make sure that you understand javascript Implementation mechanism of , If you don't understand after reading this article , You can beat me . Whether you are javascript Novice or old , Whether it's an interview for a job , Or daily development work , We often encounter such situations : Given ...

  3. This time, , Understand thoroughly JavaScript Execution mechanism

    In this paper, from https://juejin.im/post/59e85eebf265da430d571f89#heading-4 The purpose of this article is to make sure that you understand javascript Implementation mechanism of , If you finish reading this article ...

  4. HTTP Caching mechanisms -- Client cache ( turn )

    Client cache Client side cache generally refers to browser cache , The purpose is to speed up the access of various static resources , Think about the big websites now , Every page has one or two hundred requests , Every day pv It's 100 million , If there is no cache , The user experience will decline dramatically . At the same time, server pressure ...

  5. hibernate Caching mechanisms ( Second level cache )

    One .why( Why use Hibernate cache ?) Hibernate It's a persistence layer framework , Frequent access to physical databases . To reduce the frequency of applications accessing physical data sources , So as to improve the running performance of the application . The data in the cache is a pair of physical numbers ...

  6. MyBatis Caching mechanisms - Second level cache

    MyBatis The second level cache is based on namespace Level cache . 1.MyBatis The overall design of cache mechanism and the working mode of L2 cache As shown in the figure above , When opening a conversation , One SqlSession Object will use a Executo ...

  7. Excerpts and redrafts : Understand thoroughly JS Execution mechanism

    Net text : https://juejin.im/post/59e85eebf265da430d571f89 Concurrency model and event loop :https://developer.mozilla.org/zh-CN/do ...

  8. memcached Caching mechanisms + Microsoft cache mechanism use details

    1. why Memcached 1.1   a web Server ,iis The number of requests received is limited , When there's a lot of traffic , Website access will encounter bottlenecks , The processing method is to use more servers to split the number of requests ( colony ), What's published is just one ...

  9. The illustration HTTP Cache mechanism | practical HTTP

    Title Map :by @joewakeford One . order Hi, Hello everyone , I'm Chengxiang Moying ! HTTP Protocol plays an important role in network knowledge ,HTTP The most basic part of the protocol is the request and response header (Header), majority Http ...

Random recommendation

  1. swift And inout

    stay swift in , We often do some processing on the data . because swift Calculated attributes of , So if it's not a lot of repetitive processing , It can be found in set And didSet Change some states of the original data in . But when you need to use the same algorithm to deal with a lot of data , Still need ...

  2. Radmin Center 1.54 The beta

    Software introduction :radmin center  Used to centrally manage the installation of radmin server Server for , Support one click remote management , All data is stored locally , Key data usage RC4 Morphing encryption . At the same time radmin High security and easy to use ...

  3. Oracle Date in

    --1. Usage of date character conversion function /****************************TO_CHAR********************************/ -------------- ...

  4. npm install --save And npm install --save-dev The difference between

    With npm install msbuild For example : npm install msbuild: Will be able to msbuild Package installed in node_modules Directory Not modify package.json And then run npm install life ...

  5. Use QJM Deploy HDFS HA colony

    One . Software required 1. JDK edition Download address :http://www.oracle.com/technetwork/java/javase/index.html edition : jdk-7u79-linux-x64 ...

  6. HTTPClient Realization java Automatically log in to Renren

    Refer to the website : https://passport.csdn.net/account/login  http://www.iteye.com/topic/638206 httpClient http://b ...

  7. at command

    stay windows In the system ,windows Provides the ability to plan tasks , In the control panel  ->  Performance and maintenance  ->  Task plan ,  Its function is to schedule tasks that run automatically .  adopt ' Add task plan ' Step by step to guide , Then a ...

  8. Hibernate get and load The difference between

    1 load It's to query from the database when it's needed ,get It's right now . 2 For records that don't exist ,get Null pointer exception will be reported ,load Will be submitted to the org.hibernate.ObjectNotFoundException:  ...

  9. vue Parent child communication in component communication :props( Component parameters )

    Instance of a : <div id="app"> <alert msg="hhhhhhh"></alert> </div> ...

  10. SAP Table type

    I looked at it recently ABAP Table type related knowledge , Make your own analysis and summary . ABAP It seems that I feel that there should only be 2 Kind of , It's not what people say 3 Kind of . From the principle of data storage . Let me do an analysis . In general , We all said ABAP in ...