闲着写点简单的分享

Web缓存优化的进阶认知

一般情况下,网站在第二次加载时,加载时间会大大被提升,这是因为网页中的一些资源被客户端缓存下来了,网页在二次加载的时候就不需要重新从远处服务器请求资源,而是直接应用客户端缓存好的数据。

扯远了···


Web缓存优化是一种提高现有系统利用率的方式,是处于用户和Web服务器之间的信息缓冲机制,基本思想是:利用了Web页面访问的时间的局部性,把用户经常访问的信息放到用户的附近或本地,以便用户后续访问能从客户端和本地服务器获取信息,不必访问远程服务器。Web缓存通过信息的本地化来加快网页浏览速度,在一定程度上节省网络带宽,减少服务器负荷。

由缓存实现的位置不同可以将Web缓存分为三类,即客户端缓存代理缓存服务器端缓存

客户端缓存主要在客户机浏览器端实现,将用户请求的数据缓存在本地,这种方法响应时间最短,但是不能被局域网所共享;代理缓存指代理服务器缓存,代理服务器位于客户端与服务器之间,代理服务器在接到用户请求时,将缓存信息返回给用户,如果请求信息不在缓存中,则请求远程服务器,代理缓存的优点是可以被局域网共享;服务器缓存指将服务器端动态数据缓存给客户端使用。

可缓存优化

并不是所有Web资源都是可以被缓存的。那么从客户端优化角度,提高Web资源的可缓存话就会提高客户端的性能。

影响Web缓存的因素主要有HTTP请求方法,请求参数设置以及HTTP状态码。
HTTP/1.1规定Web请求方法有GET、HEAD、POST、DELETE、OPTION、CONNECT和TRACE八种,只有GET与POST请求是可缓存的。

根据HTTP状态码可将Web对象缓存性分为三种。
可缓存的HTTP状态码:200、203、300、301、401;
消极缓存的HTTP状态码:204、305、400、403、404、405、414、500、502、504;
不可缓存的HTTP状态码:100、101、201、202、205、206、302、303、304、307、401、402、406、407、408、409、411、412、413、415、501、505.

Web缓存中的生命周期是指Web对象相邻两次修改的时间。

HTTP中对Web生命周期进行描述的参数有Expireslast modified等,大部分时候靠last modified参数来判断Web对象的生命周期。当某一Web资源进行修改后,Web缓存服务器中并没有进行相应的修改,这时候用户请求该资源并访问Web对象是否包含Expires字段,如果包含则进行校验,符合则返回当前资源,如果不包含该字段,Web缓存服务器会向远程服务器发起GET-If-modified请求,并发送当前last modified字段,如果响应不包含last modified字段,则使用当前last modified值。

不可缓存Web对象的HTTP参数设置

不可缓存HTTP头部信息 不可缓存HTTP头部信息参数含义
缺少 last modified 参数的对应信息 last modified time 指出服务器认出Web对象被修改的最后日期和时间,即若对象在 last modified time 值域以后被修改过,则该对象是不可缓存的。若服务器的返回值是304 not modified,则对象可被缓存
设置 set cookie 当缓存控制信息 cache-control 被设置为“不可缓存”或是“私有”时,该对象是不可缓存的
设置 Pragma:no-cache 当头部信息中有此设置时,服务器禁止请求从缓存响应。此时该对象是不可缓存的
设置 authorization 当返回的头部信息中包含个人信息时,缓存对象的效率很低。此时该对象是不可缓存对象

添加Expires字段可以增长Web对象生命周期。Expires字段告诉Web客户端,在指定的时间之前都可以使用现有的Web对象,不需要重新下载。假如在HTTP响应中出现这样的Expires:

expires:Sat, 03 Sep 2016 14:33:39 GMT

这个字段告诉浏览器,该资源的生命周期可以持续到2016年9月3日。如果Web网页中某一段资源返回了这个头,那么浏览器在以后加载这个页面时,会使用缓存中的本地资源,用户在二次访问的时候就节省了下载时间。

Nginx给静态资源添加Expires头

打开Nginx的站点配置文件,这里考虑给图片资源添加30天的有效期,给css和js添加7天有效期,也给字体资源添加30天的有效期。

server{}里添加下面代码:

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

location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
}

location ~ .*\.(eot|ttf|otf|woff|svg)$ {
    expires 30d;
    access_log off;
}

其他

实践的东西不多,另外再次对网站进行一次提速,过几天再对服务器进行升级,希望会更大的访问速度的提升。这篇文章写得好累啊!

已有 5 条评论
  1. 大官人

    我用的又拍云的cdn专门存图片 直接缓存 速度快 css js等还要按照楼主的来 速度就会更快

    大官人 回复
  2. Six.Nonacosa

    不错,很牛,速度很快

    Six.Nonacosa 回复
    1. Chakhsu Lau

      还可以更牛的!

      Chakhsu Lau 回复
  3. 我爱你

    多说怎么设置啊

    我爱你 回复
  4. 左蓝

    现在这速度已经很快了,哈哈。

    左蓝 回复
发表新评论