web前端面试前端缓存的方式

我是娜娜呀
2,363 阅读9分钟

缓存模式

概念 浏览器缓存是浏览器端保存数据用于快速读取或避免重复优化机制.

缓存类别 前端缓存主要分为http缓存和浏览器缓存,其中http缓存是在http进行传输的时候的缓存,主要在服务器上设置,而浏览器缓存则是存储的客户端的,可以通过js对浏览器的存储进行操作

缓存优点

  • 缓存可以说是性能优化中简单高效的一种优化方式.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷
  • 对于一个数据请求来说,可以分为网络请求,后端处理 浏览器形影三个步骤.浏览器缓存可以帮助我们在第一和第三步骤中优化性能,比如说直接使用缓存而不发请求,或者是发起了请求,但是后端存储的数据与前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据

http缓存

  http缓存分为强制缓存和协商缓存

强制缓存

强制缓存(自己强制决定)就是向浏览器缓存查找该请求结果,并且根据该结果的缓存规则决定是否使用该缓存结果,强制缓存的情况主要有三种:

  • 1)不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）

  • 2)协议中有这种缓存结果和缓存标识,但是结果已经失效,强制缓存失效,则使用协商缓存
  • 3)协议中存在缓存结果和缓存标识,且该结果尚未生效,强制缓存生效,直接返回该结果
强制缓存规则

浏览器在向服务器发送http请求的时候,服务器会将缓存规则返给http响应报文的http头和请求结果一起返回给浏览器,其中控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

  • expires
    • Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
    • 到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无意义
  • Cache-Control
在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

public：所有内容都将被缓存（客户端和代理服务器都可缓存）

private：所有内容只有客户端可以缓存，Cache-Control的默认取值

no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况： 1)协商缓存生效，返回304，

2)协商缓存失效，返回200和请求结果结果

同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

综述

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程如下：

浏览器缓存

本地存储小容量

cookie

1)http是一种无状态的协议,所以每次客户端请求服务器的时候都是'初次见面',所以每次接收用户请求时,都是无法确定用户的身份,
2)为了解决这个无状态问题,会在登录成功时,服务端再响应头中存储着cookie信息服务端给用户下发cookie的数据(假设是一张小票),
3)等以后用户再请求服务端时，带着小票一起发送过去(自动)，服务端检测小票的信息即可判断这个用户使用访问过

cookie的数据是存储在客户端的,存储容量只有4k

  • cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

    • （1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
    • （2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
    • （3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
    • （4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。 session

  • session实现方式：

    • 因为cookie是保存在客户端的，用户可以随意修改或伪造
    • 服务端不再将数据直接下发到客户端保存了，而是将数据保存在服务端
    • 下发的是保存数据区域的标识(手牌)
    • 用户下次请求时带着标识到服务端，开箱子读取数据进行操作即可

  • 好处：确保数据无法被用户操作，安全

localStorage

LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。存储容量为5M

  • 生命周期：声明周期永久生效，除非手动删除 否则关闭页面也会存在
  • 数据共享：同一个浏览器中打开两个页面是同源的，就可以共享localStorage数据
    • 如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源
  • 语法：
    • 存储数据：localStorage.setItem(key, value)
    • 获取数据：localStorage.getItem(key)
    • 删除数据：localStorage.removeItem(key)
    • 清空数据：(所有都清除掉)localStorage.clear()

sessionStorage

  • 生命周期： 为关闭浏览器窗口
  • 数据共享：在同一个窗口(页面)下数据可以共享
  • 语法：
    • 存储数据：sessionStorage.setItem(key, value)
    • 获取数据：sessionStorage.getItem(key)
    • 删除数据：sessionStorage.removeItem(key)
    • 清空数据：(所有都清除掉) sessionStorage.clear()

applicationCache

HTML5的应用缓存（application cache），或者简称为 appcache，是专门为开发离线 Web 应用而设计 的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个 描述文件（manifest file），列出要下载和缓存的资源

本地存储大容量

webSql(被废弃)

websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有以下特点 Web Sql 数据库API 实际上不是HTML5规范的组成部分； 在HTML5之前就已经存在了，是单独的规范； 它是将数据以数据库的形式存储在客户端，根据需求去读取；

  • 跟Storage的区别是：

    • Storage和Cookie都是以键值对的形式存在的；
    • Web Sql 更方便于检索，允许sql语句查询；
    • 让浏览器实现小型数据库存储功能；
    • 这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持；

  • websql API主要包含三个核心方法：

    • openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
    • transaction : 这个方法允许我们根据情况控制事务提交或回滚。
    • executeSql : 这个方法用于执行真实的SQL查询。

indexDB(非关系型数据库)

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储 对于存储少量数据是非常有用的，但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。 IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用，但是还没有被任何浏览器所实现。异步 API 在 Web Workers 内部和外部都可以使用，另外浏览器可能对indexDB有50M大小的限制，一般用户保存大量用户数据并要求数据之间有搜索需要的场景。 异步API

往返缓存

往返缓存又称为BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。

avatar
文章
阅读
粉丝