今天看啥  ›  专栏  ›  前端求职中_杭州_感谢内推

性能优化之:如何优化JS缓存?🔬

前端求职中_杭州_感谢内推  · 掘金  ·  · 2020-03-15 01:56
阅读 45

性能优化之:如何优化JS缓存?🔬

作者:王二狗
博客:掘金思否知乎简书CSDN
点赞再看,养成习惯,你们的支持是我持续分享的最大动力😘

Cookie

介绍

Cookie 通常由浏览器存储,然后将Cookie与每个后续请求一起发送到同一服务器。

收到HTTP请求时,服务器可以发送带有Cookieheader头。

可以给Cookie设置有效时间。

应用场景

  • 会话管理:用户登录名,购物车商品数量及ID,游戏得分或服务器应该要记录的其他重要的内容
  • 个性化:比如用户首选项,首页的排版及布局,主题或其他设置
  • 跟踪:记录和分析用户行为,比如埋点,我们在某些页面去埋一个用户的标识,这个东西我们就可以使用Cookie记录,从而分析用户的行为

sessionStorage

介绍

sessionStorage 用于创建一个本地存储的键/值对。

sessionStorage 的存储是有有效期的,如果用户关闭了浏览器的标签,值就会被清空。

应用场景

  • 页面与页面之间进行传值

IndexedDB

介绍

IndexedDB 就是一个索引数据库,其特点是存储量大。

应用场景

  • 客户端存储大量结构化数据
  • 没有网络连接的情况下使用(比如:石墨文档,当用户断网时,我们可以将数据存储,有网之后再进行同步)
  • 将冗余、很少修改、但经常访问的数据,从而避免随时从服务器获取数据

LocalStorage

介绍

LocalStorage即本地存储,即便我们关闭了浏览器的标签,甚至关闭了浏览器,其中的数据仍然存在。

应用场景

  • 缓存静态文件内容JS/CSS,避免重新请求加载,增强用户体验
  • 缓存不经常变更的API接口数据
  • 缓存地理位置信息
  • 浏览过程中页面的具体位置

告诫自己,即使再累也不要忘记学习,成功没有捷径可走,只有一步接着一步走下去。 共勉!

文章中如有不对的地方,欢迎小伙伴们多多指正。

谢谢大家~ 💘




原文地址:访问原文地址
快照地址: 访问文章快照