缓慢的应用程序使用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屋！