web常用的常用缓存技术有哪些此贴一网打尽

Web缓存技术
本人在博客园中看到此文，感觉对于像了解web 缓存的学者有帮助，故转载过来仅供参考：Web缓存技术缓存主要是为了提高数据的读取速度。

因为服务器和应用客户端之间存在着流量的瓶颈，所以读取大容量数据时，使用缓存来直接为客户端服务，可以减少客户端与服务器端的数据交互，从而大大提高程序的性能。

本章从缓存所在的命名空间“System.Web.Caching”开始，详细介绍框架提供的缓存类和操作方法，主要涉及简单数据的缓存、数据缓存依赖和数据库缓存依赖三个技术要点，最后演示一个完全使用缓存实现数据读取的实例。

讲解流程如图16-1所示。

：。

前端开发技术中的数据缓存与存储技巧现如今，随着互联网的迅猛发展，前端开发的重要性越来越被大家所重视。

而在前端开发中，数据缓存和存储技巧是不可或缺的一部分。

本文将介绍一些前端开发技术中的数据缓存与存储技巧，希望能对广大前端开发者有所帮助。

一、本地存储技术在前端开发中，本地存储技术是非常常见和重要的一种数据缓存方式。

目前，主要有以下三种本地存储技术：cookie、localStorage和sessionStorage。

1. CookieCookie 是存储在客户端的一小段数据，主要用于跟踪用户的会话状态。

它的最大缺点是存储容量小，只有4KB左右，同时每次请求都会将Cookie 发送到服务器，增加了网络负载。

因此，Cookie 一般用于保存用户的会话信息，如登录状态等。

2. localStoragelocalStorage 是 H5 提供的一种本地存储技术，它可以将数据以键值对的形式存储到浏览器的本地。

localStorage 的存储容量一般为5MB左右，相比 Cookie 要大得多。

它是持久性的，即使关闭了浏览器也不会消失。

因此，localStorage 适合用于存储一些较为重要的数据，如用户的个人设置、购物车信息等。

3. sessionStoragesessionStorage 与 localStorage 类似，但是它是会话性的，即仅在当前会话中有效。

当用户关闭了浏览器标签页或浏览器时，sessionStorage 中的数据将被清除。

因此，sessionStorage 适合用于存储一些临时性的数据，如表单数据。

二、网络请求与数据缓存在前端开发中，网络请求是不可避免的。

而为了提高用户体验和减轻服务器负担，数据缓存就显得非常重要。

1. 强缓存与协商缓存在进行网络请求时，浏览器会根据服务器返回的响应头判断是否使用缓存。

强缓存是通过设置响应头中的 Cache-Control 和 Expires 字段来控制的，它们分别指定了缓存的有效时间和过期时间。

前端性能优化的数据缓存策略 随着Web应用程序的复杂性不断增加，前端性能优化变得越来越重要。其中，数据缓存是提高Web应用程序性能的关键方面之一。在本文中，我将介绍一些前端性能优化中常用的数据缓存策略。

一、浏览器缓存 浏览器缓存是最常见的数据缓存策略之一。浏览器会将经常访问的资源文件如CSS、JavaScript和图像等缓存在本地，以便下次访问时能够更快地加载。通过设置适当的缓存头信息，我们可以控制资源文件的缓存行为，如缓存过期时间、缓存有效性等。

二、内存缓存 除了浏览器缓存，我们还可以利用浏览器的内存缓存来提高性能。通过将数据存储在内存中，在页面刷新或重新加载时能够更快地获取数据。在前端应用开发中，我们通常使用全局变量或者JavaScript对象来实现内存缓存。这种方式适用于较小的数据量或者需要频繁调用的数据。

三、本地存储 本地存储是一种持久化存储数据的方式，可以让Web应用程序在用户关闭浏览器后仍然能够保存相关数据。HTML5提供了两种本地存储机制：Web Storage和IndexedDB。 Web Storage包括sessionStorage和localStorage两种类型。sessionStorage仅在当前会话中有效，而localStorage则是持久化的存储方式。通过使用Web Storage，我们可以将一些用户配置信息或者临时数据存储在浏览器中，以便下次访问时能够更快地获取。

另一种本地存储机制是IndexedDB，它是一种面向对象的数据库，允许我们存储大量结构化数据。与Web Storage不同，IndexedDB提供了更强大的查询和索引功能，适用于处理大型数据集或者需要复杂查询的场景。

四、数据缓存框架 除了原生的浏览器缓存和本地存储，我们还可以使用一些前端数据缓存框架来简化数据缓存的管理。这些框架提供了更高级的缓存功能，如自动缓存过期、缓存命中率统计等。

例如，Redis是一个开源的内存数据存储系统，可以用作数据缓存。它支持各种数据结构，并且有丰富的持久化和数据复制功能。我们可以使用Redis作为数据缓存服务器，将频繁访问的数据存储在内存中，以提高访问速度。

前端开发中的数据缓存与本地存储技术数据缓存与本地存储技术在前端开发中扮演着重要的角色。

随着互联网的快速发展和移动设备的普及，用户对于网页加载速度和数据的访问效率有着越来越高的要求。

数据缓存和本地存储技术的应用，可以有效提高网页的响应速度和用户的体验。

本文将介绍前端开发中常见的数据缓存和本地存储技术，并探讨其优缺点及适用场景。

一、数据缓存技术概述在前端开发中，缓存是一项重要的技术手段，用于提高数据的访问速度和减少网络请求。

数据缓存技术可以将常用的数据存储在内存或其他存储介质中，减少对后端的请求次数。

常见的数据缓存技术包括：浏览器缓存、CDN缓存、前端框架缓存等。

1. 浏览器缓存浏览器缓存是指将网页资源存储在用户本地，下次请求时直接使用本地资源而不是向服务器发起请求。

浏览器缓存可以有效减少网络请求，提高页面加载速度。

常见的浏览器缓存有强缓存和协商缓存两种方式。

强缓存通过设置Expires或Cache-Control响应头字段来控制缓存的有效期，当缓存未过期时，浏览器直接使用缓存数据，而不发起请求。

协商缓存通过设置ETag和Last-Modified响应头字段，当缓存过期时，浏览器发送请求到服务器，由服务器判断资源是否有更新，返回304状态码表示未修改，浏览器继续使用缓存。

2. CDN缓存CDN（Content Delivery Network）是一种分布式存储、传输的加速网络。

CDN缓存技术将网页资源分布到全球各地的缓存服务器，并根据用户的地理位置，从离用户最近的一个缓存服务器获取资源。

通过CDN缓存，可以将用户请求的响应时间缩短到最小，提供稳定、高效的访问。

3. 前端框架缓存前端框架如React、Vue等也提供了相关的缓存机制。

通过虚拟DOM、Diff算法等技术手段，前端框架可以在组件更新时，仅更新需要修改的部分，避免了全量渲染，提高了页面的渲染效率。

二、本地存储技术概述本地存储技术是指将数据存储在用户设备本地，通常以键值对的形式进行存储。

前端性能优化的服务器缓存技巧在当今互联网快速发展的时代，前端性能优化成为各大网站追求的目标之一。

而服务器缓存技巧作为提升网站性能的有效方法之一，也备受前端开发人员的关注和重视。

本文将探讨一些前端性能优化中常用的服务器缓存技巧，并介绍它们的实现方式以及优缺点。

一、静态资源缓存技巧静态资源包括样式表(CSS)、脚本文件(JS)、图片等。

这些资源在前端开发中占据相当重要的地位，同时也容易成为性能瓶颈。

通过服务器缓存技巧，可以有效减少资源的请求次数，提升网站的加载速度。

1. HTTP缓存HTTP缓存是通过利用浏览器缓存和代理服务器缓存来减少资源请求次数的一种缓存技巧。

通过在HTTP响应头中设置Expires或Cache-Control字段，可以指定静态资源在客户端缓存的过期时间。

这样，在过期时间内，浏览器会直接从本地缓存中加载资源，而无需再向服务器发送请求。

2. ETag缓存ETag缓存是基于资源内容的缓存策略。

服务器在响应头中返回一个唯一的ETag标识符，该标识符是根据资源内容生成的哈希值。

当浏览器再次请求该资源时，会携带上一次请求响应头中的ETag值，并发送给服务器。

服务器比较两个ETag值，若相同，则返回304状态码，浏览器可以直接从本地缓存加载资源。

二、页面缓存技巧除了静态资源缓存外，页面缓存技巧也是提升网站性能的重要手段之一。

相比于动态生成页面，使用页面缓存可以大大减少服务器的响应时间和资源占用。

1. 页面片段缓存页面片段缓存是将页面中的某些静态部分进行缓存，动态生成的内容则实时请求。

通过缓存静态部分，可以减少每次请求的数据量和处理时间，提升网站的响应速度。

2. 页面完整缓存页面完整缓存是将整个页面缓存到服务器或者CDN节点中，并设置缓存的过期时间。

对于内容不经常更新的页面，可以采用这种缓存策略，完整缓存可以减少服务器的响应时间，并提升用户的访问体验。

三、CDN加速CDN即内容分发网络，通过将资源缓存在全球各个节点上，使得用户可以就近获取资源，提高访问速度。

web缓存机制作为前端开发⼈员，对于我们的站点或应⽤的缓存机制我们能做的似乎不多，但这些却是与我们关注的性能息息相关的部分，站点没有做任何缓存机制，我们的页⾯可能会因为资源的下载和渲染变得很慢，但⼤家都知道去找前端去解决页⾯慢的问题⽽不会去找服务端的开发⼈员。

因此，了解相关的缓存机制和充分的利⽤它似乎就变得必不可少。

web端的缓存机制其实有多种，我在这⾥只是学习和整理了以浏览器为载体的HTTP缓存机制，看看它是如何⼯作的。

⽂章⽬录：⼀、web缓存的种类1.1 数据库缓存 我们可能听说过memcached，它就是⼀种数据库层⾯的缓存⽅案。

数据库缓存是指，当web应⽤的关系⽐较复杂，数据库中的表很多的时候，如果频繁进⾏数据库查询，很容易导致数据库不堪重荷。

为了提供查询的性能，将查询后的数据放到内存中进⾏缓存，下次查询时，直接从内存缓存直接返回，提供响应效率。

1.2 CDN缓存 CDN缓存⼀般是由⽹站管理员⾃⼰部署，为了让他们的⽹站更容易扩展并获得更好的性能。

通常情况下，浏览器先向CDN⽹关发起Web请求，⽹关服务器后⾯对应着⼀台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。

从浏览器⾓度来看，整个CDN就是⼀个源服务器，从这个层⾯来说，浏览器和服务器之间的缓存机制，在这种架构下同样适⽤。

1.3 代理服务器缓存 代理服务器是浏览器和源服务器之间的中间服务器，浏览器先向这个中间服务器发起Web请求，经过处理后（⽐如权限验证，缓存匹配等），再将请求转发到源服务器。

代理服务器缓存的运作原理跟浏览器的运作原理差不多，只是规模更⼤。

1.4 浏览器缓存 每个浏览器都实现了 HTTP 缓存，我们通过浏览器使⽤HTTP协议与服务器交互的时候，浏览器就会根据⼀套与服务器约定的规则进⾏缓存⼯作。

1.5 应⽤层缓存 应⽤层缓存是指我们在代码层⾯上做的缓存。

通过代码逻辑，把曾经请求过的数据或资源等，缓存起来，再次需要数据时通过逻辑上的处理选择可⽤的缓存的数据。

前端开发中常见的浏览器缓存处理方法前端开发中，浏览器缓存是一个重要的优化点。

浏览器缓存可以减少网络请求，提高页面加载速度，提供更好的用户体验。

本文将介绍一些常见的浏览器缓存处理方法，帮助开发者更好地利用缓存。

一、缓存的基本原理在了解浏览器缓存处理方法前，我们需要了解缓存的基本原理。

当我们第一次访问一个网页时，浏览器会将该网页及相关资源（如样式表、脚本文件、图片等）的副本存储在本地缓存中。

当再次访问该网页时，浏览器会检查本地缓存是否有该资源的副本，如果有，就直接从缓存中加载资源，而不是发起网络请求。

这样可以大大提高页面加载速度。

二、强制缓存强制缓存是浏览器缓存处理中的一种常见方法。

当服务器响应头中包含了缓存相关的字段时，浏览器会根据这些字段判断是否使用强制缓存。

常见的强制缓存字段有两个：Expires和Cache-Control。

1. Expires字段Expires字段是http1.0的产物，它的值是一个表示时间的GMT格式字符串。

当浏览器响应头中的Expires字段大于当前时间时，浏览器将直接从缓存中加载资源。

然而，Expires字段有一个问题，它依赖于客户端和服务器的时间一致性，如果客户端和服务器的时间不一致，就会导致缓存失效。

因此，这个字段在http1.1中已经不再推荐使用。

2. Cache-Control字段Cache-Control字段是http1.1中引入的，它提供了更多的缓存控制选项。

常见的选项有：- no-cache：强制每次都向服务器发送请求，不使用缓存。

- no-store：不缓存服务器的任何响应。

- max-age：设置缓存的最大生存时间，单位是秒。

例如，max-age=3600表示资源在缓存中可以存活3600秒。

- public：表示该资源可以被所有用户缓存。

- private：表示该资源只能被特定用户缓存，如浏览器的私有缓存。

- must-revalidate：表示必须向服务器验证缓存是否有效。

添加缓存之后，优化的效果很明显 , 任务耗时从原来的 40 分钟减少到了 5~10 分钟。

上面这个示例就是典型的「对象缓存」，它是本地缓存最常见的应用场景。

相比页面缓存，它的粒度更细、更灵活，常用来缓存很少变化的数据，比如：全局配置、状态已完结的订单等，用于提升整体的查询速度。

3. 刷新策略为了让客户端以最快的速度读取配置，本地缓存使用了Guava，整体架构如下图所示：那本地缓存是如何更新的呢？有两种机制：客户端启动定时任务，从配置中心拉取数据。

当配置中心有数据变化时，主动推送给客户端。

这里我并没有使用 websocket，而是使用了 RocketMQ Remoting 通讯框架。

后来我阅读了Soul网关的源码，它的本地缓存更新机制如下图所示，共支持 3 种策略：▍ zookeeper watch 机制soul-admin 在启动的时候，会将数据全量写入 zookeeper，后续数据发生变更时，会增量更新 zookeeper 的节点。

与此同时，soul-web 会监听配置信息的节点，一旦有信息变更时，会更新本地缓存。

▍ websocket 机制websocket 和 zookeeper 机制有点类似，当网关与 admin 首次建立好 websocket 连接时，admin 会推送一次全量数据，后续如果配置数据发生变更，则将增量数据通过 websocket 主动推送给 soul-web。

▍ http 长轮询机制http 请求到达服务端后，并不是马上响应，而是利用 Servlet 3.0 的异步机制响应数据。

当配置发生变化时，服务端会挨个移除队列中的长轮询请求，告知是哪个 Group 的数据发生了变更，网关收到响应后，再次请求该Group 的配置数据。

不知道发现了没？pull 模式必不可少增量推送大同小异长轮询是一个有意思的话题 , 这种模式在 RocketMQ 的消费者模型也同样被使用，接近准实时，并且可以减少服务端的压力。

使用前端数据缓存技术提高网页性能随着互联网技术的发展，网页已经成为人们获取信息的主要途径之一。

然而，随着网页内容的增多和复杂化，网页的加载速度也成为了一个关键的问题。

要提高网页性能，前端数据缓存技术是一种非常有效的方法。

一、理解前端数据缓存技术的重要性在网页加载过程中，最耗时的环节往往是从服务器获取数据的过程。

而前端数据缓存技术可以将一部分数据保存在浏览器端，避免了每次都向服务器发送请求获取数据，从而减少了网络延迟和服务器压力，提高了网页的加载速度。

因此，使用前端数据缓存技术对于提高网页性能至关重要。

二、常用的前端数据缓存技术1. LocalStorageLocalStorage是HTML5提供的一种本地存储方式，它可以将数据以键值对的形式保存在浏览器端。

通过使用LocalStorage，网页可以将一些常用的数据保存在浏览器端，下次加载同样的网页时可以直接从LocalStorage中读取数据，避免了网络请求的过程，提高了加载速度。

2. IndexedDBIndexedDB是一种更强大的浏览器端数据库存储技术，通过使用IndexedDB，网页可以将大量数据保存在浏览器端，并可以进行复杂的查询和索引操作。

使用IndexedDB可以将一些静态数据或者用户个性化设置等数据保存在浏览器端，减少了每次加载时的数据请求，提高了网页的响应速度。

3. Service WorkerService Worker是一种在浏览器后台运行的脚本，它可以拦截和处理网页的网络请求。

通过使用Service Worker，网页可以将部分请求的数据存储在浏览器端的缓存中，下次加载同样的请求时可以直接从缓存中获取数据，而不必再次向服务器发送请求，从而减少了网络耗时。

三、前端数据缓存技术的应用场景1. 静态资源缓存网页中的静态资源，如CSS文件、JavaScript文件、图片等，在每次请求时都会被下载。

但是，这些静态资源往往是固定不变的，因此可以使用前端数据缓存技术将它们保存在浏览器端，在下次加载同样的网页时可以直接从缓存中获取，避免了重复下载，提高了网页的加载速度。

前端数据缓存技术在提高网页性能方面起着至关重要的作用。

随着互联网的不断发展，人们对网页加载速度的要求越来越高，因此，通过合理利用前端数据缓存技术，可以有效地提升网页的加载速度和用户体验。

一、前端数据缓存技术的重要性在传统的网页加载过程中，每一次用户请求都需要向服务器发送请求，服务器再返回相应的数据，这种实时的交互方式无疑会降低网页的加载速度。

而使用前端数据缓存技术可以将一些静态的数据缓存在用户的本地，当用户再次访问网页时，可以直接从本地获取数据，减少与服务器的交互次数，从而提高网页的加载速度。

二、常见的前端数据缓存技术1. CookieCookie是最早也是最常用的前端数据缓存技术之一。

通过在用户浏览器中存储少量的数据，网页可以在后续的请求中直接使用这些数据，不必再次从服务器获取，从而提高网页的加载速度。

不过，Cookie的存储容量有限，并且每次请求都会携带Cookie的数据，对于大量数据的存储来说并不适用。

2. LocalStorage和SessionStorageLocalStorage和SessionStorage是HTML5提供的两种前端数据存储方式。

它们可以在用户的浏览器中长期存储数据，并且在后续的访问中可以直接从本地获取，无需再次向服务器发起请求。

LocalStorage适用于长期存储的数据，而SessionStorage适用于会话级别的临时数据。

3. IndexedDBIndexedDB是浏览器提供的一种数据库存储方式，它可以存储大量的结构化数据，并支持复杂的查询操作。

使用IndexedDB可以更有效地管理前端数据，从而提高网页的性能和用户体验。

三、前端数据缓存技术的应用场景1. 静态资源缓存网页中的静态资源，如图片、CSS、JavaScript等，可以通过前端数据缓存技术进行缓存。

当用户再次访问网页时，这些静态资源可以直接从本地获取，减少了对服务器的请求，从而提高了网页的加载速度。

JavaScript中的本地存储和缓存技术介绍随着互联网的快速发展，Web应用程序的需求也越来越复杂。

为了提高用户体验和减少网络传输的开销，JavaScript引入了本地存储和缓存技术。

本文将介绍JavaScript中的本地存储和缓存技术，以及它们在Web应用程序中的应用。

一、本地存储技术1. CookieCookie是一种最早被广泛使用的本地存储技术。

它是由服务器发送给浏览器的小型文本文件，存储在用户的计算机上。

Cookie可以存储有关用户的信息，例如登录凭证、用户首选项等。

但是，Cookie的大小有限，通常只能存储几KB的数据。

2. Web StorageWeb Storage是HTML5引入的新特性，提供了更强大的本地存储能力。

它分为两种类型：sessionStorage和localStorage。

sessionStorage用于存储会话期间的数据，而localStorage则是持久化存储数据。

Web Storage使用键值对的形式存储数据，可以通过JavaScript API进行访问。

它具有较大的存储容量，通常可以存储几MB的数据。

但是，需要注意的是，Web Storage只能存储字符串类型的数据，如果需要存储其他类型的数据，需要进行序列化和反序列化的操作。

3. IndexedDBIndexedDB是一种高级的本地存储技术，用于存储大量结构化数据。

它提供了一个类似于数据库的API，可以进行复杂的查询和索引操作。

IndexedDB的存储容量通常比Web Storage更大，可以存储数十MB甚至更多的数据。

IndexedDB的使用相对较复杂，需要编写一些异步代码来处理数据库操作。

但是，它提供了更灵活和强大的功能，适用于需要存储大量数据的应用程序。

二、缓存技术1. HTTP缓存HTTP缓存是Web开发中最常用的缓存技术之一。

它利用HTTP协议中的缓存机制，将已经获取的资源保存在本地，下次请求时直接使用本地缓存的资源，减少网络传输的开销。

常见缓存方案缓存是提高系统性能的重要手段之一，通过预先加载数据或计算结果，可以减少系统对繁重和耗时的操作的依赖。

在现代计算机系统中，有许多常见的缓存方案可供选择。

本文将讨论一些常见的缓存方案，包括内存缓存、数据库缓存和分布式缓存。

一、内存缓存内存缓存是最常见的缓存方案之一，它利用系统的内存资源来存储经常使用的数据。

通过将数据存储在内存中，可以大大提高访问速度，从而加快系统的响应时间。

内存缓存一般使用键值对的方式存储数据，通过键来快速查找和获取对应的值。

常见的内存缓存实现包括Memcached和Redis。

1. MemcachedMemcached是一个高性能的内存对象缓存系统，它可以用来存储任意类型的数据。

Memcached将数据存储在内存中，并使用哈希表来快速查找数据。

它支持分布式架构，可以在多台服务器上部署，实现数据的分布式存储。

由于其高效的性能和可扩展性，Memcached被广泛应用于大规模网站和应用程序中。

2. RedisRedis是一个开源的内存数据结构存储系统，它支持多种数据类型，包括字符串、哈希、列表和有序集合等。

Redis也是基于键值对的存储方式，并提供了丰富的命令集合来操作数据。

与Memcached相比，Redis 具有更丰富的功能，例如支持持久化、事务和发布订阅等特性。

因此，Redis在许多场景下被用作高性能缓存解决方案。

二、数据库缓存数据库缓存是指在应用程序和数据库之间增加一个中间层，用来缓存数据库查询结果。

通过将热数据存储在数据库缓存中，可以大大减少对数据库的访问次数，提高系统的响应速度和并发能力。

常见的数据库缓存实现包括Query Cache和第三方缓存组件。

1. Query CacheQuery Cache是MySQL数据库自带的缓存功能，它可以缓存查询语句的结果集。

当应用程序执行相同的查询语句时，MySQL会首先检查Query Cache中是否存在该查询的缓存结果，如果存在则直接返回缓存结果，而不会再次执行查询。

前端本地缓存的方法前端本地缓存是指将数据存储在客户端，以便在后续的页面加载中能够更快地访问这些数据。

以下是一些常见的前端本地缓存方法：1.Cookies（Cookie）：Cookies是存储在用户计算机上的小型文本文件，它们包含有关用户和网站的信息。

通过设置`document.cookie`，可以在前端存储少量数据，并在后续请求中将这些数据发送到服务器。

```javascript//设置Cookiedocument.cookie="username=John Doe;expires=Thu,18Dec202312:00:00UTC; path=/";//读取Cookievar username=document.cookie;```2.Web Storage（localStorage和sessionStorage）：Web Storage提供了本地存储的简单键值对（key-value）方式，分为localStorage和sessionStorage。

它们分别具有长期存储和会话期间存储的特性。

```javascript//使用localStoragelocalStorage.setItem("username","John Doe");var username=localStorage.getItem("username");//使用sessionStoragesessionStorage.setItem("token","abc123");var token=sessionStorage.getItem("token");```3.IndexedDB：IndexedDB是一个低级API，提供了一个在浏览器中存储大量结构化数据的方式。

它是一个事务型数据库系统，相比于Web Storage，IndexedDB更适合存储大量数据。

前端开发中的网络缓存技术介绍网络缓存技术是前端开发中非常重要的一部分，可以提高网页的加载速度，优化用户体验。

本文将对网络缓存技术进行介绍，并讨论一些常见的缓存策略。

首先，我们来了解一下什么是网络缓存。

简单来说，网络缓存就是将一些经常使用的资源保存在本地，以减少后续请求这些资源的时间和带宽消耗。

例如，当我们第一次访问一个网页时，浏览器会将页面的一些静态资源如图片、CSS、JavaScript等文件保存在本地缓存中，当再次请求同一个网页时，浏览器会优先从缓存中获取这些资源，从而加快页面的加载速度。

为了实现网络缓存，常见的缓存策略包括强缓存和协商缓存。

强缓存是指在本地缓存中保存资源的有效期，当请求一个资源时，如果该资源的有效期仍在，浏览器就直接从本地缓存中获取资源，不发起网络请求。

而协商缓存则是通过向服务器发送请求，验证资源是否有更新。

如果服务器返回的响应中包含了缓存验证信息，并且验证通过，则浏览器继续使用本地缓存的资源，否则重新下载资源。

在实际开发中，我们可以使用HTTP协议中的一些头部字段来控制缓存策略。

例如，"Cache-Control"头字段用于设置强缓存的策略，常见的取值有"max-age"用于设置最大的缓存有效期，"no-cache"用于指示不使用强缓存等。

而"ETag"和"Last-Modified"头字段则用于实现协商缓存。

"ETag"是一个由服务器生成的唯一标识字符串，用于表示资源的特定版本，当资源发生变化时，ETag也会相应地改变。

而"Last-Modified"则是表示资源最后修改时间的头字段。

除了强缓存和协商缓存外，还有一些其他的缓存技术值得我们关注。

例如，Service Worker是一种运行在浏览器后台的脚本，可以拦截并处理网络请求，以实现离线缓存和推送通知等功能。