当前位置:首页 > 缓存 > 正文内容

前端-缓存

自由小鸟1年前 (2023-10-25)缓存510

什么是缓存

缓存是计算机内存中的一块特殊区域,用于临时存储经常使用或频繁访问的数据,以减少对原始数据源的访问次数,提高程序性能和响应速度。缓存的存在可以减少IO操作,提高数据读取速度,同时减轻服务器的负载。


缓存策略 图片来源:IMWeb前端

缓存的作用

  • 减少网络带宽消耗
  • 降低服务器压力
  • 减少网络延迟,加快页面打开速度

哪些地资源可以被缓存(js css img)

浏览器的缓存

浏览器缓存机制是什么?

浏览器缓存机制是指浏览器在用户访问网页时,根据一定的规则和策略,将网页资源(如HTML、CSS、JavaScript、图片等)缓存在本地,以便在用户再次访问该网页时,直接从缓存中读取资源,而不需要重新从服务器下载。

请简述浏览器如何判断是否使用缓存?

浏览器通过比较请求的URL和缓存中是否有相同的URL来确定是否使用缓存。如果缓存中有相同的URL,则浏览器会直接从缓存中读取资源;否则,浏览器会向服务器发送请求获取新的资源。

请简述浏览器强制刷新页面和清除缓存的快捷键是什么?

在大多数浏览器中,强制刷新页面的快捷键是Ctrl + F5或Cmd + Shift + R(Mac),清除缓存的快捷键是Ctrl + Shift + R(Windows)或Cmd + Shift + R(Mac)

请简述浏览器如何更新缓存中的资源?

浏览器通过设置HTTP响应头中的Cache-Control和Last-Modified属性来控制缓存资源的更新。当浏览器再次访问某个资源时,会向服务器发送请求,携带Last-Modified属性,服务器会根据Last-Modified属性判断资源是否被修改,如果没有被修改,则返回304 Not Modified状态码,告诉浏览器从缓存中读取;否则,服务器返回新的资源

http缓存

http分为强缓存和协商缓存

请简述HTTP缓存机制

HTTP缓存机制则是指在HTTP请求和响应中使用的缓存机制。当浏览器向服务器发送HTTP请求时,服务器会在响应头中包含一些缓存控制指令,如Expires、Cache-Control等。这些指令告诉浏览器如何缓存响应中的资源。浏览器会根据这些指令将资源缓存在本地,并在后续请求中直接使用缓存的资源,而不是重新向服务器发送请求。这种缓存机制可以减少网络传输的数据量,提高网页的加载速度

强缓存

Response Headers 中 服务器来设置的
Cache-Control
第一次请求后台设置了response Headers中Cache-Control

第二次前端再次请求浏览器只要看到Cache-Control这个时间没有过期,浏览器就不会请求而是从缓存里取

如何再请求发现已经过期了那就会请求后台资源,后台会重新再次设置缓存时间Cache-Control

Cache-Control的值

max-age 最大过期时间
no-cache 不用本地缓存正常去服务端请求
no-store 不用本地缓存不用服务端缓存
private 最终用户做缓存
public 允许中间代理做缓存

Expires

同在Response Headers中,同为控制缓存过期,已被Cache-Control代替

协商缓存(对比缓存)

  • 服务器端缓存策略
    就是一个资源到了服务端,服务端可以告诉前端这个资源没有变化可以使用缓存(并不是服务端缓存)
  • 服务器判断客户端资源,是否和服务端资源一样
  • 一致则返回304,否则返回200和最新的资源

  • 在Responese Headers中,有两种
  • Last-Modified资源的最后修改时间
  • Etag资源的唯一标识(一个字符串,类似人类的指纹)
    last-modified

Etag

事例:

如果last-modified 和Etag 同时存在以Etag为准

  • 会优先使用Etag
  • Last-Modified只能精确到秒级
  • 如果资源被重复生成,而内容不变,则Etag更精确


图片来源双越老师

状态码

HTTP协议的状态码有很多种,下面是常见的一些状态码:

-   200:OK,请求成功。
-   201:Created,请求成功并且创建了新的资源。
-   202:Accepted,请求成功但是需要继续处理。
-   204:No Content,请求成功,但是资源没有内容。
-   301:Moved Permanently,资源永久性移动。
-   302:Found,资源临时移动。
-   304:Not Modified,资源没有修改。
-   400:Bad Request,请求格式错误。
-   401:Unauthorized,没有权限。
-   403:Forbidden,禁止访问。
-   404:Not Found,请求的资源不存在。
-   405:Method Not Allowed,请求方法不被允许。
-   418:I'm a teapot,服务器拒绝了请求。
-   500:Internal Server Error,服务器内部错误。
-   503:Service Unavailable,服务器暂时不可用。

服务器缓存

CDN

HTML5缓存

请简述使用Service Worker实现离线功能的原理和步骤

Service Worker是现代Web应用程序中的一种新API,它允许你在浏览器后台运行脚本,以拦截和处理网络请求,包括程序化缓存。使用Service Worker实现离线功能的基本原理和步骤如下:

基本原理

Service Worker在浏览器启动时运行并监听各种事件,包括网络请求。当用户请求一个页面或资源时,Service Worker可以拦截这个请求并决定返回什么。通过编程缓存(即通过Service Worker的缓存API),你可以在用户离线时从缓存中取出数据。

基本步骤

  1. 注册 Service Worker:在你的主JavaScript文件中,你需要先注册一个Service Worker。只有当你的网站通过HTTPS协议访问时,才能安全地注册Service Worker。
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功');
    })
    .catch(function(err) {
      console.log('Service Worker 注册失败:', err);
    });
}
  1. 安装和激活 Service Worker:注册成功后,浏览器会开始下载和安装Service Worker。一旦Service Worker被安装并激活,它就可以开始监听网络请求。
  2. 缓存资源:你可以使用caches.open()caches.put()方法来缓存你的资源。在用户第一次访问你的网站时,Service Worker会拦截网络请求,并从缓存中获取资源。如果缓存中没有,再从网络中获取。
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/app.js',
        '/styles.css',
        '/image.png'
      ]);
    })
  );
});
  1. 在离线时提供缓存的资源:如果用户在离线时尝试访问你的网站,Service Worker会拦截这个请求并从缓存中返回资源。你可以使用self.fetch()方法来处理网络请求,如果缓存中有匹配的资源,就返回它,否则就调用fetch()来从网络中获取。
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response; 
        }
        return fetch(event.request).then(function(response) {
          return caches.open('my-cache').then(function(cache) {
            cache.put(event.request, response.clone());
            return response;
          });  
        });
      })
  );
});
  1. 更新 Service Worker:如果你需要更新你的Service Worker或缓存的资源,你需要先卸载旧的Service Worker,然后再安装新的。这可以通过调用navigator.serviceWorker.getRegistration()来实现。

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=182

返回列表

没有更早的文章了...

没有最新的文章了...

“前端-缓存” 的相关文章