jquery视频缓存前端视频缓存

转载

数据大侠客 2023-12-02 14:00:44

文章标签 jquery视频缓存前端缓存 http缓存浏览器缓存缓存 文章分类 jQuery 前端开发

一、前端缓存概述

前端缓存主要是分为HTTP缓存和浏览器缓存。
HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；
而浏览器缓存主要由前端开发在前端js上进行设置。

二、分类

1. HTTP缓存

HTTP缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，击中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否击中协商缓存，击中返回304，否则服务器会返回新的资源。

1.1 强缓存

	可选值	优先级	优缺点
Pragma	no-cache：不能直接使用缓存，开始服务器新鲜度判定	中	已被废弃
Cache-Control	max-age：xx秒：相对时间，强缓存必备 no-cache：不直接使用缓存，开始服务器新鲜度判定 no-store：每次都下载最新资源 public/private: 是否只能被单个用户保存	高	无
Expires	GMT时间	低	服务器和本地的时间不一定统一

1.2 协商缓存
协商缓存都是成对出现的

	可选值	优先级	优缺点
Last-Modify/if-Modify-Since	GMT时间	依次比较，排序靠后	1.修改并不意味着改变 2.秒级判断
ETag/if-None-Match	校验值	依次比较，先比较	使用系统默认的hash算法，在分布式部署中会导致不同服务器的ETag值不一致

强缓存和协商缓存区别：

	强缓存	协商缓存
HTTP状态码	200	304
缓存位置	本地浏览器	本地浏览器
谁来决定	本地浏览器	服务器
是否有效	F5刷新无效，Ctrl+F5刷新无效	F5刷新有效，Ctrl+F5刷新无效

200 from disk or 200 from memory : 强缓存的200也有两种情况：200 from disk和200 from memory。现在我没有找到明确的文档来描述这种区别的发生条件。知乎这个问题中提到了一些情景，可以自行取用。

1.3 最佳优化策略消灭304
最佳优化策略：因为协商缓存本身也有http请求的损耗，所以最佳优化策略是要尽可能的将静态文件存储为较长的时间，多利用强缓存存储，而不是协商缓存，即消灭304。
但是给文件设置一个很长的Cacha-Control也会带来其他的问题，最主要的问题是静态内容更新时，用户不能及时获得更新的内容。这时候就要使用hash的方法对文件进行命名，通过每次更新不同的静态文件名来消除强缓存的影响。
Hash命名： http://xxx.com/main.5eas34fa.js http://xxx.com/main.js?5eas34fahttp://xxx.com/5eas34fa/main.js

2. 浏览器缓存

2.1 本地存储
webStorage

localStorage
sessionStorage

Cookie
Cookie主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。 LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。 SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。

	容量	作用
Cookie	4KB	请求时传递
LocalStorage	5MB	永久存储
SessionStorage	5MB	同标签页生命周期，不同页面间交换数据

WebSql
IndexDB

	介绍	容量	状态
WebSql	关系型数据库	不知道，应该是50M左右	被W3C标准废弃
IndexDB	非关系型数据库	50MB	正常使用

应用缓存Application Cache
PWA

应用缓存与PWA
应用缓存全称为Offline Web Application，它的缓存内容被存在浏览器的Application Cache中。它也是一个被W3C标准废弃的功能，主要是通过manifest文件来标注要被缓存的静态文件清单。但是在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。而且，即使我们更新了version，用户的第一次访问还是会访问到老的页面，只有下一次再访问才能访问到新的页面。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。

PWA全称是渐进式网络应用，主要目标是实现web网站的APP式功能和展示。尽管PWA也有manifest文件，但是与应用缓存却完全不同。不同于manifest简单的将文件通过是否缓存进行分类，PWA用manifest构建了自己的APP骨架。另外，PWA用Service Worker来控制缓存的使用。这一块的内容较多，在这里就不详细展开了。

类别	主要部分	作用	状态
应用缓存	Manifest	离线缓存	被W3C标准废弃
PWA	Manifest,SW.js	APP式应用	正常使用，但浏览器兼容性不好