行业动态 火狐体育app:前端大容量缓存方案-IndexedDB 来源:火狐体育最新官网登录入口 作者:火狐体育app 发表时间: 2022-12-02 09:58:57

  对于做3D WebGL 的开发者来说,加载大量的 hdr、glb、gltf 等文件往往是很令人头疼的,因为这些文件体积不小,在网络侧加载会消耗大量时间,从而影响用户体验。对于这些大文件,localstorage 和 sessionstorage 的缓存容量肯定是不够塞牙缝的。所以这时候我们要请出 IndexedDB。

  IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法, 允许储存大量数据,提供查找接口,还能建立索引。 IndexedDB 的兼容性也还不错,基本上不兼容太老的浏览器,都还是可用的。

  IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库,可以简单认为是一个基于事务操作的 key-value 型前端数据库。它的 API 大部分都是异步。IndexedDB 语法比较底层,所以可以使用一些基于 IndexedDB 封装的库来简化操作:

  关于 IndexedDB 的其他介绍和基本使用可以查看MDN浏览器数据库 IndexedDB 入门教程HTML5 indexedDB前端本地存储数据库实例教程,这里就不多介绍了。

  如果命中了should remain available的值(这个值可以理解为浏览器需要留出来的空间,硬盘容量除去这个值以后的空间就是浏览器临时存储可用空间),则一个来源(“站点”)的配额将为零。should remain available值与在大容量存储上保持空闲的空间有关。从Chrome 67开始,它是2 GB和大容量存储总容量的10%中的较低值。一旦达到此限制,对临时存储的其他写操作将失败,但是临时存储中的现有数据将不会被删除。

  如果尚未达到should remain available值,则配额将为共享池的20%。这表示 (Chrome已保存的临时存储中所有数据的大小,加上Chrome可以将所有数据保存到本地存储而不会达到should remain available值)的20%。

  IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象),所以我们可以把图片或者 3D 模型文件转化成 Blob 格式的文件,存在 IndexedDB 中,就可以解决免去二次加载时网络请求的时间。

  例如,我有一张 20M 的图片在静态服务器上,在浏览器上请求到这张图片后,将它以不同 key 存入 IndexedDB 500 次,也就是相当于在 IndexedDB 中塞入近 10G 大小的 Blob 对象,这里使用 localForage 简化 IndexedDB 的操作,请注意这里的responseType要记得设置为Blob,这样请求到的图片就是 Blob 对象:

  在 chrome 开发者工具中,我们可以清楚地看到,所有的图片以 Blob 对象的形式存储在 IndexedDB 中:

  问题出现 某晚,告警平台发出消息。登录sentry查看发现一个ip短时间内报出了1.3k个error。具体报错信息为 QuotaExceededError,分类为未分类,有效信息不多。 立即百度报错关

  IDBClass 基于promise对indexedDB的简单封装 一.背景 最近在阮一峰的日记里无意间浏览到了indexedDB,标准的客户端存储技术。IndexedDB 是一个基于 JavaScr

  这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战 前言 随着浏览器的功能不断增强,越来越多的网站开始考虑将大量的数据存储在客户端,相比后端接口,获取数据更快一些。现有的浏览器存

  本文介绍了如何使用webworker 和 indexedDB 开启本地缓存提高你应用的性能,并举例图文并貌的展示了如何优化系统加载速度。

  封装一个适合Vue3使用的indexedDB的help。支持初始化、对象化操作、索引查询等功能。自我感觉非常好用。开源哦。

  TagDown 是一款开源的书签管理插件, 您可以使用扩展程序浏览、新增、修改书签,它也支持以不同方式导出书签。 本文主要记录了我在开发 TagDown 扩展程序过程中的一些小收获。

  前言 以前我在掘金上看到面试贴就直接刷掉的,从不会多看一眼,直到去年 9 月份我开始准备面试时,才发现很多面试经验贴特别有用,看这些帖子(我不敢称之为文章,怕被杠)的过程中对我的复习思维形成影响很大,

  使用Promise封装IndexedDB 为何使用IndexdDB IndexedDB 具有以下特点 IndexedDB 数据库存储键值对。

  前言 本篇文章是关于indexDB我的一些学习分享,学习内容来自indexDB W3C规范,大家可以直接查看规范学习,如果对英文规范有理解上的困难,亦可查阅此篇文章学习,这里对规范的内容做了提炼总结,

  WEB本地存储:localStorage、Web SQL Database、IndexedDB

  与 cookie 不同,浏览器本地存储限制要大得多(至少5MB),并且信息不会被传输到服务器。本文将要介绍的本地存储包括:localStorage、Web SQL Database、IndexedDB

  前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的。 这样是一个非常真实的现状,实际上很多前端开发者都是自学甚至转行过来的,前端入门简单,学习了几个API以后上手做项目也很简单,但是这往往成为了限制自身发展的瓶颈。 只是…

  我在2年之前,写过一篇中小型项目的前端架构浅谈。随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了。 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发,分析为什么要这么做,这些设计能解决什么问题,成本和收益如何。 由于作者能力有限,可能会有…

  前端数据的存储方式有多种,IndexedDB最为强大但却比较少被使用,这篇文章主要说说它的特点和用法。

  懂你网络系列7之浏览器缓存cookie,sessions,localStorage,seesioStorage,indexedDB

  由于http是一种无状态的协议,用户在浏览器上的每一次行为都将发送到服务器,而服务器却没法记住跟踪和记录这些行为,以至于相同的行为也会触发请求,这给网络通信带来了极大的性能开销。 HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保…

  前端八股文还是值得深入了解,系统巩固的基础。扎实的基本功还有利于跳槽涨薪的。小知识,大挑战!努力行动起来吧!

  IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。

  半年时间,几千人参与,精选大厂前端面试高频 100 题,这就是「壹题」。 在 2019 年 1 月 21 日这天,「壹题」项目正式开始,在这之后每个工作日都会出一道高频面试题,主要涵盖阿里、腾讯、头条、百度、网易等大公司和常见题型。得益于大家热情参与,现在每道题都有很多答案,提…

  什么是 Indexdb? Indexdb 的优点 存储空间大:没有存储上限,一般来说不小于 250M 存储格式多样: 支持字符串存储 支持二进制存储(ArrayBuffer 对象和 Blob 对象)

  在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 -…

上一篇:新速度 新未来:UBIX泛联信息新一代存储产品发布会在深圳隆重举行 下一篇:冷知识:更大容量的SSD不止会带来更大的存储空间
关注我们
©2022 火狐体育最新登录网址_官网app入口 京公网安备110177777720125 火狐体育最新登录网址|火狐体育app