Atitit 利用前端cache indexdb localStorage 缓存提升性能优化attilax总结 1.1. indexdb 更加强大点，但是结果测试，api比较繁琐 使用叫麻烦些 1

最新推荐文章于 2024-07-28 18:07:55 发布
最新推荐文章于 2024-07-28 18:07:55 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/attilax/article/details/79793512
版权
本文总结了利用前端缓存技术indexDB和localStorage进行性能优化的经验。通过测试，indexDB功能强大但API复杂，而localStorage操作简便。优化实践显示，结合gzip，门诊首页的数据加载量从9MB降至300KB。文中提供了代码示例，并讨论了缓存的清理策略，包括手动清理和定时刷新。
摘要由CSDN通过智能技术生成

Atitit 利用前端cache indexdb localStorage 缓存提升性能优化attilax总结

 

1.1. indexdb 更加强大点，但是结果测试，api比较繁琐 使用叫麻烦些 1

1.2. localStorage比较简单易用 就setitem getitem就可以了 1

1.3. 效果：结合gzip，将门诊首页加载数据量从9M降低到300kb 1

1.4. 代码范例 1

1.5. 缓存的刷新清理问题 直接清理浏览器缓存或F12后找到localStorage清理条目 2

 

1.1. indexdb 更加强大点，但是结果测试，api比较繁琐 使用叫麻烦些

 

1.2. localStorage比较简单易用 

最低0.47元/天 解锁文章
attilax
关注
Openlayers实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-28 1589
在入门教程中，我们已经详细介绍了如何对地图瓦片进行缓存，请参考《Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能》，缺点是占用内存过多，那么如何再次优化呢，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。为什么不使用LocalStorage？因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。
LocalStorage与IndexDB的使用
weixin_44533898的博客
01-18 1789
LocalStorage与IndexDB的使用LocalStorageIndexDB LocalStorage localstorage 用于本地存储，解决了cookie的存储空间不足问题，cookie存储空间一般为4K，而localstorage一般在浏览器分配的空间大小为5M，(不同的浏览器分配的存储空间大小不等)。 localstorage与sessionStorage相比，生命周期更长，便于数据长期存储。localstorage值类型限定为String；在浏览器隐私模式下是不可读取的；（存储内容过多
前端性能优化--文件获取优化
weixin_44160385的博客
10-30 467
前端性能优化01 加载文件 css.js http 协议的细节 从 url 到页面渲染完毕，发生了什么 大厂怎么上线前端代码 网络层面优化 从输入 URL 到页面加载完成，发生了什么？ 用户输入域名 - 浏览器通过 DNS，把 url 解析成 IP 和 IP 地址建立 TCP 链接发送 HTTP 请求 服务器接手请求，查库，读文件，返回的 HTTP响应 浏览器收到首屏的 html，开始渲...
indexedDB本地存储，首页优化
weixin_45890414的博客
07-19 164
<el-button type="primary" @click="createdDB">创建数据库</el-button> <el-button type="primary" @click="addDB">添加数据</el-button> var db; createdDB() { var request = window.indexedDB.open("db", 3); request.onsucces...
浏览器本地存储详解、 cookie、sessionStorage、localStorage、IndexedDB
最新发布
liangzhenmeng的博客
07-28 6万+
服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。
localstorage性能
weixin_33727510的博客
02-18 142
http://www.36ria.com/6075
HTML + jQuery + indexDB将数据缓存到浏览器
weixin_43876005的博客
03-15 859
主要适用于大量数据进行浏览器缓存，减少二次加载的时间，具体实现方法如下： 1.首先设置缓存，初始化 function setCache(){ var request = indexedDB.open('userone',11); request.onerror = function(e){ }; request.onsuccess = function(e){ var db = e.target.result; //insertDate(db); //添加数据 }; request.o
前端性能优化(三)——浏览器九大缓存方法(1)
radcb55226的博客
04-22 1116
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。[外链图片转存中…(img-nZUecdw4-1713722117723)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。
前端数据存储：cookie、localStorage、sessionStorage、indexDB差异分析，及简单使用介绍
sinat_35299495的博客
08-17 898
一，总述 特性 cookie localStorage sessionStorage indexDB 数据生命周期 一般由服务器生成，可以设置过期时间 除非主动清理，否则一直存在 页面关闭时清理 除非主动清理，否则一直存在 数据存储大小 4K 5M 5M 不限 与服务端通信 每次都会携带在 header 中，对于请求性能影响 不参与 不参与 不参与 使用原则： 如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数
使用HTML5 IndexDB存储图像和文件的示例
01-19
有一天，我们写了关于如何在localStorage中保存图像和文件的文章，它是关于我们今天可用的实用主义。 然而，localStorage有一些性能影响 – 我们将在稍后的博客中讨论这个问题 – 并且未来期望的方法是使用IndexedDB。 在这里，我将向您介绍如何在IndexedDB中存储图像和文件，然后通过ObjectURL呈现它们。 本文是翻译过来的，原文在这里 Storing images and files in IndexedDB 关于作者： Robert Nyman [Editor emeritus] Technical Evangelist & Editor of Mozill
管理单个 indexDB 项目的 React 副作用挂钩。
06-08
react-use-idb (useIdb) 管理单个 indexDB 项目的 React 副作用挂钩。 对 useLocalStorage 的直接替换。 为什么 ？ LocalStorage 是同步的，因此存在性能问题 LocalStorage 也受到限制，仅存储字符串并且不提供用于序列化/反序列化数据的默认机制。 相反，我们可以依靠 indexDB 进行结构克隆。 用法 import { useIdb } from 'react-use-idb' const Demo = () => { const [value, setValue] = useIdb('my-key', 'foo') return (
浏览器缓存优化——indexDB
weixin_44235350的博客
03-22 496
前端浏览器缓存优化indexDB
前端缓存——IndexDB封装
义陆·逍遥
03-24 1675
indexedDB是一种轻量级NOSQL数据库，是由浏览器自带。相比Web Sql更加高效，包括索引、事务处理和查询功能。 关于indexedDB的介绍请参考其他资料，本文主要基于ES6对indexedDB进行封装，废话不多说，直接上代码： IndexedDB类 export type DBTable = { dbName: string; tables: string[]; version?: number; callback?: any; storage?: any; }; /**
浏览器缓存技术indexedDB的应用
weixin_43862492的博客
08-18 768
前端数据缓存技术indexedDB的使用
localStorage的数据为什么要用vuex维护——localStorage的读取性能
Vgbire的博客
10-12 2127
localStorage的读取是一次磁盘文件的读取
indexDB入门
小白目的博客
03-23 6477
引言： 常用浏览器缓存： 1.cookie:大小不超过4kb,每次请求发回服务器 2.SessionStorage：会话窗口缓存，大小在5mb左右，不能永久缓存 3.localStorage：大小跟SessionStorage差不多，不提供搜索功能，不能建立自定义索引 如果需要用大更大的缓存容量，以及要求存储图片模型等文件且在意性能，就需要用的我们的indexDB，它是浏览器提供的本地数据库，可以被网页脚本创建和操作，允许存贮大量数...
前端性能优化
花神的博客
05-24 319
前端性能优化 资源的加载方式 懒加载 适用场景：页面很长，图片很多 原理： 可视区内部的图片正常加载，可视区外的图片src设置为预览图，将图片的src放在img标签的data-src属性中，如 &amp;lt;img data-src='img/pic.png' src=&quot;img/demo.png&quot;/&amp;gt; 实现方式： 1. 手动实现 2. lazyload.js 预...
前端性能优化：从Cookie到Web Storage、IndexDB详解
本文档属于前端性能优化系列的一部分，主要关注于本地存储技术在Web性能提升中的作用，特别是从Cookie到Web Storage（包括localStorage和sessionStorage）和IndexDB的演进。随着移动互联网的发展，WebApp的性能优化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值