Web前端面试题分享—协商缓存和强缓存区别

协商缓存和强缓存的区别

在Web前端开发中，缓存机制是提高网页加载速度和用户体验的重要手段。其中，协商缓存和强缓存是两种常见的缓存策略，它们各自有着不同的工作原理和应用场景。

一、强缓存

强缓存是客户端直接查看本地的缓存文件是否过期，如果没有过期就直接取用。这种缓存策略主要依赖于响应头上的两个字段：expires和cache-control。

expires：这是一个绝对时间，表示资源在何时过期。当客户端请求资源时，会检查该资源的expires时间，如果当前时间在expires时间之前，则直接使用缓存中的资源，不再向服务器发送请求。
cache-control：这是一个相对时间，用于指定资源在本地缓存的有效期。常见的值有max-age，表示资源从服务器获取后可以在本地缓存的最大时间（以秒为单位）。在有效期内，客户端会直接使用缓存中的资源。

二、协商缓存

协商缓存指的是客户端去询问服务器对应的文件是否有更新，如果有更新才会重新请求。这种缓存策略主要依赖于响应头上的两个字段：last-modified和etag。

last-modified：表示资源最后修改的时间。当客户端请求资源时，会携带该资源的last-modified时间到服务器进行比对。如果服务器上的资源在last-modified时间之后没有发生过修改，则服务器会返回304状态码，告诉客户端可以使用缓存中的资源。
etag：是一个内容变更的标识，通常是一个哈希值。当资源内容发生变化时，etag值也会发生变化。客户端请求资源时，会携带该资源的etag值到服务器进行比对。如果服务器上的资源etag值与客户端携带的etag值相同，则服务器会返回304状态码，表示资源未发生变化，客户端可以继续使用缓存中的资源。

三、协商缓存和强缓存的区别

作用对象：强制缓存和协商缓存都针对静态资源，如图片、CSS、JavaScript等。
触发顺序：强制缓存在前，协商缓存在后。当客户端请求资源时，会首先检查强制缓存是否有效。如果强制缓存无效（即资源已过期），则会进一步触发协商缓存机制。
判断依据：强制缓存主要依赖于expires和cache-control字段来判断资源是否过期；而协商缓存则依赖于last-modified和etag字段来判断资源是否有更新。
资源获取：在强制缓存有效期内，客户端会直接使用缓存中的资源，不会向服务器发送请求。而在协商缓存中，即使资源未发生变化，客户端也会向服务器发送请求进行比对，只是服务器会返回304状态码告诉客户端可以使用缓存中的资源。

四、实际应用

在实际开发中，我们通常会结合使用强制缓存和协商缓存来提高网页的加载速度和用户体验。同时，为了避免用户获取到过时的资源，我们也会在静态文件的URL后面添加一个时间戳或哈希值，以阻止浏览器使用旧的缓存。

（注：以上图片为缓存机制示意图，展示了浏览器在请求资源时如何根据缓存策略进行判断和处理的流程。）

综上所述，协商缓存和强缓存是Web前端开发中两种重要的缓存策略。它们各自有着不同的工作原理和应用场景，但共同的目标是提高网页的加载速度和用户体验。在实际开发中，我们需要根据具体的需求和场景来选择合适的缓存策略，并结合使用以达到最佳的效果。

热门标签