高并发解决方案---4.浏览器缓存和数据压缩

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

流量优化,前端优化,数据库优化

 

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

数据库缓存, 文件缓存, 浏览器缓存

 

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

 

协商缓存:

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

last-modified : 通知浏览器资源的最后修改时间, 当再次请求的时候服务端会判断在这个时间节点之后文件是否改动, 如果没有修改会返回一个304, 使用本地缓存

last-modified: Thu,31 Dec 2037 23:55:55 GMT

if-modified-since: 得到资源的最后修改时间后, 会将这个信息通过if-modified-since提交到服务器检测, 如果没有修改返回304状态码

if-modified-since: Thu,31 Dec 2037 23:55:55 GMT

etage: http1.1推出, 文件的指纹标识符, 如果文件内容改动, 指纹就会改变

 

适合缓存的内容

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

js, css静态文件

可下载的内容, 媒体文件

 

适合协商缓存

html文件

经常替换的图片

经常修改的js, css文件

js, css文件的加载可以加入文件的签名来拒绝缓存

index.css?签名

index.签名.js

 

不建议缓存的内容

用户的隐私等敏感数据

经常改变的api数据接口

 

nginx配置缓存策略

模拟nginx缓存

<?php

$since = $_SERVER['HTTP_IF_MODIFIED_SINCE'];

$lifetime = 10;

if (strtotime($since) + $lifetime > time())

{

header('HTTP/1.1 304 Not Modified');

exit();

}

 

header('Last-Modified: '. gmdate('D, d M Y H:i:s', time()). 'GMT');

echo time();

 

本地缓存配置:

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

add_header name value[always];

可以设置pragma/expires/cache-control, 可以继承

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

expires time(d,s..时间单位)

下图为图片资源缓存30天

 

下图可以看到expire的时间正好是30天后的时间(当前的时间: 2018年5月23日 10:21:22)

协商缓存相关配置:

etag指令: 指定签名(默认开启的)

 

 

前端代码和资源的压缩

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

压缩方式: js, css, 图片, html代码的压缩, 开启nginx的Gzip压缩

js压缩: 主要是去除空白符和回车, 替换长变量名, 简化一些代码写法等

var a = 100;

var b = 200;

会转换成 var a=100,b=200;

常用的工具: uglifyJS, YUI Compressor, Closure Compiler

css压缩: 主要去除空白符和回车

html代码压缩: 不建议使用代码压缩, 有时会破坏代码结构, 可以使用Gzip压缩

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

压缩工具: tinypng, JpegMini, ImageOptim

Gzip压缩: 配置nginx配置

Nginx配置:

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_types text/plain application/xml #对那些类型文件使用压缩 如txt,xml,html,css

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

下图可以看到响应里有gzip

 

其他工具: 自动化构建工具grunt