网站建设相关图片,福建银瑞建设工程有限公司网站,做电子商务网站的意义,user pro wordpress前端缓存 一、前言二、web缓存分类1. HTTP缓存#xff1a;2. 浏览器缓存#xff1a;3. Service Worker#xff1a;4. Web Storage缓存#xff1a;5. 内存缓存#xff1a; 三、http缓存详解1、http缓存类型a. 基于有效时间的缓存控制#xff1a;b. 基于资源标识的缓存2. 浏览器缓存3. Service Worker4. Web Storage缓存5. 内存缓存 三、http缓存详解1、http缓存类型a. 基于有效时间的缓存控制b. 基于资源标识的缓存c. 基于缓存存储位置的分类d. 基于缓存位置的请求方式 2. HTTP 缓存原理3. HTTP 缓存策略4. HTTP 缓存的优点和缺点a、优点b、缺点 四、强制缓存 和 协商缓存详解1、强制缓存a、优点b、缺点c、使用场景d、使用原理e、基于Expires字段实现的强缓存f 、基于 Cache-Control 字段实现的强缓存代替Expires的强缓存实现方法 2. 协商缓存a、优点b、缺点c、使用场景d、使用原理e、基于Last-Modified / If-Modified-Since 的协商缓存f、基于ETag的协商缓存 一、前言
前端缓存是Web开发中一个非常重要的领域它可以有效地提高页面的加载速度和用户体验减轻后端服务器的负载。在面试中中高级前端工程师往往需要展示对前端缓存的深入了解和实践经验。下面我来详细介绍一下前端缓存的相关知识点。
二、web缓存分类
1. HTTP缓存 HTTP缓存是Web开发中最重要的缓存机制之一。HTTP协议支持多种缓存策略其中 缓存控制 是控制浏览器缓存的最基本、最重要的机制。通过在HTTP响应头中设置Cache-Control和Expires等相关指令可以让浏览器有效地缓存资源提高响应速度。另外ETag和Last-Modified是两种验证缓存是否过期的机制。 2. 浏览器缓存 浏览器缓存是指浏览器可以对访问页面中的资源进行缓存使得用户在二次访问页面时可以从本地缓存中读取资源从而提高页面的加载速度。但是浏览器缓存也可能会导致 资源更新不及时 的问题需要在设置缓存时间进行平衡考虑。 3. Service Worker Service Worker是一种Web Worker能够拦截网络请求并根据定义的策略和缓存逻辑返回缓存中的资源或者向服务器发起未缓存的网络请求。通过使用Service Worker来 实现离线缓存并将资源放到本地可以有效地提高应用的访问速度和稳定性。 4. Web Storage缓存 Web Storage是HTML5提供的浏览器本地存储API包含了localStorage和sessionStorage两种方式。它们能够快速地存储和检索本地数据并且能够扩展到5MB或更大。Web Storage主要适用于 在本地保存一些用户设置、登录状态等数据并与Service Worker实现 离线缓存。 不要担心这些概念对于未来会称为前端大牛的你来说都不是什么问题非常的简单。因为太简单数据缓存不再这篇文章的介绍中这里一笔带过需要了解的小伙伴可以移步我的另一篇文章前端新能优化篇之localStorage和sessionStorage的区别及其使用方式 5. 内存缓存 内存缓存是指将某些数据暂时放入内存中以便在需要的时候能够快速地读取。内存缓存的优点是速度快但缺点是 容易失去数据。在进行 性能优化 时内存缓存通常会被使用。 总之前端缓存是Web开发中一个非常庞大和重要的领域中高级前端工程师需要了解各种缓存机制和策略动态地制定缓存策略和缓存失效的管理机制以提高页面的性能和用户体验。
HTTP 缓存是 Web 性能优化的关键。它可以通过降低资源请求次数 和 缩短资源请求时间 来显著提高网站的响应速度和性能。本文将详细介绍 HTTP 缓存的相关知识和使用。
三、http缓存详解
1、http缓存类型
HTTP 缓存可以分为多个方面包括以下几种
a. 基于有效时间的缓存控制 使用 Cache-Control 和 Expires 等字段来控制缓存时间可将缓存分为 强制缓存 和 协商缓存。 b. 基于资源标识的缓存 使用 ETag 和 Last-Modified 等字段通过比对实体的标识信息来判断缓存是否过期同时也可以实现更细粒度的缓存控制。 c. 基于缓存存储位置的分类 客户端缓存资源会被存储在客户端浏览器中如浏览器缓存、HTTP 存储等。 服务器端缓存资源会被存储在服务器端如 HTTP 服务器缓存、CDN 缓存等。 d. 基于缓存位置的请求方式 根据条件判断ETag 和 Last-Modified 等是否需要重新向源服务器请求资源。 普通请求是直接向原始服务器发送请求获取资源条件请求是先向缓存服务器发送请求 在实际应用过程中可以根据不同的使用场景选择不同的缓存方案以达到更好的性能优化和用户体验。
2. HTTP 缓存原理
HTTP 缓存的原理是基于客户端浏览器和 Web 服务器之间的通信过程。具体流程如下
客户端浏览器发送请求给 Web 服务器请求特定 URL 的资源。Web 服务器接收到请求检查资源是否存在缓存中。如果存在缓存中服务器将返回缓存的资源给客户端浏览器否则将从磁盘或者数据库中读取资源生成响应数据返回给客户端浏览器。客户端浏览器接收到响应将响应内容和与之关联的 HTTP 头部信息如过期时间、Cache-Control 等存储在本地缓存中。当客户端浏览器再次请求同样的 URL 时浏览器会首先检查本地缓存中是否存在响应内容的副本。如果存在浏览器将直接读取缓存中的响应数据并将其展示给用户否则浏览器会重新发送一次网络请求获取新的响应内容。 官方介绍: Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时 如果本地有“已缓存的”副本就可以从本地存储设备而不是原始服务器中提取这个文档。举个例子 看图问题就是出在服务器需要处理http的请求并且http去传输数据需要带宽带宽是要钱买的啊。而我们缓存就是为了让服务器不去处理这个请求客户端也可以拿到数据。 注意我们的缓存主要是针对html,css,img等静态资源常规情况下我们不会去缓存一些动态资源
因为缓存动态资源的话数据的实时性就不会不太好所以我们一般都只会去缓存一些不太容易被改变的静态资源。3. HTTP 缓存策略
Expires缓存过期时间在过期时间之前直接使用缓存缺点是无法保证客户端和服务器时间的一致性。Cache-Control跑得快如 no-cache禁止缓存、max-age缓存的最长时间、public允许所有的缓存服务器进行缓存、private只允许客户端缓存不允许代理服务器进行缓存。Last-Modified/If-Modified-Since缓存有效性依据最后修改时间如 Last-Modified 表示缓存的最后修改时间如果此后资源有更新资源的 Last-Modified 值会随之发生变化而 If-Modified-Since 首部则可以将之前缓存资源的 Last-Modified 值带入请求中如果服务器判断 Last-Modified 值与当前资源的最后修改时间一致则说明没有发生变化直接返回 304 状态码浏览器从其缓存中加载资源。ETag/If-None-Match缓存有效性依据文件摘要即 ETag比 Last-Modified 更精确但相对于 Last-Modified 更消耗性能如 ETag 表示缓存资源的唯一标识当资源发生变化时ETag 的值会发生改变而 If-None-Match 首部可以将之前缓存资源的 ETag 值带入请求中如果服务器判断 ETag 值与当前资源的 ETag 值不一致则说明资源已经发生变化直接返回 304 状态码浏览器从其缓存中加载资源。
4. HTTP 缓存的优点和缺点
a、优点
减少网络请求通过使用 HTTP 缓存可以避免多次请求同一资源的情况减少网络负载提高网站性能。加快页面加载速度从缓存中加载资源速度比网络请求快得多这能够显著减少页面的加载时间提高用户体验。降低服务器负载通过利用 HTTP 缓存可以减少 Web 服务器的负载从而降低服务器压力。
b、缺点
缓存策略难以控制浏览器的缓存策略对缓存内容的控制相对较弱Web 开发者只能通过 HTTP 头部设置特定的缓存策略但无法控制最终的缓存结果这在一定程度上也增加了缓存调试的难度。客户端缓存不可靠由于客户端缓存是保存在用户的计算机上因此数据的可靠性和安全性无法保证在某些情况下可能会导致数据冲突或数据泄露的问题。缓存管理和调试困难为了保持缓存数据的一致性和有效性本地缓存数据需要经常进行清理和更新这就需要进行缓存管理和调试工作这可能会对开发者造成额外的压力。 总体来说HTTP 缓存是一种非常有效的 Web 性能优化策略可以显著提高网站的性能和用户体验但同时也需要注意其缺点和安全性问题以确保网站的可靠性和安全性。 四、强制缓存 和 协商缓存详解
1、强制缓存 强制缓存 是优先从浏览器本地缓存中获取资源而不是向服务器发送请求。强制缓存的过程主要通过设置 HTTP 头信息中的缓存控制字段Cache-Control、Expires 等来实现。如果客户端缓存数据未过期Cache-Control max-age 没有到期或 Expires 没有过期浏览器可以直接从本地缓存中获取数据而不必再向服务器请求数据从而减少了网络请求也降低了服务器压力。 a、优点
强制缓存可以大大提升网站性能因为它可以避免不必要的网络请求减少服务器负担并提高了用户体验。
b、缺点
强制缓存相对灵活性较差无法在缓存时间内及时更新缓存内容如果资源更新频繁可能会导致浏览器拿到过期的缓存数据从而引发页面展示错误等问题。
c、使用场景
对于不经常更新的资源数据比如静态图片、样式、脚本等可以采用强制缓存。
d、使用原理
在发送 HTTP 请求时请求头Header中添加 Cache-Control 和 Expires 字段服务器在发送响应时设置 Cache-Control 和 Expires 字段的值即控制浏览器读取本地缓存数据的时间。
e、基于Expires字段实现的强缓存
基于 Expires 字段实现的强缓存是 HTTP 协议中 较为传统 的缓存策略之一早期广泛应用于静态资源的缓存。Expires 字段被用来 指定浏览器缓存该资源的过期时间如果缓存中有该资源并且该资源未过期则浏览器直接从本地缓存中读取该资源而不必向服务器发送请求这样就可以大幅减少网络请求次数从而提升页面的响应性能。
具体的实现方式服务端在响应头中设置 Expires 字段的值指定该资源的缓存过期时间。该字段的值是一个时间戳表示缓存数据的过期时间当浏览器发出请求时会 检查该字段的值与当前时间的关系如果过期时间大于当前时间则表明该资源还在缓存有效期内浏览器则会直接从本地缓存中读取该资源文件。如果过期时间小于当前时间则浏览器会将该请求发送到服务器进行资源文件更新。
下面是一个设置 Expires 字段的 示例
Expires: Wed, 26 May 2021 08:00:00 GMT该示例设置了资源的缓存过期时间为 2021 年 5 月 26 日 08:00:00 GMT。也可以换一种形式设置如下 但是Expires已经被废弃了。对于强缓存来说Expires已经不是实现强缓存的首选 因为Expires 判断强缓存是否过期的机制 是:获取本地时间戳并对先前拿到的资源文件中的Expires字段的时间做比较。来判断是否需要对服务器发起请求。这里有一个巨大的漏洞“如果我本地时间不准咋办” 是的Expires过度依赖本地时间由于本地时间和服务器时间可能不一致导致缓存效果不稳定如果本地与服务器时间不同步就会出现资源无法被缓存或者资源永远被缓存的情况。所以Expires字段几乎不被使用了。现在的项目中我们并不推荐使用Expires强缓存功能通常使用cache-control字段来代替Expires字段。 f 、基于 Cache-Control 字段实现的强缓存代替Expires的强缓存实现方法
基于 Cache-Control 字段实现的强缓存是 目前比较常用 的一种缓存方案基于 Cache-Control 实现的强制缓存控制能够应对 Expires 指定方式带来的客户端时间和服务端时间不一致问题缓存控制更加先进和可靠。
Cache-Control 字段是一个 指令集 包含多个子指令常用的、与强制缓存相关的指令有以下 6 种: public响应可以被任何缓存所缓存。 private响应只能被单个用户缓存比如浏览器页面缓存。 no-cache强制所有缓存都不能缓存该资源需要使用协商缓存验证策略。 no-store禁止缓存保存任何资源。 max-ageseconds决定客户端资源在该秒数内缓存有效。 s-maxage决定代理服务器缓存的时长。
常见的值如下
Cache-Control: public响应可以被任何缓存所缓存。Cache-Control: private响应只能被单个用户缓存比如浏览器页面缓存。Cache-Control: no-cache缓存不能直接使用缓存需向源站发起请求进行新鲜度校验。Cache-Control: no-store缓存不会保存请求或响应的任何数据。Cache-Control: max-ageseconds缓存内容将在指定的秒数内保持新鲜比如 604800 表示一周。
下面是通过设置 Cache-Control 头来实现缓存的 示例
res.writeHead(200,{Cache-Control:max-age3600, public
});该示例中max-age 指令设置资源文件的缓存时间单位为秒public 指令表示该资源文件可以被任何缓存进行缓存。表示 该资源文件可以在 3600 秒内被缓存1小时并且可以被其他缓存保存。当需要读取该资源文件时会首先判断缓存是否过期如果没有过期则直接从本地缓存中读取该文件否则会向服务器请求该文件。 Cache-Control:max-ageNN就是需要缓存的秒数。从第一次请求资源的时候开始往后N秒内资源若再次请求则直接从磁盘或内存中读取不与服务器做任何交互。 Cache-control中因为max-age后面的值是一个 滑动时间从服务器第一次返回该资源时开始倒计时。所以也就不需要比对客户端和服务端的时间解决了Expires所存在的巨大漏洞。 需要注意的是 当 同时设置 了 Expires 和 Cache-Control时Cache-Control 的优先级高于 Expires 因此如果使用了 Cache-Control建议不再使用 Expires。 2. 协商缓存 协商缓存 是一种比较灵活的缓存设置方式可以在服务器更新资源时更及时地通知客户端更新本地缓存。是在客户端向服务器端请求某个资源时会根据某些条件如 Last-Modified、ETag 等判断服务器发送的资源是否已经过期如果未过期则使用缓存否则则向服务器重新发送请求来获取最新的资源数据。协商缓存的实现方式主要有两种Last-Modified / If-Modified-Since 和 ETag / If-None-Match。 a、优点
协商缓存可以更及时地更新缓存因为服务器可以根据资源内容的修改情况灵活地调整缓存时间同时避免了强制缓存可能会出现的未及时更新的问题。
b、缺点
相对于强制缓存协商缓存需要进行更多的网络请求降低了页面性能从而可能影响用户体验。
c、使用场景
对于频繁更新的数据比如新闻、文章、动态数据等可以采用协商缓存机制。
d、使用原理
通过设置 ETag 和 Last-Modified 字段告诉浏览器资源的状态当浏览器再次请求该资源时会在请求头中携带上次请求中的 ETag 或 Last-Modified 信息服务器根据这些信息来判断资源是否需要更新如果需要更新则返回最新的资源数据否则返回 304 Not Modified浏览器继续使用本地缓存数据。
e、基于Last-Modified / If-Modified-Since 的协商缓存
基于Last-Modified / If-Modified-Since 的协商缓存是HTTP协议中常见的一种缓存策略。该策略是 通过比较客户端浏览器上缓存的资源的最后修改时间Last-Modified与服务器上当前资源的最后修改时间Last-Modified是否一致来判断是否要用缓存。
具体实现步骤如下
当浏览器 第一次请求资源 时服务器会在响应头中添加 Last-Modified 字段表示该资源最后的修改时间并且设置Cache-control:no-cache。格式如下 注意圈出来的三行。
第一行读出修改时间。第二行给该资源响应头的last-modified字段赋值修改时间第三行给该资源响应头的Cache-Control字段值设置为:no-cache.(上文有介绍Cache-control:no-cache的意思是跳过强缓存校验直接进行协商缓存。)
当浏览器 再次请求该资源 时会在请求头中加入 If-Modified-Since 字段值就是上一次请求得到的 Last-Modified 字段的值格式如下 那么之后每次对该资源的请求都会带上If-Modified-Since这个字段而务端就需要拿到这个时间并再次读取该资源的修改时间让他们两个做一个比对来决定是读取缓存还是返回新的资源。 服务器接收到请求后会把资源的 最后修修改时间 与请求头中的 If-Modified-Since 值进行比较如果它们相等说明资源未被修改过返回 304 状态码。 如果资源已经被修改过则服务器会 返回新的资源并 更新资源的最后修改时间。此时响应头就会随着资源的更新重新设置 Last-Modified 字段。
整体流程代码 需要注意的是 服务器返回的时间戳应该是GMT格式格林威治标准时间世界上实际存在的时间标准而不应该是本地的时区时间。因为不同地区的时区有差异假如使用本地的时区时间客户端和服务器的时间可能不一致导致缓存判断出错。 另外如果忽略了一些细节问题使用Last-Modified / If-Modified-Since 的缓存机制是比较简单的。缺点是Last-Modified只能保证资源的最后修改时间是否发生过改变但无法检测到资源内容是否有改变的情况 因为是更具文件修改时间来判断的所以在文件内容本身不修改的情况下依然有可能更新文件修改时间比如 修改文件名再改回来这样就有可能文件内容明明没有修改但是缓存依然失效了。当 文件在极短时间内完成修改 的时候比如几百毫秒。因为文件修改时间记录的最小单位是秒所以如果文件在几百毫秒内完成修改的话文件修改时间不会改变这样即使文件内容修改了依然不会返回新的文件。 所以为了解决这个问题就出现了基于ETag的协商缓存 f、基于ETag的协商缓存
基础ETag的协商缓存 是通过客户端发起的If-None-Match请求头来与服务端进行交互的一种缓存策略。 ETag就是将原先协商缓存的比较时间戳的形式修改成了比较文件指纹。是一个用于表示资源的标识符由服务器在响应请求时返回给客户端。
文件指纹:根据文件内容计算出的唯一哈希值。文件内容一旦改变则指纹改变。下面是该策略的详细实现过程 服务器在响应资源请求时在响应头中添加ETag字段格式如下 ETag: xxxxx其中xxxxx是一个唯一的字符串用于标识该资源的版本信息。 当浏览器再次请求该资源时会在请求头中加入 If-None-Match 字段值就是上一次请求得到的 ETag 字段的值格式如下 If-None-Match: xxxxx服务器收到请求后会把当前资源的 ETag 值与请求头中的 If-None-Match 值进行比较如果两者相等则说明此时资源未改变返回 304 Not Modified 状态码客户端可以直接使用缓存数据否则说明资源已经发生了改变服务器将返回新的资源并更新 ETag 值。
简单来说如果服务器检测到浏览器发送了 If-None-Match 请求头那么它会将浏览器发送的 ETag 值与当前资源的 ETag 值进行比对一致则直接使用缓存否则返回新的资源。
需要注意的是和Last-Modified / If-Modified-Since有类似的问题当ETag的值比较复杂且需要花费较多的计算时间来生成的时候会影响服务器的性能。因此对于某些资源可以使用较简单的方式来返回ETag的值比如只使用文件的大小信息 作为ETag值这样 可以达到一定的ETag值的唯一性并且减少了计算成本。
