The browser caches the relevant http headers to minimize the number of http requests
|
I recently read Yahoo's 34 Golden Rules and learned how to optimize website performance. One of them is: "Specify Expires or Cache-Control for file headers". Specifically, for static content: set the file header expiration time Expires value to "Never expire"; and for dynamic content: use the appropriate Cache-Control file header to help the browser make conditional requests. This one can be linked to the first of Yahoo's 34 points, which is to minimize the number of http requests (many of Yahoo's 34 points are aimed at reducing http requests). After all, if there are too many resources that need to be downloaded, the time spent on adding new http links cannot be ignored. Therefore, caching technology can be used to optimize the performance of the website to avoid unnecessary http requests. It's just right to sort out the browser-related caching technology and cache-related http headers: 1.Expires: The Expires attribute in the HTTP header is the basic means of controlling HTTP cache, telling the browser how long to save the cache. After this time, the cache will send a request to the origin server to check whether the document has been modified. It is suitable for setting static image files, etc., and is also useful for controlling web pages that change regularly, such as setting fixed intervals for updates, etc. If the Expires file header is used, the content file name must be changed when the page content changes. For example, Yahoo often uses this procedure: adding a version number to the content file name, such as yahoo_2.0.6.js, so that it can be updated automatically. Use expires: If you are using Apache server, you can use ExpiresDefault to set the expiration time relative to the current date. Use mod_expires and add it in httpd.conf or .htaccess Copy code The code is as follows:<FilesMatch "\\.(ico|gif|jpg|html)$">ExpiresDefault "access plus 10 years"</FileMatch> 2.Cache-Control The meanings of the instructions in each message are as follows: 1. Public indicates that the response can be cached by any cache; 2.Private indicates that the entire or partial response message for a single user cannot be processed by the shared cache. This allows the server to describe only part of the response message to the current user, without having this response message be valid for other users' requests. 3.no-cache indicates that the request or response message cannot be cached; 4.no-store is used to prevent important information from being accidentally released. Sending it in a request message will cause both the request and response messages to not use the cache; 5.max-age indicates that the client can receive responses with a lifetime no longer than the specified time (in seconds). 6.min-fresh indicates that the client can receive a response whose response time is less than the current time plus the specified time. 7. max-stale indicates that the client can receive response messages beyond the timeout period. If you specify a max-stale message value, the client can receive response messages that exceed the specified timeout value; Example: Generally speaking, such static files should never expire. If I really want to add a time limit to this Cache, I hope it is - 10,000 years That is: "Cache-Control: max-age = 315360000000" 3. Last-Modified/If-Modified-Since The question-and-answer model asks you if you have updated the system, and then answers you. It is very easy to understand. 4. Configure ETag Entity tags (ETags) are a mechanism used by web servers and browsers to determine whether the content in the browser cache matches the original content on the server ("entity" is the so-called "content", including images, scripts, style sheets, etc.). The addition of ETags provides a more flexible mechanism for validating entities than using the last-modified date. Etag is a unique string that identifies the version number of the content. The only format restriction is that it must be enclosed in double quotes. The origin server specifies the ETag of the page content through the response containing the ETag file header. For example: HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195 Later, if the browser wants to validate a file, it will use the If-None-Match header to pass the ETag back to the origin server. In this example, if the ETag matches, a 304 status code is returned, saving 12,195 bytes of response. GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified Regarding the priority of the above cache mechanisms, I found a statement on the Internet: no-cache>Expires>Last-Modified In other words, the first one is the most important. After the first one takes effect, the latter one will basically become invalid. |
<<: Summary of the differences and usage of plugins and components in Vue
>>: A brief discussion on the semantics of HTML and some simple optimizations
Recommend
Linux file and user management practice
1. Display the files or directories in the /etc d...
CSS setting div background image implementation code
Adding background image control to a component re...
How to set the user root password and remote connection method for Alibaba Cloud ECS instance
After purchasing an Alibaba Cloud server, you nee...
A detailed discussion of evaluation strategies in JavaScript
Table of contents A chestnut to cover it Paramete...
Detailed steps to install Mysql5.7.19 using yum on Centos7
There is no mysql by default in the yum source of...
Possible reasons why the input type="reset" tag in HTML is invalid (does not work).
When using the <html:reset> tag, sometimes w...
Analysis of the method of setting up scheduled tasks in mysql
This article uses an example to describe how to s...
The difference and usage of datetime and timestamp in MySQL
1. How to represent the current time in MySQL? In...
Automatically install the Linux system based on cobbler
1. Install components yum install epel-rpm-macros...
HTML5+CSS3 header creation example and update
Last time, we came up with two header layouts, on...
Docker uses Supervisor to manage process operations
A Docker container starts a single process when i...
Attributes in vue v-for loop object
Table of contents 1. Values within loop objects...
Record a slow query event caused by a misjudgment of the online MySQL optimizer
Preface: I received crazy slow query and request ...
Implementing a simple timer based on Vue method
Vue's simple timer is for your reference. The...
Docker case analysis: Building a Redis service
Table of contents 1 Create mount directories and ...