不言不语

您现在的位置是: 首页 >  Linux

Linux

Nginx 中 expires缓存实现网站性能优化

2022-05-31Linux
对于网站的图片,尤其是新闻类型等门户网站, 图片一旦发布, 改动的可能是非常小的.我们希望能否在用户访问一次后, 图片缓存在用户的浏览器端,且时间比较长的缓存。可以用到 nginx的expires设置,非常简单


对于网站的图片,尤其是新闻类型等门户网站, 图片一旦发布,改动的可能是非常小的。我们希望 能否在用户访问一次后, 图片缓存在用户的浏览器端,且时间比较长的缓存。可以用到 nginx的expires设置,非常简单

网站设置 js、css、images 等文件的过期时间,是提升网站速度的基本技巧方法之一


一、Nginx expires 功能介绍


expires的功能是允许通过Nginx配置文件控制HTTP的"Expires"和"Cache-Control"响应头部内容告诉客户端浏览器是否缓存和缓存多久以内访问的内容。缓存的有效期可以设置为想对于源文件的最后修改时刻或客户端的访问时刻。

这些HTTP头想客户端表明了内容的有效性和持久性。如果客户端本地有内容缓存,则内容就可以从话存(除非已经过期)而不是从服务器中读取,然后客户端会检查缓存中副本,看器是否过期或者失效,以决定是否重新从服务器获得内容更新。


二、Nginx expires 作用介绍


在网站的开发和运营中,视频、图片、CSS、JS等网络元素的更新机会比较少,特别是图片,这是可以将图片设置在客户端浏览器本地缓存365天或者3560天,而将CSS、JS、HTML等代码缓存10~30天。

这样用户第一次打开页面后,会在本地的浏览器按照过期日志器缓存响应的内容,下次用户再打开类似的页面时,重复的元素就无需下载,从而加开用户访问速度。用户的访问请求和数据减少了,也可以节省大量的服务器带宽。


三、配置经典示例


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

location ~ .*\.(js|css)?$
{
    expires      12h;
}


四、检测网页过期设置是否生效


1. 按F12打开控制台


简单说明:

Cache-Control:表示当访问此网页后的max-age秒内再次访问不会去服务器请求,其功能与Expires类似,只是Expires是根据某个特定日期值做比较。一但缓存者自身的时间不准确.则结果可能就是错误的,而max-age,显然无此问题.。Max-age的优先级也是高于Expires的。

ETag:是实现与最近修改数据检查同样的功能的另一种方法:没有变化时不重新下载数据。其工作方式是:服务器发送你所请求的数据的同时,发送某种数据的 hash (在 ETag 头信息中给出)。hash 的确定完全取决于服务器。当第二次请求相同的数据时,你需要在 If-None-Match: 头信息中包含 ETag hash,如果数据没有改变,服务器将返回 304 状态代码。与最近修改数据检查相同,服务器仅仅 发送 304 状态代码;第二次将不为你发送相同的数据。在第二次请求时,通过包含 ETag hash,你告诉服务器:如果 hash 仍旧匹配就没有必要重新发送相同的数据,因为你还有上一次访问过的数据。

Last-Modified: 是 HttpHeader 中的资源的最后修改时间,如果带有 Last-Modified ,下一次发送 Http 请求时,将会发生带 If-modified-since 的 HttpHeader 。如果没有过期,将会收到 304 的响应,从缓存中读取。


2. 打开这个网站:,输入你的网页地址,检测后,立即可以看到设置是否生效了

上图看到,被检测网页的js、css文件过期时间为1天。


五、Nginx expires功能优缺点及解决方法


当网站被缓存页面或者数据更新了,此时用户端看到的可能还是旧的已经缓存的内容,这也就会影响用户体验,那么如何解决这个问题呢?

对于经常需要变动的图片等文件,可以缩短对象缓存时间,例如:谷歌和百度的首页图片经常更具不同的日期换成一些节日图,所以这里可以将这个图片设置为缓存器为1天。

当网站改版或者更新时,可以在服务器将缓存的对象改名(通过网站代码程序)。

对于网站的图片、附件,一般不会被用户直接修改,用户层面上的修改图片,实际上是重新传到服务器,虽然内容一样但是是一个新的图片名。

网站改版升级会修改js、css元素,若改版时对这些元素改了名,会使得前端的CDN以及其他用户端需要重新缓存内容。


六、原理


服务器响应文件内容是,同时响应etag标签(内容的签名,内容一变,他也变), 和 last_modified_since 2个标签值,浏览器下次去请求时,头信息发送这两个标签, 服务器检测文件有没有发生变化,如无,直接头信息返回 etag,last_modified_since。浏览器知道内容无改变,于是直接调用本地缓存。这个过程,也请求了服务器,但是传着的内容极少。对于变化周期较短的,如静态images,js,css,比较适于用这个方式

文章评论