MeterSphere 每次新发布后，在社区支持群里都会有用户反馈升级之后页面出现空白，或者菜单显示不全，有经验的用户一般会通过执行刷新浏览器或清除浏览器缓存的操作来确认是否和缓存有关。那么浏览器缓存导致存放了哪些内容，为什么手动强制刷新或清除浏览器缓存之后可以正常显示和访问，本文将一探究竟。

一、浏览器缓存机制 {#heading-1}

简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。该方式有利于提高应用程序的性能，避免频繁地访问数据库或其他外部资源，同时也可以降低系统的负载。常见浏览器缓存存放信息：应用缓存（部分业务方法、数据供前端调用展示）、页面缓存（如图片、样式表css、js脚本等文件，可以提高 web 页面加载速度）、代理服务器缓存（鉴权信息等）、网关缓存（负载均衡）。

浏览器的缓存主要遵循 http 缓存机制，主要分为两种：

（1）强缓存

强缓存是代表浏览器进行一次请求后，把请求的文件放在内存或者硬盘中，有的时候我们会在状态码中看到 from memory cache或者from disk cache，这时候其实代表命中了强缓存，此时并没有发生浏览器发送请求的行为。

memory cache：把资源缓存到内存中，当进程（一个浏览器标签页相当于一个进程）退出时，内存中的数据会被清空，下次访问需要执行其它缓存策略。
disk cache：把资源缓存在磁盘中，进程退出时不受影响，下次访问可以继续执行本次缓存策略。

强缓存实现方式：Pragma,Expires,Cache-Control。

浏览器在请求资源时会先检查缓存是否过期，如果没有过期，则直接从缓存中获取资源，不发送请求到服务器。只有当缓存过期时，浏览器才会发送请求到服务器，并在响应中带上新的资源。

（2）协商缓存

当强缓存过期后，浏览器蒋发送请求到服务器，这时候服务器并不会直接去拿新的资源，而是要检查请求头部是否有缓存标识If-Modified-Since或者If-None-Match，服务器会根据这些信息判断资源是否发生了变化，如果没有变化，则返回 304 Not Modified，告诉浏览器直接使用缓存中的资源。

协商缓存实现方式：Last-Modified/If-Modified-Since,Etag/If-None-Match。

刷新行为对缓存的影响

正常操作 : 地址栏输入url 、跳转链接、前进后退等，两种缓存都有效，即优先检查强缓存，然后协商缓存，如果没有缓存则从服务器获取。
手动刷新：F5、点击刷新按钮、右击菜单刷新，仅协商缓存有效，即只会刷新当前页面的内容，不会刷新整个页面。它会根据缓存机制来判断是否需要获取最新的资源，如果缓存有效，则直接使用缓存中的资源，否则会发送请求到服务器。
强制刷新：Ctrl+F5 或 Command+Shift+R，两种缓存策略都无效，重新请求资源，即忽略浏览器的缓存机制，直接向服务器发送请求，并获取最新的资源，即使资源在缓存中仍然有效，浏览器也会重新下载资源并替换缓存中的旧版本。

二、MeterSphere 常见浏览器缓存问题及分析 {#heading-2}

MeterSphere 常见浏览器缓存信息包括：

用户登录鉴权信息
测试跟踪：页面前端渲染、图片、脚本步骤嵌套样式文件css,js文件等资源文件
接口测试：页面前端渲染、图片、脚本步骤嵌套样式文件css,js文件等资源文件
性能测试：页面前端渲染、图片、脚本步骤嵌套样式文件css,js文件等资源文件
UI 测试：页面前端渲染、图片、脚本步骤嵌套样式文件css,js文件等资源文件

可以看出MeterSphere 浏览器缓存主要为页面缓存及代理服务器缓存信息，不会存放业务数据信息。通常遇到页面功能菜单缺失、页面空白等情况优先考虑是因为缓存信息未更新导致，可以通过强制刷新缓存方式来解决问题。

|----------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------| | 现象 | 原因 | | 页面功能与最新的版本功能不一致、资源展示不全，例如： * 修改用户权限后没有生效，需要退出重新登录获取最新权限 * MeterSphere 升级版本后，首次登录页面空白 * 重启环境后菜单显示不全 | （1）权限变动影响导致前端鉴权失败。（2）部分页面显示不全可能与静态资源缓存也有关系，因为版本升级后静态资源的 hash 会变，导致访问旧的资源 hash 访问不到。（v2.5.0之后版本已处理，升级之后不再需要清理缓存） | | 页面跳转空白、无法跳转、按钮点击无反应，例如：接口自动化场景等调试脚本时，某些场景无法点击调试按钮，并且查看后台日志无报错信息打印。 | 一般是用户一直没有刷新或关闭过浏览器页面，在升级之后由于逻辑更改，可能存在 A 页面访问 B 页面的 C 功能，但是最新版本 C 功能已经下线或者改动了，但由于 A 页面的JS资源被缓存了，导致还是以旧的逻辑去访问 B 页面的 C 功能，这时候就会报错，现象就是页面某些操作没有反应。 |