前端之浏览器缓存机制
cirzear / / 知识碎片 | 面试知识 / 阅读量 422
通俗地讲,缓存可以分为HTTP缓存本地缓存 HTTP缓存又可以分为强缓存协商缓存 前端缓存 强缓存即 不会向服务器发送请求,直接从缓存中读取资源 请求返回200的状态码 在chrome控制台的network选项中可以看到size显示from disk cache或from memory cache。
from memory cache代表使用内存中的缓存,from disk cache则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为memory –> disk。在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
强缓存header信息
Expires和Cache-Control两者对比:其实这两者差别不大,区别就在于 Expires 是http1.0的产物,Cache-Control是http1.1的产物,两者同时存在的话,Cache-Control优先级高于Expires
设置强缓存 1.expires(http/1.0,时间格式GMT) 表示相应头里的过期时间,浏览器再次加载资源时如果在时间之内在命中缓存。 2.cache-control(http/1.1,单位 秒) max-age(表示缓存内容在 xx秒后消失) no-cache(要根据协商缓存是否需要缓存客户端) no-store(所有内容都不会被缓存) public(所有内容都将被缓存包括客户端和代理服务器) private(所有内容只有客户端可以缓存) s-maxage(只用于共享缓存和max-age效果一样,只是max-age 用于普通缓存) 协商缓存 当协商缓存生效时,返回304和Not Modified 它指的是强制缓存失效后,浏览器携带缓存标示向服务器发起请求,由服务器决定是否需要使用缓存。 1.Last-Modified和 If-Modified-Since Last-Modifeds是服务器返回资源同时在header添加的,表示这个资源在服务器上最后修改时间,浏览器接受后缓存文件和header。 浏览器下次请求时,检测是否有Last-Modified字段,如果存在则在请求头添加 If-modified-Since该字段值就是上次服务器返回的值 如果没有变化则返回304直接从缓存中读取,否则返回新资源 2.ETag和If-None-Match Etag是上一次加载资源时,服务器返回的。它的作用是唯一用来标示资源是否有变化。 浏览器下次请求时将ETag值传入If-None-Match中,服务端匹配传入的值与上次是否一致,如果一致返回304否则返回新资源和新的ETag 两种协商缓存的对比 1.首先在精确度上,Etag要优于Last-Modified,Last-Modified的时间单位是秒,如果某个文件在1秒内改变了多次,那么他们的Last-Modified其实并没有体现出来修改,但是Etag每次都会改变确保了精度;如果是负载均衡的服务器,各个服务器生成的Last-Modified也有可能不一致。 2.性能上,Etag要逊于Last-Modified,毕竟Last-Modified只需要记录时间,而Etag需要服务器通过算法来计算出一个hash值。 3.优先级上,服务器校验优先考虑Etag 本地缓存 本地存储主要有以下几种,localStorage、sessionStorage、cookie、websql、indexDB. 1.localStorage 在前端设置,可以减少数据请求,长期存储。 2.sessionStorage 在前端设置,只存在当前会话中即重新打开浏览器则数据消失 3.cookie 在后端设置,保存在客户端本地文件,通过set-cookie设置且Cookie的内容自动在请求的时候被传递到服务器。 4.indexDB 为浏览器提供本地数据库,提供查找接口,还能建立索引 。 indexDB详细解释:(来自阮一峰老师博客-浏览器数据库 IndexedDB 入门教程) 通俗地说,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。 IndexedDB 具有以下特点。 (1)键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。 (2)异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。 (3)支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。 (4)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。 (5)储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。 (6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。 本文部分内容来自浏览器缓存原理以及本地存储
支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章