浏览器缓存和数据压缩

浏览器缓存和数据压缩

相关概念:

  • HTTP缓存机制
  • Nginx配置缓存策略
  • 前端代码和资源的压缩

HTTP缓存机制

高并发下并不是只能通过提升服务器负载来解决,缓存也不是只有数据库缓存,还有浏览器缓存

缓存分类:

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

  • 200 from cache 本地缓存,根本没有请求服务器

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

    快速,发送的数据很少,只返回一些基本的响应头信息进行校验,数据量很小,不发送实际响应体

  • 200 OK : 以上两种缓存都没有命中,服务器返回完整响应,没有用到任何缓存,相对最慢

本地缓存

相关Header

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

Expires : HTTP1.0时代用来启用本地缓存的字段,expires值对应一个形如Thu, 31 Dec 2037 23:55:55 GMT的格林威治时间,告诉浏览器缓存失效的时刻,如果还没到该时刻,标明缓存有效,无需发送请求。该方案由于浏览器与服务器时间无法保持一致,如果时间差距过大,就会影响缓存结果,甚至缓存根本没有机会生效

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

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

​ no-cache :不允许直接使用本地缓存,先发起请求和服务器协商

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

优先级

Pragma > Cache-Control > Expires

协商缓存

相关Header

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

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

1
2
3
4
5
#响应头返回
Last-Modified:Thu, 31 Dec 2037 23:55:55 GMT

#请求头携带
If-Modified-Since:Thu, 31 Dec 2037 23:55:55 GMT

Etag : HTTP1.1推出,文件的指纹标识符,如果文件内容修改,指纹就会改变

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

1
2
3
4
#响应头返回
Etag : "13243533c-32e4"
#请求头携带
If-None-Match : "13243533c-32e4"

缓存策略的选择

适合本地缓存的内容

  • 不变的图片,如LOGO,图标
  • JS,CSS静态文件
  • 可下载媒体文件

建议使用协商缓存

  • HTML文件
  • 经常替换的图片
  • 经常修改的JS,CSS文件
  • JS,CSS的文件的加载可以加入文件的签名来拒绝缓存

不建议缓存的内容

  • 用户隐私等敏感数据
  • 经常改变的API数据

Nginx缓存配置

本地缓存配置

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

add_header name value [always];

可以设置Paagma / Expires / Cache-Control 可以继承

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

1
2
3
4
5
6
7
8
# 下面时间可以为秒,分钟,小时
expires time;

# 如
expires 30s;
# 为负值时表示Cache-Control : no-cache
# 当为正或者0时,表示Cacha-Control:max-age=指定的时间
# 当为max时,会把Expires设置为第一次请求时间10年后的时间,Cacha-Control设置为10年

Nginx缓存配置示例 缓存时间30天

1
2
3
4
location ~.*\.(gif|jpg|png|flv|swf|rar|zip)$
{
expires 30d;
}

协商缓存配置

Etag指令 : 指定签名

1
etag  on|off;  # 默认是on

前端代码和资源压缩

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

压缩方式:

JS CSS 图片 HTML压缩

Gzip 压缩 (开启服务器压缩)

JavaScript的压缩

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

JavaScript压缩的工具很多,有在线工具,有应用程序,有编辑器插件

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

CSS代码压缩

常用压缩工具 : YUI Compressor , CSS Compressor

CSS Compressor : 压缩时可以选择模式

HTML压缩

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

图片压缩

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

压缩工具:tinypng , JpegMini , ImageOptim

Gzip压缩

配置Nginx服务

配置项:

1
2
3
4
5
6
7
8
9
gzip  on | off ; # 是否开启GIZP
gzip_buffers 32 4k|16 8k #缓冲(内存中缓冲几块,每块多大)
gzip_comp_level [1-9] #压缩级别 推荐6 级别越高,压的越小,约消耗CPU计算资源
gizp_disable #正则匹配UA 什么样的uri不进行gzip
gzip_min_lengeh 200 # 开始压缩的最小长度
gzip_http_version 1.0|1.1 # 开始压缩的http协议版本
gzip_proxied # 设置请求者代理服务器,该如何缓存内容
gzip_types text/plain application/xml # 对哪些类型的文件用压缩 如txt,xml,html,css
gzip_vary on|off # 是否传输gzip压缩标志

配置实例:

其他工具

自动化构建工具Grunt