大流量高并发解决方案课题 04 浏览器缓存和数据压缩

作者: JONE 分类: PHP/MySQL,服务器 发布时间: 2018-04-15 10:21

一、HTTP缓存机制

问:高并发下只能通过提升服务器负载解决?

问:缓存只能做数据库缓存吗?

启用浏览器缓存

1) 缓存分类

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

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

304 Not Modified:协商缓存,浏览器中本地没有命中的情况下,请求头中发送一定的校验数据到服务端,如果服务端没有改变,浏览器从本地缓存响应,返回304。快速,发送的数据很少,只返回一些基本的响应信息,数据量很小,不发送实际响应体。

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

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

相关Header

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

Expries:HTTP1.0时代用来启用本地缓存的字段。expires值对应一个形如Thu,  31 Dec 2037 23:55:55 GMT 的格林威治时间,高速浏览器缓存实现的时刻,如果还没到该时刻,标明缓存有效,无需发送请求。(浏览器域服务器的时间无法保持一致,如果时间差距大,就会影响缓存结果)

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

Cache-Control 的参数
no-store:禁止浏览器缓存响应
no-cache:不允许直接使用本地缓存,先发起请求和服务器协商
max-age=delta-seconds:告知浏览器相应本地缓存有效的最大长期限,以秒为单位。

优先级:Pragma > Cache-Control > Expires

3) 协商缓存

当浏览器没有命中本地缓存,如本地缓存过期或者响应中声明不允许直接使用本地缓存,那么浏览器肯定会发起服务端请求,服务端会验证数据是否修改,如果没有修改则通知浏览器使用本地缓存。

相关header

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

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

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

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

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

Etag:”78437822c-6739″

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

4)适合缓存的内容

不变的图像,如logo,图标等

js、css静态文件

可下载的内容,媒体文件

5)建议使用协商缓存

HTML文件

经常替换的图片

经常修改的js、css文件

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

6) 不建议缓存的内容

用户隐私等敏感数据

经常改变的api数据接口

 

二、Nginx配置缓存策略

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

add_header name value [always];

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

expires time;

为负值时表示Cache-Control: no-cache;

当为正或者0时,就表示Cache-Control: max-age =指定的时间

三、前端代码和资源的压缩

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

压缩方式:JS、CSS、图片、HTML代码的压缩,开启服务的Gzip压缩。

Javascript代码压缩:压缩原理一般是去掉多余的空格和会车、替换长度变量名、简化一些代码写法等。Javascript代码压缩工具有很多,有在线工具、有应用程序、有编辑器插件。常用的压缩工具有 UglifyJS、YUI Compressor、Closure Compiler

CSS代码压缩:原理跟Javascript压缩原理类似,同样是去除空白符、注释并且优化一些Css寓意规则等。常用工具有 YUI Compressor、CSS Compressor

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

图片压缩:除了代码的压缩外,又是对图片的压缩也是很有必要,一般情况下图片在web系统的比重都比较大。压缩工具有 tinypng、JpegMini、ImageOptim

Gzip压缩

Nginx配置Gzip

gzip on|off;  #是否开启gzip

gzip_buffers 32 4k| 16 8K #缓冲(在内存中缓冲几块?每块多大)

gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压缩的越小,约浪费cpu计算资源)

gzip_disable #正则匹配UA 什么样的Uri不进行gzip

gzip_min_length 200 # 开始压缩的最小长度

gzip_http_version 1.0|1.1  #开始压缩的http协议版本

gzip_proxied  #设置请求者代理服务器,改如何缓存内容

gzip_type  text/plain  application/xml  # 对哪些类型的文件用压缩,如txt,xml,html,css

gzip_vary  on|off  # 是否传输gzip压缩标志

发表评论

电子邮件地址不会被公开。 必填项已用*标注