浏览器缓存和数据压缩
相关概念:
- 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 | #响应头返回 |
Etag : HTTP1.1推出,文件的指纹标识符,如果文件内容修改,指纹就会改变
If-None-Match: 本地缓存失效,会携带次之去请求服务端,服务端判断资源是否改变,如果没有改变,直接使用本地缓存,返回304
1 | #响应头返回 |
缓存策略的选择
适合本地缓存的内容
- 不变的图片,如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 | # 下面时间可以为秒,分钟,小时 |
Nginx缓存配置示例 缓存时间30天
1 | location ~.*\.(gif|jpg|png|flv|swf|rar|zip)$ |
协商缓存配置
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 | gzip on | off ; # 是否开启GIZP |
配置实例:
其他工具
自动化构建工具Grunt