ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端缓存详解以及相关性能优化计谋 [打印本页]
作者: 张国伟    时间: 2024-12-10 06:19
标题: 前端缓存详解以及相关性能优化计谋


文章目录​​​​​​​
媒介
一、前端缓存概述
1.什么是缓存 
2.什么是前端缓存
3.前端缓存分类
二、HTTP缓存
1.什么是HTTP缓存
2.HTTP缓存分类
3.HTTP 缓存流程图
4.强缓存
5.协商缓存
三、浏览器缓存
1.Service Worker Cache
2.Memory Cache
3.Disk Cache
四、存储型缓存
1.Cookie
2.Web Storage
3.IndexedDB和WebSQL（了解）
五、优先级
六、前端缓存的性能

媒介

缓存机制到处可见，优秀的缓存机制可以缩短网页哀求资源的事件，淘汰延迟，并且由于缓存文件可以重复使用还可以淘汰带宽，低落网络负荷，从而提高我们的性能优化。
一、前端缓存概述

1.什么是缓存 


2.什么是前端缓存

前端缓存主要是指HTTP缓存和浏览器缓存，前端缓存可以加速页面加载速度、减轻服务器负担、淘汰延迟与网络壅闭、提高用户体验、支持离线使用等，可以或许有效的提拔网站与应用的性能，但同时也面临着缓存过期、用户安全、缓存清除等问题。
3.前端缓存分类


二、HTTP缓存

1.什么是HTTP缓存

http缓存指的是: 当客户端向服务器哀求资源时，会先抵达浏览器缓存，如果浏览器有“要哀求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

2.HTTP缓存分类

HTTP 缓存分为：强缓存和协商缓存。
3.HTTP 缓存流程图


4.强缓存

浏览器在哀求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包罗缓存header信息；本次哀求根本就不会与服务器进行通讯。状态码为200。可通过设置相应头中的 Cache-Control 和 Expires 字段来控制缓存计谋。
强缓存的两种常用设置：



总结：
在强缓存收效期间，浏览器会直接从当地缓存中获取资源，并且不会发送哀求到服务器。只有当缓存过期或不符合缓存规则时，浏览器才会发送哀求到服务器进行验证，即执行协商缓存机制。
强缓存可以有效淘汰网络哀求，提拔网页加载速度和用户体验。但需要注意的是，如果设置的缓存时间过长，资源的更新可能不会立即收效，导致用户无法获取最新的资源。因此，在设置强缓时，需要综合考虑缓存时间和资源的更新频率。

5.协商缓存

协商缓存就是资源在强缓存失效（或者没有设置强缓存）后，浏览器携带特定缓存标识（HTTP哀求头中的某些字段）向服务器发送哀求，由服务器根据缓存标识决定是否使用缓存的过程。如果缓存可用则返回状态码304以及在相应头中设置对应字段，否则返回新的资源以及状态码为200。和强缓存一样，可以通过两对HTTP的头部字段实现协商缓存：Last-Modified（相应头字段）<—>If-Modified-Since（哀求头字段）和Etag（相应头字段）<——>If-None-Match（哀求头字段）。
协商缓存的工作流程如下：
1.浏览器发送哀求到服务器，哀求特定资源。
2.服务器接收到哀求后，检查资源的缓存计谋，并在相应头中设置缓存验证相关的字段，如 ETag 和 Last-Modified。

3.浏览器收到相应后，检查相应头中的缓存验证字段。

4.当浏览器再次哀求该资源时，会在哀求头中包含缓存验证字段，用于告知服务器上一次哀求时使用的标识和最后修改时间。

5.服务器接收到带有缓存验证字段的哀求后，进行缓存验证：

6.浏览器根据服务器的相应进行处理：

通过协商缓存，可以在资源发生变革时实时更新缓存，淘汰不必要的网络传输和服务器负载。它与强缓存一起使用，可以提供更灵活和高效的缓存计谋，以提高应用的性能和用户体验。

三、浏览器缓存

1.Service Worker Cache

 一种在浏览器背景运行的JavaScript脚本，它可以拦截和处理网页发出的网络哀求，以及管理缓存和离线数据。Service Worker可以让网页在离线状态下仍能正常访问，并且可以提高网页的性能和相应速度。它由开发者编写的额外的脚本控制，且缓存位置独立。
Service Worker可以实现以下功能：

如果 Service Worker 没能命中缓存，一样寻常情况会使用 fetch() 方法继承获取资源。这时浏览器就去 memory cache 或者 disk cache 进行下一次找缓存的工作了。经过 Service Worker 的 fetch() 方法获取的资源，即便它并没有命中 Service Worker 缓存，甚至现实走了网络哀求，也会标注为 from ServiceWorker。
注意：为了保证安全性，Service Worker只能在HTTPS协议下使用。
2.Memory Cache

memory cache（内存缓存）是存储在浏览器内存中的。其优点为获取速度快、优先级高，从内存中获取资源耗时为 0 ms，而其缺点也显而易见，比如生命周期短，当网页关闭后内存就会开释，同时虽然内存非常高效，但它也受限制于盘算机内存的大小，是有限的。那么如果要存储大量的资源，这是还得用到磁盘缓存。
3.Disk Cache

disk cache（硬盘缓存）是存储在盘算机硬盘中的。其优缺点与 memory cache 恰好相反，比如优点是生命周期长，不触发删除操作则一直存在，而缺点则是获取资源的速度相对内存缓存较慢。 disk cache 会根据生存下来的资源的 HTTP 首部字段来判断它们是否需要重新哀求，如果重新哀求那便是强缓存的失效流程，否则便是收效流程。 获取次序：
四、存储型缓存

浏览器存储型缓存包含了 Cookie、Web Storage、IndexedDB、WebSQL 等，它们也是我们一样寻常开发中经常会接触的缓存，其是造成“登录一个网站后再次访问的时间就已经是登录状态”现象的主要原因。
1.Cookie

Cookie 的存储空间很小，不能凌驾 4KB，因此这一缺点也限制了它用于存储较大容量数据的本领。 不建议将非用户身份类的数据存储在 Cookie 中，因为 Cookie 在同域下会伴随着每一次资源哀求的哀求报头传递到服务端进行验证，试想一下如果大量非必要的数据存储在 Cookie 中，伴随着哀求相应会造成多大的无效资源传输及性能浪费。 在 Cookie 存储 API 方面，浏览器提供的原始 API 使用起来也不是特别方便，比如：
  1. // 存储 Cookie
  2. document.cookie='username=xiaoming; domain=test.fly.com'
  4. // 读取 Cookie
  5. // 只能通过 document.cookie 读取所有 Cookie 并进行字符串截取，非常不便
  7. // 删除 Cookie
  8. let date = new Date()
  9. date.setTime(date.getTime() - 10000) // 设置一个过期时间
  10. document.cookie=`username=xaioming; domain=test.fly.com; expires=${date.toGMTString()}`
复制代码
如此操作起来会编写大量重复糟心的代码，因此封装 Cookie 的增删改查操作十分必要。保举使用 js-cookie 库，其 API 操作如下：
  1. import Cookies from 'js-cookie'
  3. // 存储 Cookie
  4. Cookies.set('username', 'xiaoming', { domain: 'test.fly.com' })
  6. // 读取 Cookie
  7. Cookies.get('username')
  9. // 删除 Cookie
  10. Cookies.remove('username')
复制代码
2.Web Storage

Web Storage 即为 Session Storage 和 Local Storage。
在验证用户身份及维持状态方面，Cookie 有明显的特点和上风，但其并不是存储网页数据的小能手，相反 Web Storage 在这方面却有显著的上风。 Web Storage 作为 HTML5 推出的浏览器存储机制，其又可分为 Session Storage 和 Local Storage，两者相辅相成。 Session Storage 作为临时性的当地存储，其生命周期存在于网页会话期间，纵然用 Session Storage 存储的缓存数据在网页关闭后会主动开释，并不是持久性的。而 Local Storage 则存储于浏览器当地，除非手动删除或过期，否则其一直存在，属于持久性缓存。 Web Storage 与 Cookie 相比存储大小得到了明显的提拔，一样寻常为 2.5-10M 之间（各家浏览器差别），这容量对于用于网页数据存储来说已经十分充足。 我们再来看一下 Web Storage 相关的操作 API（以 Local Storage 为例）：
  1. // 存储
  2. localStorage.setItem('username', 'xiaoming')
  4. // 读取
  5. localStorage.getItem('username')
  7. // 删除
  8. localStorage.removeItem('username')
复制代码
在存储简单的数据范例时，Web Storage 提供的原始 API 可以轻松完成任务，但是一旦数据范例变为 Object 范例时，其应付起来就变得左支右绌，主要原因在于使用 Web Storage 存储的数据最终都会转化成字符串范例，比如：
  1. localStorage.setItem('length', 15)
  3. localStorage.getItem('length') // 最终获取的会是字符串 '15'
复制代码
而存储对象时如果没有提前采用序列化方法 JSON.stringify 转化为字符串对象，那么最终获取的值会酿成 [object Object]。 因此 Web Storage 的原始存储方案会存在繁碎的序列化与反序列化的缺点：
  1. let userinfo = { name: 'xiaoming', age: 18 }
  3. // 存储时进行序列化操作
  4. localStorage.setItem('userinfo', JSON.stringify(userinfo))
  6. // 获取时进行反序列化操作
  7. JSON.parse(localStorage.getItem('userinfo'))
复制代码
我们可以对其API进行二次封装，也可以使用目前 npm 市场上也有相关封装 Web Storage 的包，比如 web-storage-cache。
3.IndexedDB和WebSQL（了解）


五、优先级

六、前端缓存的性能优化计谋

Web缓存性能优化是一种提高网站加载速度和提高用户体验的方法。通过使用缓存，可以淘汰服务器的负载和网络延迟，从而提高页面的相应速度。以下是一些关于Web缓存性能优化的建议：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4