web性能优化之缓存机制

浏览器缓存就是把一个已经请求过的Web资源（html，css，js，ajax数据等等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。

用户第一次打开一个网站：

第二次打开时：

1、缓存的优点

1.1、减少网络带宽消耗

当Web缓存副本被使用时，只会向服务器请求很少的数据，产生极小的网络流量，可以有效的降低运营成本。

1.2、降低服务器压力

给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。

1.3、减少网络延迟，加快页面打开速度

缓存的使用能够明显加快页面打开速度，达到更好的体验。

2、强制缓存

只有当缓存失效时，才会去服务器获取最新资源的方式，就是强制缓存。那么怎么定义缓存的有效时间呢，这就要用到http头部的字段了，在协议层的字段中，可以造成强制缓存的字段有两个Expires和Cache-Control。

2.1、Expires

Expires字段，该字段表示缓存到期时间，即有效时间+当时服务器的时间，然后将这个时间设置在header中返回给服务器。

expires: Fri, 13 Jul 2018 04:37:01 GMT

2.2、Cache-Control

该字段表示该资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求，相比Expires，Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

cache-control: max-age=604800
#max-age 即最大有效时间，单位是秒
#no-cache：表示没有缓存

3、对比缓存

强制缓存一个问题，就是开启了缓存，但是如果修改了源文件怎么办，浏览器会一直用本地的缓存副本么？那展现的效果就不一样了啊。

对比缓存的过程是，先从缓存中获取对应的数据标识，然后向服务器发送请求，确认数据是否更新，如果更新，则返回新数据和新缓存。

对比缓存在协议里的字段是Last-Modified和Etag。

3.1、Last-Modified

客户端请求资源时，服务器告知客户端，资源最后一次被修改的时间

last-modified: Fri, 06 Jul 2018 02:36:18 GMT

If-Modified-Since：再次请求时，请求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段进行对比，如果相等，则表示未修改，响应304，客户端使用本地缓存；反之，则表示修改了，响应200状态码，返回原数据。

3.2、Etag

Etag存储的是文件的特殊标识，服务器存储着文件的Etag字段，可以在与每次客户端传送If-no-match的字段进行比较，如果相等，则表示未修改，响应304，客户端使用本地缓存；反之，则表示已修改，响应200状态码，返回原数据。

4、服务端设置缓存

4.1、Apache设置

4.1.1、使用Expires缓存

在Apache的http.conf里开启mod_expires.so模块

在配置文件中（去掉前面的#）：LoadModule expires_module modules/mod_expires.so

修改网站的 .htaccess

<IfModule mod_expires.c>
#打开缓存
ExpiresActive On
#默认对所有资源缓存604800秒
ExpiresDefault A604800
#png格式的资源缓存86400秒
ExpiresByType image/png A86400
#jpg格式的资源缓存3600秒
ExpiresByType image/jpg A3600

#包含这些后缀的资源，都缓存60秒
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A60
</FilesMatch>
</IfModule>

4.1.2、使用Cache-Control缓存

在Apache开启mod_headers模块

和方法1一样去掉LoadModule headers_module modules/mod_headers.so前面的#，没有就添加

修改网站的 .htaccess

#包含这些后缀的资源都缓存604800秒
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

因为开启Gzip也需要开启mod_headers，所以强制缓存我建议使用这个

4.1.2、使用Etag缓存

修改网站的 .htaccess

#开启Etag 
FileEtag INode Mtime Size
关闭Etag
#FileEtag none

INode Mtime Size，通过计算文件的元信息、时间信息、大小去记录Etag

4.2、Nginx设置

1、图片文件180天的缓存时间

2、js、css、字体等文件30天

location ~ .*\.(gif|jpg|jpeg|png|webp|bmp|swf)$
{
    expires      180d;
}

location ~ .*\.(js|css|json|woff|ttf)?$
{
    expires      30d;
}

参考：

https://segmentfault.com/a/1190000004473937

https://www.cnblogs.com/sustudy/p/4874490.html