浏览器缓存和压缩优化技术

一、HTTP缓存机制

高并发下只能通过提升服务器负载解决？
缓存只能做数据库缓存？
启用浏览器缓存

缓存分类：
HTTP缓存模型中，如果请求成功会有三种情况

• 1、200 from cache：直接从本地缓存中获取响应，最快速，最省流量，因为根本没有向服务器发送请求。
• 2、304 Not Modified：协商缓存浏览器在本地没有命中的情况下，请求头中发送一定的教验数据到服务端，如果服务端数据没有改变浏览器从本地缓存响应，返回304。
  快速，发送的数据很少，只返回一些基本的响应头信息，数据量很小，不发送实际响应体。
• 3、200 OK：以上两种缓存全部失败，服务器返回完整响应。没有用到缓存相对最慢。

常见状态码

本地缓存
浏览器如果认为本地缓存能使用，不会去请求服务端。
相关header
Pragma：HTTP1.0时代的，该字段被设置未no-cache时，会告知浏览器禁用本地缓存。
Expires：HTTP1.0时代的，缓存过期时间。浏览器与服务器时间无法保持一致，如果差距过大，就会影响缓存结果。
Cache-Control：HTTP1.1，缓存过期的时间间隔。
优先级 Pragma > Cache-Control > Expires

协商缓存
浏览器在本地没有命中的情况下，请求头中发送一定的教验数据到服务端，如果服务端数据没有修改，浏览器使用本地缓存
相关header
Last—Moidfied
If-Modified-Since
ETag HTTP1.1推出，文件的指纹标识符。
If-None-Matche：本地缓存失败，会携带此值去请求服务端

缓存策略的选择
适合缓存的内容
不变的图像、js、css、可下载的内容、媒体文件

建议使用协商缓存
HTML文件、经常替换的图片、经常修改的js、

二、Nginx配置缓存策略

add_header指令：添加状态码为2XX和3XX的响应头信息
add_header name value [awalys’];
可以设置Progma/Expires/Cache-Control，可以继承

本地缓存配置
expires指令：通知浏览器过期时长
expires time;
为负值时表示Cache-Control： no-cache
为正值或者0就表示Cache-Control：max-age=指定的时间

协商缓存配置
etag 默认开启

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

让资源文件更小，传输更快
js、css、图片、html
Gzip压缩

• js 去除空白符和注释，替换长变量名
• css类似js
• html 不建议压缩可以用Gzip压缩
• 图片压缩 tinypng jpegMini ImageOptim
• Gzip压缩 nginx配置 gzip on|off