Cache Technology Research 01-browser cache technology

Prerequisites:

The cache technology is very important in website applications. It has a lot to do with reducing the server request pressure and adding blocks to the user's browsing speed,

Someone asked me about the browser cache principle in my "website optimization -- Let Your webpage fly" yesterday, and I was interested in studying cache technology.

This section describes the principle of browser caching.

Body: Cache Technology:

Before introducing the cache technology, let's take a look at the price diagram of a lamp website. Through the architecture diagram, we can clearly understand the overall cache of the website.

Lamp website structure

 

The above is a classic lamp website structure. We can clearly see the overall relationship between a website from the front-end to the server. below is my reference

A lamp cache diagram:

Lamp cache Diagram

We can see that the website cache is mainly divided into five parts:

1. Server cache: mainly static servers nginx and squid Based on web reverse proxy, mod_proxy and mod_cache modules of apache2
2. Browser cache: Includes page html cache and image js, css, and other resource cache.
3. PHP cache: There are many free PHP buffer acceleration tools, such as apc eaccerlertor.
4. Memory Cache: mainly uses the distributed cache mechanism such as memcache.
5. Database cache: You can configure the database cache, data storage process, and connection pool technology.

The following describes the principle of browser caching:

Your language skills are limited. Let's look at the picture first, which is more intuitive and concise:

From: we can know that the browser cache is divided into two parts:

1. Page html Cache
2. Image, css, js, and other caches

 

First introduce the principle of page Cache

The cache status of the page is determined by the HTTP header. One is the browser request information and the other is the server response information. It mainly includes Pragma: No-cache, cache-control, expires, last-modified, and if-modified-since. Pragma: No-cache is defined by HTTP/1.0, and cache-control is set by HTTP/1.1.

Working principle diagram drawn by yourself:

 

We can see that the principle is divided into three steps:

1. First request: the browser sends an Expires, Cache-Control, and Last-Modified/Etag request to the server through the http header. At this time, the server records the Last-Modified/Etag of the first request.
2. Request again: When the browser requests again, Expires, Cache-Control, If-Modified-Since/Etag are included in the request to the server.
3. The server compares the Last-Modified/Etag recorded for the first time with the If-Modified-Since/Etag requested for the second time to determine whether an update is required and then responds to the request.

Parameter description;

Cache-Control Parameters
Cache-control: private/public responses are cached and shared among multiple users. Private responses can only be used as private caches and cannot be shared between users.
Cache-control: No-Cache: No Cache
Cache-control: Max-age = x: the cache time is in seconds.
Cache-control: Must-revalidate: If the page expires, it is obtained from the server.

Expires: Set the page expiration time displayed
Last-Modified: The Last modification time of the request object is used to determine whether the cache expires. This is usually generated by the file time information.
If-Modified-Since: The information contained in the request sent by the client indicates that the Last modification date of the browser cache request object is used to compare with the Last-Modified of the server.

Etag: ETag is a token that can be associated with Web resources. It is not used much with the Last-Modified function and is also an identifier. It is generally used together with Last-Modified to improve the accuracy of server judgment.

 

Cache of images, CSS, and JS

This technology is mainly implemented through server configuration. If the apache server is used, you can useMod_expiresModule:

Compile the mod_expires module:

Cd/root/httpd-2.2.3/modules/metadata

/Usr/local/apache/bin/apxs-I-a-c mod_expires.c // compile

Edit httpd. conf: 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>

Explanation: the first sentence is to enable the Service.

The default time is one month.

The cache time settings for various types of resources are as follows:

For more details, refer to my website Optimization-Let Your webpage fly-Introduction to the use of this module

References: Http://www.infoq.com/cn/articles/etags

Http://www.lifetyper.com/archives/000087.html

Http://developer.yahoo.com/performance/rules.html
Http://www.websiteoptimization.com/speed/tweak/cache/

Http://www.mnot.net/cache_docs/

**************************************** **************************************** ****

The principle of browser cache is here. If there are any errors, I hope you can point them out. Thank you.

This article is based on the signature-non-commercial use
3.0 release of the license agreement. You are welcome to repost and interpret it. However, the signature of this article, PHP Huaibei (including links), must be retained and cannot be used for commercial purposes. If you have any questions or negotiation with the Authority, please contact me.