JavaScript 页面缓存
1.前言
- 由来：默认环境中，当浏览器重复访问一个资源时，为节省资源与性能，浏览器将其缓存，后续的请求不再从服务器下载该资源，而是直接从本地缓存中读取
- 副作用：当服务器资源更新时，浏览器无法得知，依旧加载的是旧资源
- 缓存控制：服务端告知浏览器是否缓存，缓存多久，客户端可以自主清除缓存
2.服务端
- 通过设置响应头来控制资源的缓存时效（max-age表示最多缓存多少秒）
//设置缓存时长（其余代码略）
res.setHeader("Cache-Control","max-age=7200")
- 如果不设置，则此资源不会被缓存
3.手动清除缓存
- F12->网络->选中请求->清除缓存
- 页面强制重载
3.动态资源链接
- 原理：当一个请求路径不变，但是携带的参数发生变化时，浏览器视为新请求，不读取缓存数据
//在资源链接后面添加版本号(v=100)，修改通过这个版本号(v=101)，强制客户端更新资源
<script src="./index.js?v=100"></script>
- 全局控制：对资源链接的版本号进行动态拼接，只要修改系统版本号，所有资源强制升级
4.离线浏览
- 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
- manifest 的技术已被 web 标准废弃，不再推荐使用此功能