浏览器缓存和压缩优化技术
启用浏览器缓存
http缓存模型中，如果请求成功会有三种情况
200 from cache：直接从本地缓存中获取响应，最快速最省流量 因为根本没有向服务器发送请求
304not modified:协商缓存，浏览器在本地没有命中的情况下请求头中发送一定的校验数据到服务端，如果服务端数据没有改变浏览器从本地缓存响应，返回304
当浏览器没有命中本地缓存 如本地缓存过期或者响应中声明不允许直接使用本地缓存 那么浏览器可定会发起服务端请求
服务端会验证数据是否修改，如果没有通知浏览器使用本地缓存
快速，发送的数据很少，只返回一些基本的响应头信息，数据量很小，不发送实际响应体
200 ok 以上两种缓存全部失败，服务器返回完整响应。没有用到缓存 相对最慢
本地缓存 如果浏览器认为本地缓存可以使用 不会请求服务端 最快
相关header
pragma：http1.0时代的遗留产物，该字段被设置为no-cache时，会告知浏览器禁用本地缓存，即每次都向服务器发送请求
expires:http1.0时代用来启用本地缓存的字段，expires值对应一个 如 Thu ,31Dec 2037 23:55:55GMT的格林威治时间 告诉浏览器你去缓存实现的时刻，如果还没到该时刻 标明缓存有效 无需发送请求
缺陷：浏览器与服务器时间无法保持一致，如果时间差距大 就会影响缓存结果
cache-control：http1.1针对expires时间不一致的解决方案，运用cache-control告知浏览器缓存过期的时间间隔而不是时刻，即使具体时间不一致也不影响缓存的管理===秒数过期
no-store：禁止浏览器缓存响应
no-cache：不允许直接使用本地 缓存，先发起请求和服务器协商
max-age=delta-seconds:告知浏览器该响应本地缓存有效的最长期限，以秒为单位
优先级
pragma>cache-control>expires
Last-Modified 通知浏览器资源的最后修改时间 格林威治时间
if-modified-since 得到资源的最后修改时间后，会将这个信息通过 if-modified-since提交到服务器做检查 如果没有修改 返回304状态码
etag http1.1推出 文件指纹标识符 如果文件内容修改 指纹会改变
if-none-match 本地缓存失效 会携带此值去请求服务端，服务端判断该资源是否改变 如果没有改变 直接使用本地缓存 返回 304
http缓存机制
nginx配置缓存策略
适合缓存的内容
不变的图像 如 logo图标等
js、css静态文件
可下载的内容 媒体文件
建议使用协商缓存
html文件
经常替换的图片
经常修改 的 js css文件
js、css文件的加载可以加入文件的签名来拒绝缓存 index.css?签名
不建议缓存
用户隐私等敏感数据
经常改变的api数据接口
nginx缓存策略的实现
$since=$_SERVER['HTTP_IF_MODIFIED_SINCE'];
$lifetime=3600;
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');
本地缓存配置
add_header指令 添加状态码 为2xx和3xx的响应头信息
add_header name value[always];
可以设置pragma cache-control expires 可以继承
expires 30d 三十天
expires指令：通知浏览器过期时长
expires time;
为负值表示cache-control:no-cache
为正值表示cache-control:max-age=指定的时间:
前端代码和资源的压缩
优势
让资源文件更小 加快文件在网络中的传输，让网页更快的展现，降低带宽和流量开销
压缩方式
js css 图片 html代码的压缩
Gzip压缩
javascript代码压缩
javascript代码压缩的原理一般是去掉多余的空格和回车，替换长变量名，简化一些代码写法等
javascript代码压缩工具有很多，有在线工具 有应用程序 有编辑器插件
常用压缩工具 :
uglifyjs 压缩 语法检查 美化代码 代码缩减 转化
yui compresscor 来自yahoo 只有压缩功能
closure compiler 来自 google 功能类似 uglifyjs，压缩的方式不一样
css代码压缩
原理跟javascript压缩原理类似 同样是去除空白符，注释并且优化一些css语义规则等
常用压缩工具 :
yui compresscor
css compresscor 压缩时可以选择模式
html代码压缩
不建议html代码压缩 容易破坏结构 可以使用 Gzip压缩 也可以使用html compresscor 工具,不过转换后一定要检查代码结构
html compresscor
图片压缩
除了代码的压缩外 有时对图片的压缩也是很有必要 一般情况下图片在web系统的比重都比较大
压缩工具
tinypng
jpegmini
imageoptim
Gzip压缩
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压缩标志
其他工具
自动化构建工具 grunt
网友评论