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

最新推荐文章于 2025-09-25 11:11:02 发布
原创 最新推荐文章于 2025-09-25 11:11:02 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文总结了利用前端缓存技术indexDB和localStorage进行性能优化的经验。通过测试，indexDB功能强大但API复杂，而localStorage操作简便。优化实践显示，结合gzip，门诊首页的数据加载量从9MB降至300KB。文中提供了代码示例，并讨论了缓存的清理策略，包括手动清理和定时刷新。

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比较简单易用 就setitem getitem就可以了

localStorage.getItem

资料上说有个5M

最低0.47元/天 解锁文章
attilax
关注
Openlayers实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-28 2016
在入门教程中，我们已经详细介绍了如何对地图瓦片进行缓存，请参考《Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能》，缺点是占用内存过多，那么如何再次优化呢，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。为什么不使用LocalStorage？因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。
前端缓存策略对比：LocalStorage vs SessionStorage vs IndexedDB
AI架构全栈开发实战笔记
04-27 1002
随着单页应用（SPA）和渐进式Web应用（PWA）的普及，前端应用对客户端数据存储的需求日益复杂。浏览器提供了多种存储机制，其中和IndexedDB是最常用的三种方案。本文旨在通过技术原理对比、API细节解析和实战案例演示，帮助开发者理解三种存储策略的核心差异，掌握在不同场景下的选型原则。背景介绍：明确技术背景、目标读者和文档结构核心概念与对比：解析三种存储机制的技术原理，通过表格和示意图对比关键特性API深度解析：详细讲解数据操作方法，包含完整代码示例高级特性与限制。
大屏性能优化-数据存储IndexedDB(localForage)
阿琰a_的博客
12-25 1356
最近遇到大屏上的性能问题，发现页面占用内存动不动就是1.8G，页面放置一会浏览器就会自动刷新，原因应该是浏览器的内存占用太大了，浏览器主动释放掉导致的重新刷新。随后为了解决这个问题，发现了占用内存比较的大的代码在地图上；由于地图上要加载非常多的图层，并且图层中的数据量非常大，有整个城市的楼宇覆盖面，小区覆盖面等等，这些数据量还是比较大的，这些存在前端比较占内存，于是寻找到了一种解决办法，利用IndexedDB这种技术将数据存下来，不再利用创建内存变量将数据存下来。
indexedDB本地存储，首页优化
weixin_45890414的博客
07-19 244
<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...
IndexDB 数据库使用
最新发布
weixin_67722778的博客
09-25 407
IndexDB 数据库使用
IndexedDB大规模数据存储性能调优
2501_90410679的博客
05-14 163
通过选择合适的存储格式、优化数据库设计、使用缓存机制和硬件加速技术以及监控和分析性能指标等措施，可以有效地提高IndexedDB的性能和效果。本文将对IndexedDB大规模数据存储性能进行技术总结，旨在帮助开发者提升IndexedDB的性能，优化数据存储效果。在设计数据库时，要遵循良好的设计原则，合理划分表结构，创建有效的索引。同时，可以缓存热点数据缓存页面缓存等，进一步提高数据存储的效率和一致性。在数据库设计中，要遵循良好的设计原则，避免过度冗余和数据冗杂，以提高数据的查询效率。2. 优化数据库设计。
localstorage性能
weixin_30901729的博客
02-18 309
http://www.36ria.com/6075 转载于:https://www.cnblogs.com/daishuguang/p/3554831.html
前端海量数据高效处理与优化解决方案_虚拟列表渲染_WebWorker多线程处理_IndexDB本地存储_大数据可视化展示_性能优化工具包_前端性能瓶颈突破_浏览器大数据处理_海量D.zip
07-18
通过综合运用虚拟列表渲染、WebWorker多线程处理、IndexDB本地存储、大数据可视化展示以及性能优化工具包等技术手段，可以有效地提升前端海量数据处理的效率，优化用户体验，突破浏览器大数据处理的性能瓶颈。
前端 性能优化 （图片与样式篇）
m0_74823715的博客
12-20 1314
懒加载会等到图片在视窗中出现时才开始加载，减少初始页面加载的资源量，占位图则在图片未加载完成前提供一个小尺寸、模糊的占位图，让页面看起来更平滑。通过配置缓存策略，浏览器可以在多次访问时直接加载缓存中的 CSS 文件，避免重新请求 （前端的缓存策略，无非就是 Localstorage，service work）假设你有多个图片，添加 data-src 属性存储图片的实际 URL，src 属性设置为占位符（比如一张模糊的小图或空白图片），这样只有当图片进入视口时，才会加载实际的图片。
前端ServiceWorker + IndexDB实现离线应用与性能优化
qq_39345059的博客
08-04 1299
以下是 ‌IndexedDB核心定义。
使用HTML5 IndexDB存储图像和文件的示例
01-19
有一天，我们写了关于如何在localStorage中保存图像和文件的文章，它是关于我们今天可用的实用主义。 然而，localStorage有一些性能影响 – 我们将在稍后的博客中讨论这个问题 – 并且未来期望的方法是使用IndexedDB。 在这里，我将向您介绍如何在IndexedDB中存储图像和文件，然后通过ObjectURL呈现它们。 本文是翻译过来的，原文在这里 Storing images and files in IndexedDB 关于作者： Robert Nyman [Editor emeritus] Technical Evangelist & Editor of Mozill
HTML + jQuery + indexDB将数据缓存到浏览器
weixin_43876005的博客
03-15 982
主要适用于大量数据进行浏览器缓存，减少二次加载的时间，具体实现方法如下： 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
浏览器缓存优化——indexDB
weixin_44235350的博客
03-22 854
前端浏览器缓存优化indexDB
前端缓存——IndexDB封装
义陆·逍遥
03-24 1890
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 896
前端数据缓存技术indexedDB的使用
localStorage的数据为什么要用vuex维护——localStorage的读取性能
Vgbire的博客
10-12 2262
localStorage的读取是一次磁盘文件的读取
前端性能优化--文件获取优化
weixin_44160385的博客
10-30 558
前端性能优化01 加载文件 css.js http 协议的细节 从 url 到页面渲染完毕，发生了什么 大厂怎么上线前端代码 网络层面优化 从输入 URL 到页面加载完成，发生了什么？ 用户输入域名 - 浏览器通过 DNS，把 url 解析成 IP 和 IP 地址建立 TCP 链接发送 HTTP 请求 服务器接手请求，查库，读文件，返回的 HTTP响应 浏览器收到首屏的 html，开始渲...
indexDB 大图缓存
vagabond_的博客
04-20 2248
通过利用 IndexedDB 进行图片缓存，可以显著提升大屏背景图加载速度，改善用户体验，减少页面黑屏时间。IndexedDB 是浏览器提供的客户端数据库 API，可以在浏览器中存储大量结构化数据，并支持高效的数据检索和查询，特别适合用于缓存大量图片或其他数据。实现图片缓存的步骤包括创建 IndexedDB 数据库、将图片转换为 Blob 对象并存储到数据库中，以及从数据库中获取并展示图片。
dataaccessgateway：基于内存与IndexDB的双层HTTP缓存库
通过引入两层缓存结构——第一级为内存缓存（in-memory cache），第二级为基于 IndexedDB 的持久化缓存（persistent cache），DAG 实现了高性能和高可用性的平衡。 内存缓存作为第一层缓存，具有极快的读取速度，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值