游览器缓存和数据压缩

游览器缓存和数据压缩

HTTP缓存机制

缓存分类

HTTP缓存模型中,如果请求成功,会拥有三种情况

200 from cache :直接从本地缓存中获取响应,最快速,最省流量,因为根本没有向服务器发送请求.

304 Not Modified : 协商缓存,游览器在本地没有命中的情况下请求头中发送一定的效验数据到服务器,如果服务端数据没有改变游览器从本地缓存响应,返回304;

304特点 : 快速,发送的数据很少,只返回一些基本的响应头信息,数据量很少,不发送实际响应体.

200 ok :以上两种缓存全部失败,服务器返回完整响应,没有用到缓存,相对最慢.

本地缓存

游览器认为本地缓存可以使用,不会去请求服务端

相关Header

Pragma: HTTP1.0时代的遗留产物,该字段被设置为no-cache时,会告知游览器禁用本地缓存,即每次都向服务器发送请求.

Expires: HTTP1.0时代用来启用本地缓存的字段吧,expires值对应一个形如Thu,31 Dec 2037 23:55:55 GMT的格林威治时间,告诉游览器缓存实现的时刻,如果还没该时刻,标明缓存有效,无需发送请求.

缺陷: 游览器和服务器的时间无法保存一致,如果时间差距大,就会影响缓存结果.

为了针对这一缺陷,Cacge-Control出现了.

Cache-Control: HTTP1.1针对Expires时间不一致的解决方案,运用Cache-Control告知游览器缓存过期的时间间隔,而不是时刻,即使具体时间不一致,也不影响缓存的管理.

我们了解一下Cache-Control里面的一些东西

no-store :禁止游览器缓存响应

no_cache:不予许直接使用本地缓存,先发起请求和服务器协商

max-age=delta-seconds:告知游览器该响应本地缓存有效的最长期限,以秒为单位.

三个头部同时存在时的优先级

优先级 :Pragman>Cache-Control>Expires

协商缓存 :当游览器没有命中本地缓存,如本地缓存过期或者响应中声明不允许直接使用本地缓存,那么游览器肯定会发起服务端请求.

服务端会验证数据是否修改,如果没有,通知游览器使用本地缓存

协商缓存的相关Header

Last-Modified : 通知游览器资源的最后修改时间

请求是会带一个Last-Modified,然后得知最后的修改时间,如果修改时间与自己这边相符,则调用本地缓存,如果不符,则从服务器再获取.

Last-Modified:Mon,28 Sep 2015 08:06:43 GMT

相关Header

If-Modified-Since:得到资源的最后修改时间后,会将这个信息通过If-Modified-Since提交到服务器做检查,如果没有修改,返回304状态码.

Etag :HTTP1.1退出,文件的志文表示服,如果文件内容改动,指纹会改变.

Etag :“78437822c*6739”;

If-None-Match :本地缓存失效,会小戴此值去请求服务端,服务端判断该资源是否改变,如果没有改变,直接使用本地缓存,返回304

缓存策略的选择
本地 : 不变的图像 如logo,图标等,js,css静态文件,可下载的内容,媒体文件.

协商: HTML文件,经常替换的图片,经常修改的js,css文件

注:js,css文件的加载可以加入文件的签名来拒绝缓存,
如index.css?签名.index.签名.js

不建议缓存的内容

用户隐私等敏感数据,
经常改变的的api数据接口.

Nginx 配置缓存策略

本地缓存配置

add_header指令: 添加状态码2xx和3xx的响应头信息

add_header name value [always];

可以设置Pragma/Expires/Cache-Control,可以继承

expires指令:通知游览器过期时长

expires time;

为负值时标识Cache-Control:no-cache

为正或者0时,标识Cache-Control:Max-age=指定的时间

协商缓存相关配置

Etag指令:指定签名

前端代码和资源压缩

优势

让资源文件更小,加快文件在网络中的传输,让网页更快的展现,降低宽带和流量开销

压缩方式

JS,css,图片,HTML代码的压缩
Gzip压缩

JavaScript代码压缩

JavaScript压缩的原理一般是去除掉多于的空格和回车,替换长变量名,简化一些代码写法等;

Javascript代码压缩工具有很多,在线工具,有应用程序,有编辑器插件.

常用压缩工具:UglifyJS,YUI Compressor,Closure Compiler.

UglifyJS:压缩,语法检查,美化代码,代码缩减,转化.

YUI Compressor :来自Yahoo,只有压缩功能

Closure Compiler:来自Google,功能和UglifyJS类似,压缩的方式不一样;

css代码 压缩

原理与JavaScript压缩原理类似,同样是去除空白符,注释,并且优化一些css语义规则等 ;

常用工具: YUI Compressor, CSS Compressor

HTML代码压缩

不建议使用代码压缩,有时会破坏代码结构,可以使用Gzip压缩,当然也可以使用htmlcompressor工具,不过转换后一定要检查代码结构;

图片压缩

除了代码的压缩外,有时对图片的压缩也是很有必要的,一般情况下图片在Web系统的比重都比较大.

压缩工具: tinypng,JpegMini,ImageOptim