Interface Test (vii)--cache

Source: Internet
Author: User
Tags browser cache nginx reverse proxy

Reproduced

25-55+ (85+65) =? , the answer to this question is 5! , do you believe me?

I didn't believe it at first, and after staring at the picture for three minutes, I believed it. The whole answer is 5!

-----------------------------get to the Chase-------------------------

First, Cache classification

Cache is divided into client cache and server side cache

Server cache is also divided into proxy servers cache and reverse proxy Server cache (also known as Gateway cache, such as nginx reverse proxy, squid, etc.), in fact, widely used CDN (fast broadcast seems to be used this) is also a service-side cache, the purpose is to let users of the request to go "shortcut", and are cached images, files and other static resources.

client-side caching generally refers to browser caching, which has two types of browser cache control: HTML meta tag vs. HTTP header information. The goal is to speed up access to a variety of static resources, think of the current large sites, any page is one hundred or two hundred requests, every day PV are billion levels, if there is no cache, the user experience will drop sharply, at the same time the server pressure and network bandwidth are facing serious test.

This article mainly talk about the HTTP client caching mechanism

Second, fiddler view cache

Open Fiddler grab bag, open test with browser tribal forum: http://120.25.145.237/upload/forum.php

If the browser is the first time to open a website (this forum has not been opened before), the following is the case:


In the cache area of the HTTP request headers, there are two parameters that show No-cache

(This is when the client makes a request and tells the server: "Dude, I don't have a cache, you have to send all the Web data. ~!! ", then the server returns:" OK ")

After the first request, we refresh (F5) This page again, grab the package as follows:

You will see the left-hand area with a lot of 304 display (parameters already in the right-hand cache) that the browser is already using cached data

Third, browser request flowchart

The first time the browser requests a flowchart:

    • When the browser requests again:

Iv. How the server determines if the cache is out of date

The Web server determines whether the browser cache is up-to-date in 2 ways.

First, the browser tells the Web server the last modification time of the cache file through the header "If-modified-since".

Second, the browser puts the cache file's ETag through the header ' If-none-match ' to tell the Web server.

Wu, If-modified-since

Refresh the current page with F5 (Find/upload/data/cache ... This), you will find that no matter how the refresh, if-modified-since after the request time has not changed, and if-modified-since time is greater than response headers data time, such as:

Indicates that the browser cache is up-to-date and the server returns 304, telling the client to use the local cache.

Vi. If-none-match and ETag

Etag:

1.ETag is generated by the Web server and then sent to the browser client. The browser client does not care about how the ETag is generated.

2. The etag is an abbreviation for the entity tag, which can identify the state of a resource based on a hash string generated by the entity content (similar to the result after MD5 or SHA1). The ETag also changes as the resource sends changes.

3. The etag defaults to the file's index section (INode), size and last modified time (MTime) after the hash is obtained.

If-none-match: When a resource expires (using the Max-age identified by Cache-control) and the discovery resource has a etage claim, it is requested again with the top If-none-match (etag value) to the Web server. When the Web server receives the request, it finds that the header if-none-match is compared to the corresponding check string for the requested resource and decides to return 200 or 304.


When you press F5 to refresh the Forum home page again, compare the client If-none-match with the server Etag value, which means that the cache is not updated.

Seven, why use the ETag?

1. Some servers do not accurately obtain the last modification time of the file, so that the last modification time will not be able to determine whether the file is updated.

2. Some files are modified very frequently, and are modified within the time of the second. Last-modified can only be accurate to seconds.

3. The last modification time of some files has changed, but the content has not changed. We don't want the client to think that this file has been modified

Eight, Ctrl+f5

Ctrl+f5 is forced to refresh the page, explicitly tell the server, not to use the cache

You can try again on the Tribal Forum homepage Ctrl+f5, the left request area won't see 304.


The role of Pragma:no-cache is identical to that of Cache-control:no-cache. are not using the cache.

Pragma:no-cache is defined in HTTP 1.0, so in order to be compatible with HTTP 1.0. So Pragma:no-cache and Cache-control:no-cache are used at the same time.

Nine, browser settings do not use the cache

Open ie. Click on the toolbar, Tools->internet options, general, and browse history settings. Select "Never". and then save.

Then click "Delete" to delete the temporary Internet files (ie cached files are temporary Internet files).

Ten, enter the refresh, F5 refresh, ctrl+f5 refresh the difference?

See here there are a lot of small partners to doubt, these three kinds of refresh there is a difference, do not see not know, a look startled, the difference is quite big oh.

Enter Refresh : You can empty the Fiddler page of all requests (command line input CLS, enter), and then in the Tribal Forum home page, enter to view the results of the request, you will find only about 16 requests sent out. And there is almost no picture request, This is because the request will first check whether the local cache of the requested picture, if there is a cache and not expired (expired can be viewed through the header of the picture request), he will not issue this picture requests.

F5 Refresh:f5 refresh is slightly slower than enter, why, because he still sent all the requests (about 70) to the server, only in the header of the request has the cache information, the server judge has not expired, Just go back to the 304not modified, and in Fiddler it's just that these 304 requests are grayed out. Because it returns 304 of such information, rather than pictures, he is faster than ctrl+f5, but slower than enter, because he still sends out all the requests, which is slower than the non-request of Enter.

ctrl+f5 Refresh: This is going to be slow, all requests should be re-sent, re-read from the server, a bit of cache is not read. To prevent the cache from being read in the server, Pragma:no-cache cache Control:no-cache is added to the request header when the CTRL+F5 is refreshed. These two are to tell the server to all the nodes in the middle of the browser, no cache, see this intermediate node also do not check their cache, ensure that the request is obtained from the server.

If you are already clear about these three kinds of refresh methods, can clearly explain their differences, indicating that the HTTP caching method, has been basically mastered.

Xi. Cache is the biggest enemy of development

Let's talk about the benefits of caching:

1. Reduce the redundant data transfer and save the network fee.

2. Reduce the burden on the server, greatly improve the performance of the website

3. Speed up the loading of Web pages for clients

Of course, the bug is often caused by improper caching.

After finishing this article you will know why you find a bug, the program ape likes to say, you empty the cache to try, and then the bug is gone

Interface Test (vii)--cache

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.