web性能优化之缓存机制

作者: Timeless 更新时间: 阅读量: 250

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

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

1028513-20170420165022024-1993543549.png

第二次打开时:

1028513-20170420165136790-834238622.png

1、缓存的优点

1.1、减少网络带宽消耗

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

1.2、降低服务器压力

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

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

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

2、强制缓存

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

QQ截图20180706153428.png

2.1、Expires

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

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

2.2、Cache-Control

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

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

3、对比缓存

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

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

对比缓存在协议里的字段是Last-ModifiedEtag

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设置

这个没实践过,贴个外链

https://www.cnblogs.com/kevingrace/p/6198287.html


参考:

https://segmentfault.com/a/1190000004473937

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