Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you an in-depth study on how to optimize the performance of web with no-cache and must-revalidate. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

Introduction

Front-end students who have a little knowledge of the HTTP protocol are no stranger to Cache-Control and often deal with it during performance optimization.

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

The editor only selects no-cache and must-revalidate to explore and compare these two values. In the practice of the project, these two values are used more often and are easy to be confused.

Cache-Control: no-cacheCache-Control: max-age=60, must-revalidate

Portal: RFC2616's introduction to the first part of Cache-Control.

Brief introduction of no-cache and must-revalidate

No-cache: tell the browser and cache server to check the validity of the copy to the source server before using the resource copy, regardless of whether the local copy expires or not.

Must-revalidate: tell the browser and cache server that before the local copy expires, you can use the local copy; once the local copy expires, you must go to the source server for validity verification.

The above introduction involves three principals: browser, cache server, and source server. A brief introduction is given in the following section.

Browser, cache server, source server

Browser: direct initiator of resource request.

Source server: the actual provider of the resource.

Cache server: an intermediate server set up between the browser and the source server to initiate resource requests to the source server instead of the browser

The cache 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 takes the resource from the source server and returns it to the browser. In addition, the cache server generally keeps a copy of the resource locally, and when the same resource request arrives, the cache server can return a copy of the resource, so as to improve the speed of resource access.

Compare test scenarios and environment preparation

Compare test scenarios

The following article will explore the difference between no-cache and must-revalidate through a comparative test of the following two scenarios.

The browser accesses the source server directly.

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

Environmental preparation

Operating system: OSX 10.11.4

Browsers: 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 experimental code: you can visit the github home page to get it, or you can download it locally through git clone.

Git clone https://github.com/chyingp/tech-experiment.git cd tech-experiment/2016.10.25-cache-control/ npm install

2. Install Squid with brief steps and download address.

3. Optional: start Squid and set the local http agent to the ip and port of Squid.

Note: this step is required when the test scenario "indirectly accesses the source server resources through the cache server".

4. Optional: set the local proxy to the address of Charles, and then set the proxy address of Charles to the proxy address of squid. (prevent browser developer tools from modifying request header and interfering with the experimental results)

Scenario 1: browser-> Source Server

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

Cd connect-directly node server.js

Cache-Control: no-cache

Use case 1: second access, the resource on the source server has not changed

The access address is: http://127.0.0.1:3000/no-cache

Step 1: * visits. The returned content is as follows. As you can see, Cache-Control: no-cache is returned.

HTTP/1.1 200 OK X-Powered-By: Express Cache-Control: no-cache Content-Type: text/html; charset=utf-8 Content-Length: 11 ETag: W / "b-s0vwqaICscfrawwztfPIiA" Date: Wed, 26 Oct 2016 07:46:28 GMT Connection: keep-alive

Step 2: for the second visit, the return content is as follows. The return status code is 304Not Modified, which means that the resource on the source server has not changed after verification, and the browser can use a local copy.

HTTP/1.1 304Not Modified X-Powered-By: Express Cache-Control: no-cache ETag: W / "b-s0vwqaICscfrawwztfPIiA" Date: Wed, 26 Oct 2016 07:47:31 GMT Connection: keep-alive

Use case 2: second access, resource changes on the source server

Step 1: access address is: http://127.0.0.1:3000/no-cach...

Note: change=1 tells the source server that different content is returned for each visit.

Step 1: * visits, the content is as follows, do not repeat.

HTTP/1.1 200 OK X-Powered-By: Express Cache-Control: no-cache Content-Type: text/html; charset=utf-8 Content-Length: 11 ETag: W / "b-8n8r0vUN+mIIQCegzmqpuQ" Date: Wed, 26 Oct 2016 07:48:01 GMT Connection: keep-alive

Step 2: for the second visit, the return content is as follows. Notice that the Etag has changed, indicating that the source server resources have changed. So the status code is 200 OK, and the source server returns the new version of the resource to the browser.

HTTP/1.1 200 OK X-Powered-By: Express Cache-Control: no-cache Content-Type: text/html; charset=utf-8 Content-Length: 11 ETag: W / "b-0DK7Mx61dfZc1vIPJDSNSQ" Date: Wed, 26 Oct 2016 07:48:38 GMT Connection: keep-alive

Cache-Control: must-revalidate

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

Optional parameter description:

Max-age: the max-age of the content returned by the origin server (in s).

Change: whether the content returned by the origin server changes, if it is 1, then changes.

Use case 1: second access, browser cache has not expired

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

Note: max-age=10 indicates that you want resources to be cached for 10s.

Step 1: * visits. The returned content is as follows.

HTTP/1.1 200 OK X-Powered-By: Express Cache-Control: max-age=10, must-revalidate Content-Type: text/html; charset=utf-8 Content-Length: 16 ETag: W / "10-dK948plT5cojN3y7Cy717w" Date: Wed, 26 Oct 2016 08:06:16 GMT Connection: keep-alive

Step 2: the second visit (within 10 seconds). As shown in the screenshot 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: second access, browser cache expired, source server resources unchanged

Step 1: skip * * visits. The second visit is shown in the screenshot below (after 10 seconds), and 304 Not Modified is returned.

HTTP/1.1 304Not Modified X-Powered-By: Express Cache-Control: max-age=10, must-revalidate ETag: W / "10-dK948plT5cojN3y7Cy717w" Date: Wed, 26 Oct 2016 08:09:22 GMT Connection: keep-alive

Use case 3: browser cache has expired and source server resources have changed

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

Step 1: * visits. Screenshot below.

Step 2: after the second visit (10 seconds later), the screenshot of the return is as follows. You can see that 200 is returned.

Scenario 2: browser-> cache server-> source server

From the above comparison experiment, we already know the difference in cache verification between no-cache and must-revalidate without going through the cache server.

Next, let's take a look at the differences between the two after the introduction of the cache server.

Note: below, we will confirm the behavior of the cache server by viewing the access log of Squid. Here is a rough explanation of a few keywords in the log:

TCP_MISS: no * * cache. It is possible that the cache server does not have a copy of the resource, or that the copy of the resource has expired.

TCP_MEM_HIT:*** cached. The cache server has a copy of the resource and the copy has not expired.

Paste the previous picture again.

Cache-Control: no-cache

Use case 1: chrometries visit resources * times

Screenshots of chrome access are as follows: 200 ok

Squid log: TCP_MISS, which means there is no copy of * local resources.

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.1 text/html

The use case 2:chrome accesses the resource again. And on the source server, the resource remains unchanged

Access address: http://127.0.0.1:3000/no-cache

* visits. For the second visit, the screenshot of chrome access is as follows:

The squid access log is as follows: TCP_MISS/304. Indicates that the cache server contacted the source server and found that the content had not changed, 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-

The use case 3:chrome accesses the resource again. And on the source server, the resource has changed

Access address: http://127.0.0.1:3000/no-cach...

Note: change=1 means that every time you access the source server, the returned resources are new.

* visits. For the second visit, the chrome screenshot is as follows, and the status code is 200.

From the squid log, the cache server accesses the source server and returns 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.1 text/html

Cache-Control: must-revalidate

Use case 1: the cache server already has a copy of the resource, and the copy of the resource has not expired

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

Note: max-age=900 indicates that the validity period of the resource is 900s.

Step 1:

Chrome*** accesses the resource several times, and there is no copy of the resource on the cache server, so it accesses the source server. Finally, the cache server returns 200 to the browser. At this point, there is a copy of the resource on the cache server squid.

Step 2:

Firefox*** visits the resource for several times (within 900s). A copy of the resource already exists on the cache server and has not expired. Therefore, the cache server returns a copy of the resource to firefox with a status code of 200. (cache *)

To verify that in step 2, the cache server returns a copy of the local resource, check the squid log. The second entry is the access record of firefox. TCP_MEM_HIT/200 represents * local cache.

1477648947.594 5 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 1477649012.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: a copy of the resource already exists on the cache server, which 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 one after another, with an interval of more than 10 seconds. On the second visit, chrome receives the following response.

View the squid log. As you can see, the status is TCP_MISS/304, which means that the local copy has expired. Check with the source server and find that the resources on the source server have not changed. Therefore, 304 is returned 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: a copy of the resource already exists on the cache server, which 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 one after another, with an interval of more than 10 seconds. On the second visit, chrome received the following response

The squid log is as follows, and the status is TCP_MISS/200, which means there is no * cache.

1477650702.807 8 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 1477651020.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

Contrast conclusion

The following are all for the nth time for browsers to access resources. (n > 1)

Do not consider the cache server

Whether the first local cache expires, whether the source server resource has changed, whether the status code no-cache is rechecked, whether it is 304no-cache, not sure whether it is 200must-revalidate / not 200 (from browser cache) must-revalidate is 304must-revalidate is 200

Consider caching server

Whether the first local cache expires, whether the cache server copy expires, whether the source server resource changes, whether the status code is rechecked

Whether the first local cache expires, whether the cache server replica expires, whether the source server resource changes, whether the status code no-cache does not determine whether it is 304no-cache, whether it is 200must-revalidate, yes / no (from browser cache) must-revalidate is / is not 304 (from cache server) must-revalidate is 304must-revalidate yes is 200

Write at the back

After a round of comparative tests, it is found that the two values of no-cache and must-revalidate are quite interesting. In fact, due to the space, there are still some contents that have not yet been compared. For example:

The performance of must-revalidate or no-cache when used with max-stale.

The difference between no-cache and max-age=0, mustvalidate.

When no-chche formulates a specific field name, it is different from the cache verification behavior when it does not specify a specific field name.

The difference between proxy-revalidate and must-revalidate.

The influence of the cache server's own optimization algorithm on the experimental results.

Compared with the experimental process is more boring and tedious, if there are any inaccuracies or mistakes, please point out:)

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

The above is the editor for you to share the web performance optimization in how to conduct no-cache and must-revalidate in-depth exploration, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.