缓存?
1、浏览器缓存:就是把一个已经请求过的资源拷贝一份存储起来,当下次需要该资源时, 浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。分为:
强制缓存:请求头设置cache-control:
max-age缓存的时间
no-cache:不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。
no-store:直接禁止浏览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。
public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。
private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。
协商缓存:请求头设置last-modified/etag
1.Etag要优于Last-Modified。Last-Modified的时间单位是秒,如果某个文件在1秒内改变了多次,那么他们的Last-Modified其实并没有体现出来修改,但是Etag每次都会改变确保了精度;
2.在性能上,Etag要逊于Last-Modified,毕竟Last-Modified只需要记录时间,而Etag需要服务器通过算法来计算出一个hash值;
3.在优先级上,服务器校验优先考虑Etag。
获取资源形式 | 状态码 | 发送请求到服务器 | |
---|---|---|---|
强缓存 | 从缓存取 | 200(fromcache) | 否,直接从缓存取 |
协商缓存 | 从缓存取 | 304(notmodified) | 是,通过服务器来告知缓存是否可用 |
2、H5缓存:
本地存储:localStorage永久存储、sessionStorage临时存储
离线缓存:在html标签上设置 manifest 属性 引入cache文件(CACHE缓存文件,NETWORK不缓存文件,FALLBACK当资源不可访问时,代替的文件)
3、更新缓存文件:1、更新manifest文件;2、通过javascript操作:window.applicationCache.update();3、清除浏览器缓存;4、带版本号,根据版本号判断。