A brief analysis of browser page caching

A resource on a page can be easily divided into two categories:

URL variable, such as the CSS file on this page, this may be app.fe5a24f8ae.css, next time may be app.613e5f58f1.css
URL can not change, such as the URL of this page
For them, we can cache differently.

For example, the first, we can set the response head like this:

Cache-control max-age=31536000, Must-revalidate

Indicates that the resource is valid for a year, and that it will not be validated on the server until it expires.

So, how do we ensure that resources are modified to be updated to the user side in time? You can modify the URL.

For the second, because the URL cannot be changed, we need another way.

Like what:

Cache-control No-cache

No-cache does not mean that it cannot be cached, but that every time the browser has to make a confirmation with the server-through ETag or last-modified, there is one more request.

Set expiration time carefully for HTML documents

In most cases, requests for resources such as other pictures, CSS, and JavaScript come from a single HTML document. You should usually set a shorter expiration time for this type of page, or simply not set it. Because if such a page is cached, the file name of the resource contained in the page is cached together, causing updates to it that are difficult to ensure immediate effect to the user.

Do not use Query String when referencing a static resource

The Query string is an example of a key=val strings, such as

<script src= "/static/js/func.js?v=a87ff8" ></script>
This prevents a portion of older browsers, including IE6, from caching the resource.

How to set caching

For Apache servers, you can set the Max-age instructions for expireshttp headers or cache-controlhttp headers through the Mod_expires module. Edit the. htaccess file in the appropriate directory, or modify the Apache configuration file directly (depending on the server system version, possibly for httpd.conf or apache2.conf, and so on).

Sub-file Category settings

You can use Expiresbytype to set the expiration date of a certain type of file according to the MIME Type of the file. For example:

<ifmodule mod_expires.c>
Expiresactive on
Expiresbytype text/css "Access plus 1 week"
Expiresbytype application/javascript "Access plus 2 weeks"
Expiresbytype Image/x-icon "Access plus 6 months"
Expiresbytype image/gif "Access plus 6 months"
Expiresbytype image/png "Access plus 6 months"
Expiresbytype image/jpeg "Access plus 6 months"
Expiresbytype video/x-flv "Access plus 6 months"
Expiresbytype application/pdf "Access plus 6 months"
</IfModule>
where Access plus 1 week represents the week after which the cache expiration is set to the access time (that is, the current time). If you replace access with modification, the cache expiration is set to a week after the file modification time. The units of time you can use include:

Years
Months
Weeks
Days
Hours
Minutes
Seconds
Different times can also be combined, for example:

Expiresbytype text/html "Access plus 1 month 2 hours"
Expiresbytype image/gif "modification plus 5 hours 3 minutes"
Set according to file name extension

If you want to specify a caching rule based on the extension, you can use FilesMatch to match the regular expression. To be concise, I only prescribe expiresdefault here. It has a low priority and takes effect only if the corresponding file does not have any other rules to match (including cache rules under the upper directory).

<ifmodule mod_expires.c>
<filesmatch "\. (CSS|JS) $ ">
Expiresactive on
ExpiresDefault "Access plus 1 week"
</FilesMatch>
</IfModule>
Set up for some files

In the same vein, you can enable specific caching policies for certain files. Notice that the point in the filename (.) is required to be escaped.

<ifmodule mod_expires.c>
<filesmatch "^ (example\.css|example\.js) $" >
Expiresactive on
ExpiresDefault "Access plus 1 week"
</FilesMatch>
</IfModule>

Set all files under a folder

For static files, it is a convenient practice to put them all in one directory and set all the files in that directory. However, here you need to be aware of preventing other rules from overwriting expiresdefault.

<ifmodule mod_expires.c>
Expiresactive on
ExpiresDefault "Access plus years"
</IfModule>