How to use front-end browser cache

I have introduced browser caching to you before, and also introduced HTML offline caching. It is easy to get confused if I talk too much about it. Today I will tell you the difference between these caches and how to use the cache.

200 from memory cache does not access the server, directly reads the cache, and reads the cache from the memory. The data at this time is cached in memory. After the process is killed, that is, after the browser is closed, the data will no longer exist. However, this method can only cache derived resources

200 from disk cache without accessing the server, reading the cache directly, and reading the cache from the disk. When the process is killed, the data still exists. This method can only cache derived resources.

304 Not Modified Access the server and find that the data has not been updated. The server returns this status code. Then read the data from the cache.

Principle of three-level cache

Go to the memory first, if there is it, load it directly

If there is no memory, select the hard disk to get it, if there is it, load it directly

If there is no hard disk, then make a network request

The loaded resources are cached on the hard disk and memory

General browsingPictures, the process is as follows:

Access-> 200 -> Exit the browser

Come in again-> 200(from disk cache) -> Refresh-> 200(from memory cache)

application cache It is a little different from the cache above. It is offline cache, which means that resources can be read from the hard disk without being connected to the Internet. Even if the Internet is disconnected, users can browse.

Set browser cache

304 Is it necessary to negotiate the cache or communicate with the server once? If you want to cut off server communication, you must force the browser to use local cache (cache-control/expires),

Generally, there are several ways to set browser cache.

1. Set expires and cache-control through HTTP META

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

Written in this way, it is only valid for the web page, and is invalid for pictures or other requests in the web page.

2. Apache server configuration pictures, css, js, flash cache

This technology is mainly implemented through server configuration. If you use an apache server, you can use the mod_expires module to implement:

Compile the mod_expires module:

Cd  /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

First open the httpd.conf file, and then search for the expires module. After finding it, delete the # sign on the left to indicate that this module is enabled and restart the apache server

Edit httpd.conf configuration: add the following content

<IfModule mod_expires.c>ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"</IfModule>

3, php and other settings

<?php
  header("Cache-Control: public");
  header("Pragma: cache");
  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);?>

or

$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");

Front-end code deployment in cache condition

Question 1: With cache, how to update the front-end code?

We can add the version number after the resource file or picture, as shown below.

Question 2: But after all files have version numbers added, we only changed one file. Isn’t the cache of other files wasted?

To solve this problem, we can use the data Summary algorithm to obtain summary information for the file. The summary information corresponds to the file content one-to-one. As shown below:

This solves the problem.

Question 3: A new problem has arisen again, what should I do when publishing files?

1. Deploy the page first, then deploy the resources: During the time interval between the two deployments, if a user accesses the page, the old resources will be loaded in the new page structure, and the old version will be The resource is cached as a new version. The result is that the user accesses a page with a disordered style. Unless refreshed manually, the page will continue to execute errors until the resource cache expires.

2. Deploy resources first, then deploy pages: Within the deployment time interval, users with local cache of old version resources visit the website. Since the requested page is an old version, the resource citationNo change, the browser will directly use the local cache. In this case, the page will display normally; but if users without local cache or cache expired visit the website, the old version page will load the new version resource, resulting in page execution error. But when the page is deployed, these users will return to normal when they visit the page again.

Okay, what I want to say from the above analysis is: No one can deploy first! This will lead to page confusion during the deployment process. Therefore, for projects that do not have a large number of visits, the R&D students can work hard and secretly go online in the middle of the night. First upload the static resources and then deploy the page, which seems to have fewer problems.

How to solve these problems?

This problem originates from the overlay release of resources. This problem occurs when resources to be released are used to cover published resources. It is easy to solve it, that is, to implement non-coverage publishing

There are so many aspects about caching. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to implement digital focus chart carousel code in HTML

In HTML How to deal with the incomplete display of the last line of text

How to use canvas to create the effect of particle fountain animation

The above is the detailed content of How to use front-end browser cache. For more information, please follow other related articles on the PHP Chinese website!