背景
前几天在某个项目中遇到个需要优化的问题，该项目配置了移动端系统进行线下数据采集，用户会使用该系统上传手机中的高清照片；另配置了PC端进行数据展示，有个应用场景是将各采集点上传的高清照片（每张图片5MB左右的体积）用查看器展示出来。
查看器如下所示，那么这里就涉及到缩略图和高清图中格式，在查看图片的过程中发现每次点击缩略图时，对应的同一张高清原图会被重复加载，这是非常消耗时间的操作。
在业务上高清图片并不会被频繁更新，耗费2-4秒的重复请求等待图片非常不必要。是什么原因导致浏览器没有去读缓存，而是重新加载呢？
问题排查
1.首先需要保证chrome的 DisableCache开关为关闭状态 这里是为了排除浏览器强制清缓存的影响。
2.分析一下图片的请求状态 这里需要对浏览器的缓存机制有一定的了解：彻底理解浏览器的缓存机制。
浏览器发起http请求时会先访问缓存，如果没有缓存或者缓存过期，才会向服务器发起请求。服务器收到请求后会返回相应的资源和缓存规则，此时的缓存规则看Cache-Control
如果Cache-Control为public，所有内容都会被客户端和代理服务器缓存 如果Cache-Control为private，所有内容都只被客户端缓存（默认） 如果Cache-Control为no-cache，客服端缓存内容，但是否使用缓存需要经过协商验证来决定 如果Cache-Control为no-store，所有内容不会被缓存 如果Cache-Control为max-age=xxx，表示缓存内容将在xxx秒后失效
以此我们就可以对具体问题进行分析，如下图所示，可以看到服务端返回了Cache-Control=no-store在http头中，即所有内容不会被缓存。那么只要在服务端解决该问题即可。
将Cache-Control调整为no-cache后，浏览器将执行协商缓存流程如图
协商生效，返回304
协商失败，返回200和资源
解决方案
服务度响应头Cache-Control调整为no-cache，这时候我们再看看请求状态。304资源无更新，直接获取缓存。
再看看整个请求的时间占比，确实省下了download的时间。这个速度的提升在原图为4M以上的场景下相当明显。
