缓存优点
- 减少不必要的数据传输，节省带宽
- 减轻服务器负担，提升网站性能
- 加快客户端加载网页的速度，提升用户体验
缓存缺点
服务端更新资源后，客户端更新滞后
这便是面试时常考的问题
- 更改文件的名字
- 为
url增加一个version参数，每次部署上线的时候更改一个版本号，例如：<script src="test.js?ver=1.0.0"></script>
面试官又问：上边的方法是手动改，还是程序改？我说手动改，面试官说那要是早晨起来迷迷糊糊，手动改错了呢？现在想想面试官的意思应该是让程序改，从而可以避免改错的情况。
网上还有的方法是通过脚本动态的往url参数添加随机数或者时间戳，随机数虽然可能重复性比较小，但是万一呢，还有就是随机数也没有什么意义。所以可以采用时间戳来代替，时间戳永远不会重复并且也有版本的先后意思
a.onclick = function (e) {
a.href = 'http://www.baidu.com?version='+new Date().getTime()
console.log(a.href);
}
这样的话每次点击的时候都会更新URL，浏览器缓存失去意义。
那怎么用程序改呢？
- 创建一个独立的JS文件，将所有需要更改的文件放在一个
jshash对象中
var strSite = window.location.protocol + "//" + window.location.host + "/"; //// 网站主机头
var JSHash = {
test: { url: strSite + "test.js",type:"javascript", version: "v0001" }
}
function loadJS(keys) {
if (keys) {
for (var i = 0; i < keys.length; i++) {
var jsnode = JSHash[keys[i]];
if(jsnode.type="javascript"){
document.writeln(`<script type='text/javascript' src = ${jsnode.url}?${jsnode.version}></script>`)
}else{
document.writeln(`<link type='text/css' src = ${jsnode.url}?${jsnode.version}></script>`)
}
}
}
}
在相关页面引用js 的方改为：loadJS(["test"]);这样每一次更新的时候，只需要调整相关JS的版本号即可。
- 在
JSHash对象中修改文件对应的版本号 - 在页面中调用
loadJS(["test"])方法 - 但是我觉得这个有个缺陷，应该是把JS文件替换掉吧，不应该是再在页面中生成一个
script脚本。
参考：
分享一个控制JS 浏览器缓存的解决办法。
大公司里怎样开发和部署前端代码？
缓存的时候会将内容和响应头一起缓存下来，因为在进行协商缓存的时候需要利用响应头的信息跟服务端的一些字段作对比。
强缓存（本地缓存）
浏览器请求某一资源时，先获取header头信息，判断是否命中强缓存(cache-control或者是expire)字段，并且判断有没有过期。若命中没有过期，则不会向服务器发送请求，直接从缓存中读取信息且状态码为200。
协商缓存
如果显示已经过期的话，浏览器会向服务器发送请求，这个请求会携带第一次请求返回的有关缓存的header字段信息。比如，客户端会通过If-None-Match头先将服务器端发送过来的Etag发送给服务器，服务端会对比发送过来的是否与自己的Etag字段值是否相同，若相同，就将If-None-Match的值设为false，再进而判断last-modefied字段，返回状态304。若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新解析服务器端返回的数据；
简单概括：
若第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期又或Cache-Control的属性设置为no-cache时的话，那么再判断是否命中etag和last-modefied字段，若命中并且该缓存的文件版本与服务端的版本是一致的，那么则不需要重新下载该资源，则直接从缓存中读取资源且状态码为304。
优先级：强缓存>协商缓存；Cache-Control>Expires>Etag>Last-modified
Cache-Control:public, max-age=14400//单位是秒，在多少秒之后过期
Expires：Sat, 04 Apr 2020 12:09:01 GMT//是一个具体的日期
在http1.0中，使用的是expires
在http1.1中，使用的是Cache-Control，Cache-Control可以拥有以下的几个值：
-
private：仅客户端（浏览器）可以缓存（默认值） -
public：客户端和代理服务器（CDN）均可以使用缓存 -
max-age = xxx：缓存的资源在xxx秒后过期 -
no-cache：不使用协商缓存 -
no-store：禁止使用缓存，每次发送请求时，都从服务器获取资源
参考链接：
