当前位置: 代码迷 >> 综合 >> web-基本常识-----1-------缓存(进阶)
  详细解决方案

web-基本常识-----1-------缓存(进阶)

热度:4   发布时间:2024-01-27 06:45:14.0
  • 上一篇文章说了缓存 的基本东西, 但是没有什么实践的操作 ,这篇文章主要介绍 我在对这些缓存中的 使用场景 和大厂的使用场景

cookie 淘宝案列

  • 验权,统计

  • 起因 :在去年的时候 当初想做 淘宝客 使用node 爬取淘宝联盟的接口数据,发现 他们在做接口的时候做了 3次判断

    第一次:不传Cookie 接口返回 没有数据 同时set Cookie
    第二次:拿到set 的Cookie 进行请求 返回数据

  • 如果第二次 拿不到数据,再进行一次操作 就可以了,,我最多执行了3次 基本上就能调用接口了 看 (图一:淘宝数据爬取)

  • 对与我自己来说 ,cookie 基本上是没有怎么使用,,仅在做ssr 时使用过,来进行 用户登陆判断 ,,主要原因是 cookie 会和每次请求带上 在server 端进行处理

图一:淘宝数据爬取

localStorage ,sessionStorage

  • 微信使用规则
  • 我的项目使用
  • 在微信文章中我们能看到 其大多数的 资源 js 是保存在 localStorage 里面的 ,这种好处是减少文件请求 ,先判断 缓存中是否有这个对象 如果有 则取出 不在服务端进行请求 ,减少的大量文件的请求 ,优化了页面加载速度 ,当然其 性能 检测数据也是在 缓存中进行保存
    Alt
  • 对于我来说
  1. 在我自己的项目中进行过类似 的处理 在Vue 项目 我们都清除 build 后会生成 依赖文件,生成key- value 资源文件 通过 动态添加 script 标签的方式进行 加载

加载图片
因此 可以在此使用 localstorage 进行 存取

  1. 用来保存 类似 token ,历史记录 ,埋点等操作
  2. 埋点 : 之前用来统计用户行为 我的操是 ,保存用户操作记录 ,在第二次 打开的时候 将第一次的数据 传递给服务端 ,同时 update 缓存信息, 这样做的原因是,尽量减少请求,保证是一次完整的用户操作信息记录
    当然 埋点可以做很多用户行为统计 ,全看需求哦
POST 统计信息
update 统计信息
update 统计信息
update 统计信息
update 统计信息
update 统计信息
打开浏览器
服务端
操作1
用户操作2
用户操作3
用户操作4
用户离开浏览器
  • 说到缓存 我觉得还是应该说一下 PWA , serviceWork
    • 提高用户体验 ,离线应用,减少了用户请求,通过配置 manifest.json 和 serviceWorker ,监听文件 请求 (你可以理解类似 做浏览器插件 的背景页来处理) 其核心就行 通过注册和配置 ,在客户端进行 资源文件本地化处理,
    • 如果想深入了解 https://blog.csdn.net/chenqiuge1984/article/details/80130507 可以去看看大神的博客 和详细介绍
    • 如果有兴趣也可以看看 淘宝的写法 和基本实现