码迷,mamicode.com
首页 > 数据库 > 详细

indexDB解决过的难题

时间:2020-05-20 12:31:10      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:找不到   怎样   大于   ocs   str   撤销操作   读取数据   现在   页面   

我第一次使用indexDB是1年前(2018年10月),运用这个黑科技,解决过3个异常棘手的问题(如果不是indexDB 几乎找不到其他解决方案)所以前端一定要学indexDB!

难题一:本地超大json数据的读取和解析

当时我是负责一个办案app的研发(老项目维护),这是个政府项目,app的使用是在离线环境下进行的,主要运行在特定平板上。
打开app,先进行身份验证,验证通过后会读取并展示本地案件数据。这些数据都是通过文件形式存储的,是用户从电脑上拷贝下来的,主要是很多图片,以及这些图片的ocr识别结果的json文件,对图片进行编目产生的json文件等。读取完毕后,就可以对图片做很多操作了,比如添加批注,标注瑕疵等!

我们遇到的关键的难题是,数据量太大!通常一个案件的材料有200张图片(当然几十张的也有,600张以上的也有,但90%都是200张),下面讨论的都是200张的情况。
读取完一个案件平均用时是5.8s,这太漫长了(当然200张,一本书的厚度呢)。经过排查定位到读取ocr json数据就占5.0s。 ocr的json文件结构相当复杂,有25M左右。读取完json文件中的文本,还要将其转换成js对象!不管怎样,读取25M的数据并转换,花了5.0s,这个平板的性能不咋地呀!

瓶颈在读取数据上,那就采用缓存!
显然indexDB是首选——localStorage等容量太小,而且indexDB可以直接存储js对象,读取数据后不用额外转换了!所以我们的方案是读取ocr数据后,先对其进行裁剪(去掉冗余字段,以及永远用不到的字段),然后放入indexDB。后续每次直接从indexDB读取js对象。经过这一步优化,后续打开一个案件,加载过程大幅加快!
这个项目采用的是vue开发,ocr数据不会展示在页面上,也不会改变,所以又采用了Object.freeze()【参考】加强性能!
然后加载过程变成了1.2s!(由5.8s 变成了 1.2s!)感觉已经是极限了,用户也表示完全能接受,再提速只能从硬件上着手了!

另一个问题:后续加载提升了,首次加载怎么办?首次加载还是要读取文件,转换数据,还要写入indexDB,肯定大于5.8s,怎么办?
用户打开app,需要先做身份校验等系列操作——这个过程很长,可以利用这段时间,在用户无感的情况下,完成首次加载的初始化。
使用web worker技术或使用background task技术(当时使用的是background task方式,不过现在看来最好使用web worker),都可完美解决首次加载的问题。

难题二:编辑任务的步骤缓存

曾经为配音人员处理配音任务 编写了一个配音编辑器,它可以缓存每一步操作的状态,以便能够随时撤销操作;关闭浏览器,下次打开时可以接着编辑。这个数据一样很大,大约300步 缓存就达到了5M,所以只考虑数据大小的话,就应该用indexDB。
不过,缓存步骤并不能简单的把各个步骤放到任务对应的数组中,这还不够,还要有一个对当前缓存的描述:如当前缓存了多少步?撤销了多少步?下次产生新步骤时怎么放入缓存?哪些步骤是无效了的?—— 可以说描述信息很关键,它决定了接下来该怎样操作缓存。步骤的缓存,以及对步骤的描述信息,这两者是强同步的,当修改缓存时,要保证描述信息被同步修改!

这原本是相当难的,用户可以随时关掉浏览器,你甚至没法保证任何同步的事情—— 幸亏indexDB是事务性的,运用事务,一切都迎刃而解。

用户还可以开启多个页面,处理同一个任务!这会引起缓存混乱,但是我们已经有了一个步骤的描述信息,每次写缓存前对传入的信息做个校验,可以很容易识别出混乱!(尽管这个校验还没做,但如果需要也可以很快实现)

难题三:大文件断点续传的任务队列

断点续传:首先将大文件拆成多个文件分片,不断上传分片;浏览器关闭后,下次打开 能够接着上传!这又是一个在浏览器上进行的骚操作,indexDB 可以直接缓存文件,所以这个需求还是比较轻松就搞定了的。
在设计时需要注意,任务信息和对应的上传文件要分开存放:
因为我们需要显示全部任务以便能够对其进行操作(如删除任务,重启已失败任务,暂停任务,立即开始任务),
但浏览器一个标签页能使用的内存有限(1G左右),所以文件不能常驻内存!分开存放可以很轻松的解决这个问题。
这两个objectStore(存放文件的,存放任务信息的)一样是具有事务性的!

此外,用户可能打开多个窗口或标签页,如何保证多个窗口处理任务时不会冲突?用户还可能随时关掉页面再打开,或者随时刷新页面。
对于第一个问题,需保证最多只有一个窗口处理任务。运用  localStorage  就可以实现控制!【参考
第二个问题在indexDB面前完全不是问题!

 

到现在(2020年5月8日17:01:38),使用indexDB这个强大的武器,解决的三个问题都是很棘手的,相信自己会在今后用indexDB创造更多精彩,同时希望也能引起你学习indexDB的兴趣!想学indexDB?可以参考

indexDB解决过的难题

标签:找不到   怎样   大于   ocs   str   撤销操作   读取数据   现在   页面   

原文地址:https://www.cnblogs.com/zhwc-5w4/p/12922612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!