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

Posted 2020-12-30 meichao

一、HTTP缓存机制
缓存分类
1、200 from cache：直接从本地缓存中获取响应，最快速，最省流量，因为根本没有向服务器发送请求；
2、304 NOT Modified：协商缓存，浏览器在本地没有命中的情况下，请求头发送一定的校检数据到服务端，如果服务端数据没有改变浏览器从本地缓存响应，返回304
快速，发送的数据很少，只返回一些基本的响应头信息，数据量很小，不发送实际的响应体；
3、200 OK：以上两种缓存失败，服务器返回完整的响应。没有用到缓存，相对较慢；
相关的头信息：
Pragma：HTTP1.0时代遗留的产物，该字段被设置no-cache时，会告知浏览器禁用本地缓存，即每次都要向服务器发送请求；
Expires：HTTP1.0时代启用本地的缓存，告诉浏览器缓存实现的时刻，如果没有到该时刻，标明缓存有效，无需发送请求；（浏览器和服务器的时间无法保持一致，如果时间差距太大，就回影响缓存效果）；
Cache-control：HTTP1.1针对Expires时间不一致的解决方案，告知浏览器缓存过期时间不是时间间隔而是秒，这样就会解决时间不一致的问题；
no-store：禁止浏览器缓存响应
no-cache：不允许直接使用缓存，先发起请求和服务器协商
max-age=单位：秒，告知浏览器该响应本地缓存有效的最大期限，以秒为单位；
优先级：Pragma > cache-control > Expires
Last-modified：通知浏览器资源最后的修改时间
if-Modified-Since：得到资源最后的修改时间，会将这个信息提交到服务器做检查，如果没有修改，返回304状态码；
Etag：HTTP1.1推出，文件指纹标识符，如果文件内容修改指纹会改变；
if-None-Match：本地缓存失效，会携带此值去请求服务器，服务器判断该资源是否改变，如果没有改变，直接使用本地缓存，返回304；
缓存策略的选择：
适合做本地缓存：
1、不变的图像，如logo，图标等；
2、js、css静态文件；
3、可下载的内容，媒体文件；
适合做协商缓存：
1、html文件；
2、经常替换的图片；
3、经常修改的js、css文件；
4、js、css文件的加载可以加入文件的签名来拒绝缓存；
不建议缓存的内容：
1、用户隐私等敏感的信息；
2、经常改变的api数据接口
二、nginx配置缓存策略
本地缓存配置：
expires time； 通知浏览器过期的时长
为负值时表示Cache-Control：no-cache
为正值或者为0，就表示Cache-Control：max-age=指定的时间

协商缓存：
Etag：指定签名 on|off 默认开启
三、前端代码和前端的压缩
优势：让资源文件更小，加快文件在网络的传输，让网页更快的展现，降低带宽和流量的开销；
压缩方式：js、css、图片、html的代码压缩、gzip压缩
js代码压缩：一般就是去除多余的空格和回车、替换长变量名、简化一些代码写法等；
常用的压缩工具：UglifyJS（压缩、语法检查、美化代码、代码缩减、转化）、YUI Compressor（只有压缩）、Closure（和UglifyJS类似，压缩方式不一样）、Compiler
css压缩：去除空白符、注释优化一些css语义规则；
常用的压缩工具：YUI Compressor（只有压缩）、CSS Compressor
HTML压缩：不建议使用代码压缩，建议使用gzip压缩
图片压缩工具：tinypng、jepgMini、ImageOptim
gzip压缩
Nginx配置：