Web performance optimization: No-cache and Must-revalidate in-depth exploration

Introduction

Slightly familiar with the HTTP protocol front-end classmate, compared to Cache-Control not feel unfamiliar, performance optimization often with it.

Common values include,,,,,, and private public no-store no-cache must-revalidate max-age so on.

Each value represents the meaning of the online summary is quite a lot of, here is not intended to be introduced, and interested in the exchange can be explored together.

This article only selects no-cache , must-revalidate These two carries on the research comparison. In the project practice, these two values are used more and more easily confused.

If you are not interested in the argumentation process, you can also jump directly to the "Comparative conclusions" section to see the conclusions.

Cache-control:no-cache

CACHE-CONTROL:MAX-AGE=60, Must-revalidate

Portal: RFC2616 about the Cache-control header.

No-cache, Must-revalidate Introduction

• no-cache: Tell the browser, cache server, whether or not the local copy is out of date, before using a copy of the resource, be sure to verify the copy validation to the source server.

• must-revalidate: tells the browser, the cache server, the local copy can be used before the local copy expires, and once the local copy expires, the source server must be validated.

The above introduction covers three principals: browser, cache server, source server. The following sections are briefly described.

Browser, cache server, source server

• Browser: Resource request direct Initiator.

• Source server: The actual provider of the resource.

• Cache server: An intermediary server that is set up between the browser and the source server, instead of a browser, initiates a resource request to the source server;

The caching server functions as follows. The cache server is not required, and the browser can also communicate directly with the source server.

Speed up resource access and reduce the load on the source server. The cache server obtains resources from the source server and returns them to the browser. In addition, the cache server typically saves a copy of the resource locally, and when the same resource request arrives, the cache server can return a copy of the resource to increase the speed of resource access.

Compare test scenarios, environment Readiness vs. Test scenarios

The following is a comparison test of two scenarios to explore no-cache and must-revalidate differentiate.

1. The browser accesses the source server directly.

2. The browser accesses the source server indirectly through the cache server.

Environment preparation

• Operating system: OSX 10.11.4

• Browser: Chrome 52.0.2743.116 (64-bit), Firefox 49.0.2

• Cache server: Squid 3.6

• Source server: Express 4.14.0

1. Download the Experiment code: You can access the GitHub homepage or git clone download it locally.

https://github.com/chyingp/tech-experiment.gitcd tech-experiment/2016.10.25-cache-control/npm install

2, install squid, step slightly,.

3, Optional: Start squid, and set the local HTTP proxy to squid IP and port.

Note: This step is required when testing the scenario "indirectly access source server resources through the cache server."

4. Optional: Set the local agent to the address of Charles, then set the proxy address of Charles to the proxy address of squid. (Avoid the browser developer tool's modification of the request header, interfering with the experimental results)

Scenario One: Browser-and source server

First, start the local server (the source server) with the following script.

cd connect-directly node server.js 

Cache-control:no-cache

Use Case 1: Two accesses, the resource on the source server has not changed

Access address is: Http://127.0.0.1:3000/no-cache

Step one: First visit, return content as follows. As you can see, it returns Cache-Control: no-cache .

HTTP/1.1 200 OKX-Powered-By: ExpressCache-Control: no-cacheContent-Type: text/html; charset=utf-8Content-Length: 11ETag: W/"b-s0vwqaICscfrawwztfPIiA"Date: Wed, 26 Oct 2016 07:46:28 GMTConnection: keep-alive

Step two: Second visit, return content as follows. The return status code is 304 Not Modified , indicating that the resource on the source server has not changed and that the browser can take a local copy.

HTTP/1.1 304 Not ModifiedX-Powered-By: ExpressCache-Control: no-cacheETag: W/"b-s0vwqaICscfrawwztfPIiA"Date: Wed, 26 Oct 2016 07:47:31 GMTConnection: keep-alive

Use Case 2: Two accesses, resource changes on the source server

Step One: Access address is: Http://127.0.0.1:3000/no-cach ...
Note: change=1 tell the source server that each visit will return different content

Step one: The first visit, the content is as follows, do not repeat.

HTTP/1.1 200 OKX-Powered-By: ExpressCache-Control: no-cacheContent-Type: text/html; charset=utf-8Content-Length: 11ETag: W/"b-8n8r0vUN+mIIQCegzmqpuQ"Date: Wed, 26 Oct 2016 07:48:01 GMTConnection: keep-alive

Step two: Second visit, return content as follows. Note that the etag has changed, indicating that the source server resource has changed. So the status code is 200 OK , the source server returns the new version of the resource to the browser.

HTTP/1.1 200 OKX-Powered-By: ExpressCache-Control: no-cacheContent-Type: text/html; charset=utf-8Content-Length: 11ETag: W/"b-0DK7Mx61dfZc1vIPJDSNSQ"Date: Wed, 26 Oct 2016 07:48:38 GMTConnection: keep-alive

Cache-control:must-revalidate

Access Address: Http://127.0.0.1:3000/must-re ...
Optional parameter Description:

• max-age: The amount of content returned by the source station max-age (in units of s).

• change: The content returned by the source station, whether the change, if yes 1 , then change.

Use Case 1: Two accesses, browser cache not expired

Access Address: Http://127.0.0.1:3000/must-re ...
Note: max-age=10 indicate that you want the resource cache 10s

Step one: First visit, return content as follows.

HTTP/1.1 200 OKX-Powered-By: ExpressCache-Control: max-age=10, must-revalidateContent-Type: text/html; charset=utf-8Content-Length: 16ETag: W/"10-dK948plT5cojN3y7Cy717w"Date: Wed, 26 Oct 2016 08:06:16 GMTConnection: keep-alive

Step Two: Second access (within 10s), as shown below, the browser reads the copy of the resource directly from the local cache and does not re-initiate the HTTP request.

Use Case 2: Two accesses, browser cache expired, source server resource not changed

Step One: Skip the first visit. The second visit is shown below (after 10s), which returns 304 Not Modified .

HTTP/1.1 304 Not ModifiedX-Powered-By: ExpressCache-Control: max-age=10, must-revalidateETag: W/"10-dK948plT5cojN3y7Cy717w"Date: Wed, 26 Oct 2016 08:09:22 GMTConnection: keep-alive

Use Case 3: The browser cache has expired and the source server resource has changed

Access Address: Http://127.0.0.1:3000/must-re ...

Step One: First time access, as follows.

Step Two: Second visit (after 10s), return as follows, you can see returned 200 .

Scenario 2: Source server, cache server, browser

From the above comparison experiment has been known, in the case of no cache server, no-cache and must-revalidate in the cache checksum differences.

Next, let's look at the difference between the two when the cache server is introduced.

Note: We will confirm the behavior of the Squid cache server by viewing the access log below. Here's a rough explanation of some of the keywords in the log:

• Tcp_miss: No hit cache. It is possible that the cache server does not have a copy of the resource, and it is possible that the resource copy has expired.

• Tcp_mem_hit: Hit the cache. The cache server has a copy of the resource and the copy has not expired.

Paste the previous diagram again.

Cache-control:no-cache

Use case 1:chrome accessing resources for the first time

Chrome access is as follows:200 ok

Squid log: Tcp_miss, which indicates that a local resource copy was not hit.

1477501799.573 17 127.0.0.1 TCP_MISS/200 299 GET http://127.0.0.1:3000/no-cache - HIER_DIRECT/127.0.0.1text/html

Use case 2:chrome to access the resource again. On the source server, the resource does not change

Access Address: Http://127.0.0.1:3000/no-cache

First visit slightly. For the second visit, Chrome access is as follows:

Squid access logs are as follows: tcp_miss/304. Indicates that the cache server contacted the source server and found that the content did not change, so it returned 304.

1477501987.785 1 127.0.0.1 TCP_MISS/304 238 GET http://127.0.0.1:3000/no-cache - HIER_DIRECT/127.0.0.1 -

Use case 3:chrome to access the resource again. On the source server, the resource has changed

Access Address: Http://127.0.0.1:3000/no-cach ...
Note: change=1 indicates that every access to the source server is mandatory, and the resources returned are new.

First visit slightly. Second visit, Chrome as follows, status code is 200 .

From the squid log, the cache server accesses the source server and returns it 200 to the browser.

1477647837.216 1 127.0.0.1 TCP_MISS/200 299 GET http://127.0.0.1:3000/no-cache? - HIER_DIRECT/127.0.0.1text/html

Cache-control:must-revalidate

Use Case 1: The cache server already has a copy of the resource and the copy of the resource is not expired

Access Address: Http://127.0.0.1:3000/must-re ...
Note: max-age=900 indicates that the resource validity period is 900s

Step One:

Chrome accesses the resource for the first time, does not have a copy of the resource on the cache server, and then accesses the source server. Finally, the cache server returns 200 to the browser. At this point, the cache server has a copy of the resource on the squid.

Step Two:

Firefox accesses the resource (within 900s) for the first time. There is already a copy of the resource on the cache server and the copy is not expired. The cache server then returns a copy of the resource to Firefox with a status code of 200. (Cache Hit)

In order to verify step two, the cache server returns a copy of the local resource to view the squid logs. The second is the Firefox access record, which TCP_MEM_HIT/200 indicates the hit local cache.

1477648947.594 5 127.0.0.1 TCP_MISS< Span class= "Hljs-regexp" >/200 325 GET http://127.0.0.1:3000/must-revalidate?-hier_direct/127.0< Span class= "Hljs-number" >.0.1 text/html1477649012.625 0 127.0.0.1 Tcp_mem_hit/200 333 GET http://127.0.0.1:3000/must-revalidate ? -hier_none/-text/html             

Use Case 2: The cache server already has a copy of the resource, the resource copy has expired, but the resource on the source server has not changed

Access Link: http://127.0.0.1:3000/must-re ...

Use Chrome to access the resource in more than 10s intervals. On the second visit, Chrome receives the following response.

View Squid logs. As you can see, the status indicates that the TCP_MISS/304 local copy has expired, verified with the source server, and found that the resource on the source server has not changed. So, return 304 to the browser.

1477649429.105 11 127.0.0.1 TCP_MISS/304 258 GET http://127.0.0.1:3000/must-revalidate? - HIER_DIRECT/127.0.0.1-

Use Case 3: The cache server already has a copy of the resource, the resource copy has expired, but the resource on the source server has changed

Access Address: Http://127.0.0.1:3000/must-re ...

Use Chrome to access the resource in more than 10s intervals. On the second visit, Chrome received the following response

Squid log as below, State is TCP_MISS/200 , indicates no hit cache.

1477650702.8078127.0.0.1 tcp_miss/200 325 GET http://< Span class= "Hljs-number" >127.0.0.1: 3000/must-revalidate?-hier_direct/127.0 .0.1 text/html1477651020.516 4 127.0.0.1 Tcp_miss/200 325 GET http://127.0.0 .1:3000/must-revalidate?-hier_direct/ 127.0.0.1 text/html 
 
 
  

Comparative conclusion

The following are for browser nth access resources. (n>1)

Do not consider cache server

Header	whether the local cache expires	whether the source server resource has changed	whether to re-verify	Status Code
No-cache	Not sure	Whether	Is	304
No-cache	Not sure	Is	Is	200
Must-revalidate	Whether	Yes/No	Whether	200 (from browser cache)
Must-revalidate	Is	Whether	Is	304
Must-revalidate	Is	Is	Is	200

Consider caching servers

Header	whether the local cache expires	whether the cache server copy expires	whether the source server resource has changed	whether to re-verify	Status Code
No-cache	Not sure	Not sure	Whether	Is	304
No-cache	Not sure	Not sure	Is	Is	200
Must-revalidate	Whether	Yes/No	Yes/No	Whether	200 (from browser cache)
Must-revalidate	Is	Whether	Yes/No	Is	304 (from cache server)
Must-revalidate	Is	Is	Whether	Is	304
Must-revalidate	Is	Is	Is	Is	200

Write it in the back.

After a round of contrast tests, no-cache must-revalidate It was interesting to find these two values. In fact, for space reasons, there is still some content that has not yet been tested in comparison. Like what:

• must-revalidateperformance when used with or no-cache max-stale in conjunction with.

• no-cacheWith max-age=0, mustvalidate the difference.

• no-chcheThe difference between the cache checksum behavior when a specific field name is specified, and not the specific field name.

• proxy-revalidateWith must-revalidate the difference.

• The effect of the cache server itself optimization algorithm on the experimental results.

Compared with the experimental process is more tedious, if there is no serious or wrong place, please point out:)

Here is a frequently encountered problem for the reader to explore: no-cache max-age=0, mustvalidate the difference between.

Web performance optimization: No-cache and Must-revalidate in-depth exploration