前端缓存

什么是缓存

首先，我们从维基百科来了解一下缓存的基本概念。

高速缓存，简称缓存，原始意义是指访问速度比一般随机存取存储器（RAM）快的一种RAM，通常它不像系统主存那样使用DRAM技术，而使用昂贵但较快速的SRAM技术。

维基百科中的概念扩充：

如今缓存的概念已被扩充，不仅在CPU和主内存之间有Cache，而且在内存和硬盘之间也有Cache（磁盘缓存），乃至在硬盘与网络之间也有某种意义上的Cache──称为Internet临时文件夹或网络内容缓存等。凡是位于速度相差较大的两种硬件之间，用于协调两者数据传输速度差异的结构，均可称之为Cache。

显而易见，随着计算机和相关技术的发展，缓存的概念不局限于我们本科基础课程讲述的CPU中的缓存了，还有Internet临时文件夹或网络内容缓存。

对于“缓存”的理解，我认为它实际上是对一小部分数据内容的复制，存储在一个临时的数据存储点，以提高CPU计算、网络请求等服务的效率。

在这篇文章中，我希望与大家一起深入讨论前端缓存👇👇👇。

什么又是前端缓存

通过存储已请求的资源的副本，并在将来的请求中重复使用这些副本，从而减少网络传输时间和加载速度，提高页面加载性能。

分类

前端缓存主要分为两个大类：浏览器缓存和HTTP缓存。

浏览器缓存：浏览器提供的一种缓存机制，可以将服务器资源和网页访问产生的临时数据缓存到内存或本地，提升客户端的加载速度。

页面级缓存： 浏览器可以缓存整个页面，当用户再次访问相同页面时，浏览器直接从本地缓存加载页面，而不需要再次从服务器请求。 资源级缓存： 浏览器还可以缓存各种静态资源，如图片、样式表、脚本等。这意味着这些资源在后续访问中可以被直接加载，而不必重新下载。

举个例子： 图片资源的预加载：通过网络线程

HTTP缓存：是产生于客户端与服务器之间通信的一种缓存，利用这一缓存可以提升服务器资源的重复利用率，在有效的时间内不必每次都向服务器请求相同的资源，大大减少服务器的压力

协商缓存： 通过使用Last-Modified和If-Modified-Since、ETag和If-None-Match等HTTP头，服务器可以告诉浏览器资源是否已经被修改。如果资源没有被修改，服务器可以返回304 Not Modified，让浏览器使用本地缓存。 强制缓存： 通过使用Cache-Control和Expires等HTTP头，服务器可以指示浏览器在一定时间内使用本地缓存，而不必再次请求服务器。

好处与注意事项

前端缓存的好处包括：

减少加载时间： 通过减少对服务器的请求次数，前端缓存可以显著减少页面加载时间，提高用户体验。 降低服务器负载： 缓存可以减轻服务器的负担，因为部分资源可以直接从本地获取，而不需要服务器重新生成或提供。 减少网络流量： 通过减少需要传输的数据量，前端缓存可以降低网络流量，尤其对于移动设备和慢速网络连接的用户而言更为重要。

当然，前端缓存的使用需要谨慎，确保缓存的数据在有效期内仍然有效，并在更新时能够正确地刷新。不适当的缓存设置可能导致用户看到过期或不准确的数据。