缓慢的应用程序使用localStorage的和AngularJS [英] Slow app with LocalStorage and AngularJS
问题描述
我创建一个应用程序商店,比较,筛选并采取统计出来的记录集合。我所以它可以离线工作,在一些用户情况下,用户可能没有恒定的(或全部)接入互联网做到了。
I created an app that stores, compares, filters and takes statistics out of a collection of records. I've done it so it works offline, as in some user cases the user might not have constant (or at all) access to internet.
我的问题是,经过我已经包含〜60条记录,应用程序启动时的行为的真的慢。举例来说,我列出了从简单的localStorage对象集合到一个NG-模式(从目录中选择),并经过那些〜60的记录都在,打开选择框中将严重放缓。
My problem is that after I've included ~60 records, the app starts to behave really slow. For instance, I list a collection of simple objects from LocalStorage into a ng-model (Select list), and after those ~60 records are in, to open the Select box will be seriously slowed down.
还有什么问题呢?我想,无论是一些功能是不必要吸吮更多的资源,或localStorage的不适合此类用途?
What could the problem be? I'm thinking, either some function is sucking more resources than necessary, or LocalStorage is not intended for such uses?
我开始进入PouchDB,你会说,迁移所有去眼袋,而不是localStorage的将是一个很好的举措?
I'm starting to get into PouchDB, would you say that migrating all to Pouch instead of LocalStorage would be a good move?
我不能对整个控粘贴在这里,因为它是巨大的,但我已经把一个在线版本进行测试。你可以看到它在这里 。
I can't paste the whole controller here as it's huge, but I've put an online version for testing. You can see it here.
有关你不要有创建60条记录只是为了看到效果,您可以下载这个CSV 一>,并在应用程序中导入。
For you not to have to create 60 records just to see the effect, you can download this CSV and import it in the app.
为了进口,通了编辑模式为:管理
In order to import, the pass for Edit Mode is: admin
让我们来看看,如果有人有这一个提示!
Let's see if someone has a tip for this one!
推荐答案
我看到你存储一个localStorage的价值里面所有的记录(键为 recordspax
) 。所以是的,这将得到相当慢,因为你的应用程序有:1)JSON解析/字符串化和2)存储/检索的整个列表的每次读/写数据到数据库中。
I see you are storing all your records inside a single LocalStorage value (with the key being recordspax
). So yeah, that will get quite slow, because your app has to 1) JSON parse/stringify and 2) store/retrieve the entire list every time you read/write data to the database.
基本上你正在阅读的整个数据库进出磁盘的每个操作。由于两个localStorage的和JSON字符串化/解析主线程上同步发生的,它可以阻止DOM渲染,从而将您的应用程序变慢。
Basically you are reading your entire database in and out of disk for every operation. Since both LocalStorage and JSON stringify/parse happen synchronously on the main thread, it can block DOM rendering and will thus slow down your app.
PouchDB可能是这里的帮助,但你也可以从如 LocalForage ,或者只是简单的东西中受益改变你的数据库设计,使每条记录都有自己的键/值,而不是一切都存储到同一个值的一个键。
PouchDB could be a help here, but you could also benefit from something simpler like LocalForage, or simply changing your DB design so that every record has its own key/value rather than storing everything into a single key with a single value.
(无论LocalForage和PouchDB使用索引资料/的WebSQL,而不是本地存储,这意味着数据库操作不同步,不堵塞DOM。不过,你还是不想一切都塞进一个单一的文件,因此读取整个DB进出盘:))
(Both LocalForage and PouchDB use IndexedDB/WebSQL rather than LocalStorage, meaning that database operations are not synchronous and do not block the DOM. However, you still don't want to stuff everything into a single document and therefore read the entire DB in and out of disk. :))
这篇关于缓慢的应用程序使用localStorage的和AngularJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!