前端页面缓存技术

A. web前端缓存机制

前端缓存森携机制有多种，如浏览器缓存、CDN缓存、DNS缓存、代理服务器缓存等。

CDN全称是Content Delivery Network，即内容分发网络。CDN的原理是改世将资源存放在各地的缓存服务器上，当用户请求资源时，从就近的服务器上返回缓存的资源，而不需要每次都从源服务器获取，减轻源服务器的压力，又能提升用户的访问速度。

浏览器可以将用户请求的资源进行缓存，存放在本地。浏览器缓存一般通过请求头来设置。
与浏览器缓存有关的头部有：

浏览器会将服务器的域名与IP地址的映射缓存在本地，这样用户在访问网站时，不用每次都去查询DNS映射表。

在浏览器和服务器之间架设的一个服务器 ，这个代理服务器会帮助浏览器去请求页面，然后将页面进行处理和压缩(例如压缩图片和文件)，使页面变小，再传输给浏览器。大部分代理服务器核春肢都有缓存的功能，如果浏览器所请求的文件在它本机中存在且是最新的，就不需要再从源服务器请求数据，提高了浏览速度。

在浏览某个页面时，浏览器会判断页面的关联内容，进行预加载。用户在浏览A页面时，就加载好B页面，这样当用户去访问B页面时，B页面很快就出来，提升了用户体验。但这个机制有一定的缺陷，就是预判不一定准确，可能会造成流量和资源的浪费。

B. 前端SPA应用缓存问题解决与实践

要解决问题，有先决的理论知识先要了解

分两种：

这种机制下，浏览器会先找本地缓存，命中则不会从服务器请求，并返回200状态码，且附有 disk cache 或者 memory cache 字样

这种机制，强缓存失效后，浏览器会携带缓存标识向服务器发起请求，服务器根据标识决定是否使用缓存

首先一点，就是 “浏览器会携带缓存标识” ,这个标识是什么，有两种

好，原理讲了，现在凡是用到nginx的，基本上自动都会实现了ETag和Last-Modified，也就是说，这部分实现机制，已经是默认的！不需要你另加处理。

好，问题来了，如何处理前端SPA应用的缓存问题呢？

现在的SPA要么Vue要么React要么Angular

默认情况下，我们会看到：

即所有资源第一次进，强缓存，第二次进，无意外情况下，会执行协商缓存。

之所以会出现SPA缓存问题，在于index.html是304，那么客户端读取到的，有可能是本地的Not Modified，那么继续下去，读的依旧是本地的disk cache

如何解决问题呢？

这里有个特性，SPA通过webpack打包，一般默认会带有contenthash值，即当对应文件有改动，这个contenthash值才会改变，进而改变打包出来的文件名，意味着 只有改变了的文件，文件名才会变，没有改变的文件是不会变的

如果需要对特殊的文件特殊处理，比如文字类型的文件设置更大的缓存时间或者别的，可以参考上述语法单独加映射

修改后， service nginx reload 一下，浏览器可以看到差别：

index.html一直是200，且从服务器直接读取，而所有其他的静态文件，均从memory or disk cache读取

好，那么接下来如果有更新，可以想象，变化的文件有

而由于index.html一直是请求服务器的，那么得到的入口js也必然是最新的，意味着如果没改动的，走本地强缓存，有改动的，会请求最新的，之后请求会走本地强缓存。

Problem solved.

解决前端SPA缓存问题：

C. 前端http请求细节——Cache-Control（缓存机制）

请求和响应中的 Cache-Control 指令并不完全相同，具体可以查看 这里 ，包括指令的具体意思，这里不过多赘述。（默认值：private）

浏览器的缓存机制是根据 HTTP 报文的缓存标识进行的，浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果。
浏览器缓存策略分为两种：强制缓存和协商缓存。

强制缓存不会向服务器发送请求，直接从缓存中读取资源，可以看到请求返回的状态码都是200，并且 Size 代表该缓存的位置。

浏览器读取缓存的顺序为memory –> disk。

三级缓存原理 (访问缓存优先级)：

在浏览器中，浏览器会在js，字体，图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

为什么CSS会放在硬盘缓存中？
因为CSS文件加载一次就可渲染出来,我们不会频繁读取它,所以它不适合缓存到内存中,但是js之类的脚本却随时可能会执行,如果脚本在磁盘当中,我们在执行脚本的时候需要从磁盘取到内存中来,这样IO开销就很大了,有可能导致浏览器失去响应。

若服务器的资源最后被修改时间 > If-Modified-Since的字段值
则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件

If-None-Match 的字段值 = 该资源在服务器的Etag值
一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。

ETag 和 Last-Modified 区别

参考链接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252

D. 【源码】微前端qiankun源码阅读(3)：预加载、缓存和通信

【微前端】qiankun源码阅读(1)：Demo与single-spa流程
【微前端】qiankun源慧消码阅读(2)：加载子应用与沙箱隔离

通过前面的两篇可以大概了解qiankun的运行，其中可能会有些疑问：一个主应用有多个子应用，如果每次都在切换子应用时才去加载对应子应用的资源，那切换时的体验会比较差。为此，qiankun提供了预加载功能，可以看到在start中调用了 doPrefetchStrategy :

去到 src/prefetch.ts 中查看 doPrefetchStrategy ，可以看到其默认预加载策略是 prefetchAfterFirstMounted ，也就是等当前子应用加巧数载完毕后，再去预加载其他子应用。 prefetchAfterFirstMounted 很简单，就是在 requestIdleCallback 中调用我们之前讲到的 importEntry 去加载每个子应用。

requestIdleCallback 是一个相对新的API，可以用它来执行一些低优先级的任务，它会在浏览器空闲的时候才去执行，从而避免影响当前子应用的加载。

另外有个问题是，如果我们每次切换应用都去 importEntry 重新加载资源，前宽知那不好。可以将资源保存起来。
这里其实也是 importEntry 做好了， importEntry 会将请求到的资源保存在 embedHTMLCache 变量中。

qiankun中的通信很简单，在 initGlobalState API文档 可以查看其使用。
这里源码在 src/globalState.ts 中。各种通信方式在微前端框架里同样适用，没啥好看。

qiankun框架的源码阅读暂时先这样，希望以后有应用场景可以使用一下这个框架。

E. 能用JS或者前端的什么方法实现清除浏览器缓存吗

可以用JS实现清除浏览器缓存，解决方法如下：

1、在静态页面也就是以.html，.jsp，.aspx，.php结尾的文件中在<dead></head>中加入以下代码。

注意事项：

JavaScriptJavaScript基于对象和事件驱动并具有相对安全性的客户端脚本语言。也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。