静态页面部署到GiteePages上更新不及时问题

项目场景：

做一个小的移动端的静态页面，部署到GiteePages上，大体就是一个主页面，里面超链接到另外一个页面

---

问题描述

刚开始第一次部署的时候没什么问题，但是在后来更新的时候发现了不对劲，页面还是显示之前的内容，也就是没达到更新的效果。PC端Ctrl+F5强制刷新后才能更新。在检查gitee仓库里面代码正确之后，想到可能是浏览器缓存搞的鬼。

---

浏览器缓存（强制缓存和协商缓存）

强制缓存就是直接从浏览器缓存查找该结果，并根据结果的缓存规则来决定是否使用该缓存的过程。

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，有服务器根据缓存标识决定是否使用缓存的过程。

---

解决方案：

通过在html里面添加标签和给js、css文件增加版本号的方式让浏览器重新加载。
在head内增加标签如下，让浏览器不使用强制缓存：

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

在引用链接上增加版本号

    <link rel="stylesheet" href="css/home.css?v=1.0.3">
    <script src="js/home.js?v=1.0.3"></script>

这里面的“?v=1.0.3”并不对链接产生什么影响，还是照常解析，只是一个标记，当更改的时候，浏览器会认为和缓存里面的不一样，这样它就会重新加载。

---

解决主页更新之后又产生了一个小问题

主页里面我写了一个链接，指向另外一个页面。

<li><a href="myModuleElement-ui.html">element-ui组件库</a></li>

在我更新上面指向的页面的时候遇到了之前那样的情况，页面也无法更新。我按照之前的做法，加入标签，添加版本号也无济于事。一顿排查之后，我才想起来会不会跟主页有关系，主页加载了之前的缓存，所以这里链接到的页面没有重新加载。这时我又更改了主页的版本号，问题就解决啦。