Frontend Optimization-set a longer expires

 

One of the most important factors in front-end optimization is to set a long expiration time. For example, Yahoo expires is set to 10 years, and page
Speed is recommended for more than one month. The purpose of setting expires is to prevent unupdated resources from generating HTTP requests. If a request is forcibly generated, 304 is returned, reducing server pressure and reducing bandwidth. Exprires belongs to the scope of server optimization. You need to modify the server configuration and restart the server.

HTTP header knowledge

Expires: Specifies the absolute time when the cache expires in GMT. If max-age is set, Max-age overwrites expires. If expires, You need to request again.

Last-modified: Web
The server determines the last modification time of the object, such as the last modification time of the file and the last generation time of the dynamic page.

Etag: the Identifier value of an object (such as a URL). For an object, such as an HTML file, if modified, its etag
Do not modify the etag, so the role of etag is similar to that of last-modified, mainly for Web servers.
Determines whether an object has changed. If there are multiple servers, you need to consider the etag synchronization issue.
For example, the previous request for an html
When the file is requested, the browser will send the previously obtained etag value to the Web server, and then the web server will send the etag
Compare it with the current etag of the file, and then you will know whether the file has changed.

Cache-control:
This is HTTP
In 1.1, few browsers that do not support HTTP 1.1 are added to make up for the expires defect.
Max-age: Specifies the relative time (in seconds) of cache expiration. Max-Ag = 0 or a negative value. The browser sets expires to in the corresponding cache.
08:00:00.
S-maxage: similar to max-age, only used in shared cache, such as proxy.
Public: Normally, HTTP authentication is required, and the response cannot be cahce. In addition, public can make it cache.
No-Cache: forces the browser to submit an HTTP request to the source server for confirmation before using the cache copy. This is very useful for identity authentication and can better comply
(It can be considered in combination with public ). It is also useful for maintaining a resource that is always up-to-date, but it does not completely lose the benefits of cache), because it is locally copied, however, confirmation was made before use, so HTTP requests are not reduced, but a response body may be reduced.
No-store: tells the browser not to cache data under any circumstances and does not keep copies locally.
Must-revalidate: force the browser to strictly abide by the cache rules you set.
Proxy-revalidate: forces the proxy to strictly abide by the cache rules you set.
Example: cache-control: Max-age = 3600, must-revalidate

Cache: Use the local cache without any request.

304: If-modified-since
If-match is used to determine whether the resource is modified. If the resource is not modified, 304 is returned. A request is sent, but the request content length is 0, which saves the bandwidth.

If there are multiple Server Load balancer servers, the etag calculated by different servers may be different, which may cause repeated resource loading. In my opinion, the Yahoo homepage does not have etag, it is estimated that there are such considerations.

 

Some of my analyses below are completely correct. I only tested IE6 and ff3.5. I am interested in a discussion. After all, browser is a black hole for me.

The following describes the expires questions.

1. What is the Request status after setting expires? Is this 304 or cache?

2. If the resource is cached by the browser, how can we ensure that the resource is correctly updated, especially when no error occurs on the page.

3. Are there any differences in browsers?

4. It is better to set the expiration time.

To solve the above problems, I used Apche for testing. The Apache configuration is as follows:

# Load the expires module <br/> loadmodule expires_module modules/mod_expires.so <br/> # cancel etag, remove etag interference <br/> fileetag none <br/> expiresactive on <br/> expiresdefault "access plus 10 years" <br/> expiresbytype image/GIF "access plus 10 years "<br/> expiresbytype image/JPEG" access plus 10 years "<br/> expiresbytype image/PNG" access plus 10 years "<br/> expiresbytype text/CSS" Access plus 10 years "<br/> expiresbytype text/html" access plus 1 seconds "<br/> expiresbytype text/JavaScript" access plus 10 years "<br/> expiresbytype application/x -Unknown-Content-Type "access plus 10 years" <br/> expiresbytype application/X-JavaScript "access plus 10 years" <br/> 

For testing, you also need to consider how to access the page. Different request statuses may vary. Open the browser to clear the cache, and then open the page for testing. The results of Multiple tests are as follows:

How to open the page	IE6 (httpwatch)	Ff3.5 (httpfox)
1. Open the page for the first time	200	200
2. Restart the browser to open the page.	Cache. Resource modification will not be requested again	Cache. Resource modification will not be requested again
3. F5 refresh	304. The modified resource status is 200.	304. The modified resource status is 200.
4. CTRL + F5 refresh	200, force new request	200
5. Backward	Cache, simply and directly loaded from the cache	Cache, simply and directly loaded from the cache
6. Press enter in the address bar of the accessed page	Cache	Cache

Summary:

The above conclusion is verified on the Yahoo homepage. Except for the cache status of two requests under IE6 when the Yahoo F5 refreshes the page (the reason is not analyzed currently), the two are basically the same.

Set expires to 30 days and 14 days. With the above test results, the expires optimization psychology has been achieved. Question 1 and Question 3 have been resolved.

The second method is to open the page and modify resources and use the local cache. An error is very likely. Problem 2 The safest way is to enable the new name for the modified resource. Yahoo adds the version number after the file name, this increases the front-end workload. Currently, the resource address remains unchanged for every update of the script library, mainly to avoid the issue that related applications need to be updated after renaming and save development time.

Expires is set to 2 or 3 days, which is a little short and stable for js css applications
IMG updates are not very frequent. For example, if Yahoo was set up for 10 years, it can be understood that it never expires. In the past ten years, the website did not know how many revisions were made. It is also appropriate to set a minimum of 30 days.

References:

Http://www.360doc.com/content/08/0501/14/41237_1227846.shtml
Http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.3.4

Http://www.mnot.net/cache_docs/
Yang Jian: website acceleration-cache is King Article http://www.itlearner.com/article/4421

Caching in HTTP http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html
Header
Field definitions http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

Age http://labs.apache.org/webarch/http/draft-fielding-http/p6-cache.html#header.age

Age calculations http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html