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

Implementation process of the magnifying glass effect in the Javascript example project

The browser caches the relevant http headers to minimize the number of http requests

Implementation process of the magnifying glass effect in the Javascript example project

Common array operations in JavaScript

Detailed explanation of the difference between flex and inline-flex in CSS

Detailed explanation of 8 ways to pass parameters in Vue routing components

Quickly solve the problem of garbled characters and jump lines in mysql exported scv files

How to implement scheduled backup of MySQL database

Example of using @media responsive CSS to adapt to various screens

Detailed process of using nginx to build a webdav file server in Ubuntu

Detailed explanation of meta tags (the role of meta tags)

Summary of some related operations of Linux scheduled tasks

Recommend

Practice of implementing custom search bar and clearing search events in avue

Navicat connects to MySQL8.0.11 and an error 2059 occurs

Detailed explanation of virtual DOM in Vue source code analysis

js implements random roll call

The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10

Detailed explanation of MySQL persistent statistics

Detailed explanation of how to write mysql not equal to null and equal to null

The marquee element implements effects such as scrolling fonts and pictures

How to enter directory/folder in Linux without using CD command

Solution to the error in compiling LVGL emulator on Linux

Detailed explanation of Vue development website SEO optimization method

How to implement interception of URI in nginx location

Detailed code for building a multi-person video chat service based on webrtc on Ubuntu

Detailed explanation of CocosCreator project structure mechanism

Detailed explanation of the use of stat function and stat command in Linux