javascript - 使用 LocalStorage 和 AngularJS 的缓慢应用程序

Question

我创建了一个应用程序，可以存储、比较、过滤并从记录集合中获取统计信息。我这样做是为了让它可以离线工作，因为在某些用户情况下，用户可能无法持续(或根本)访问互联网。

我的问题是，在包含约 60 条记录后，应用程序开始运行非常缓慢。例如，我将 LocalStorage 中的简单对象集合列出到 ng-model(选择列表)中，在放入大约 60 条记录后，打开选择框的速度将严重减慢。

问题可能是什么？我在想，要么某些功能占用了不必要的资源，要么 LocalStorage 不适合此类用途？

我开始接触 PouchDB，你认为将所有内容迁移到 Pouch 而不是 LocalStorage 会是一个好的举措吗？

我无法将整个 Controller 粘贴到这里，因为它太大了，但我已经放置了一个在线版本进行测试。可以看到here .

为了让您不必为了看到效果而创建 60 条记录，您可以 download this CSV并将其导入应用程序中。

为了导入，编辑模式的密码是:admin

让我们看看是否有人对此有任何提示!

Answer 1

我看到您将所有记录存储在单个 LocalStorage 值中(键为 recordspax)。所以，是的，这会变得非常慢，因为您的应用程序必须 1) JSON 解析/字符串化和 2) 每次向数据库读取/写入数据时存储/检索整个列表。

基本上，每次操作都会从磁盘中读取整个数据库。由于 LocalStorage 和 JSON stringify/parse 在主线程上同步发生，因此它可能会阻止 DOM 渲染，从而减慢您的应用程序的速度。

PouchDB 可能会在这里提供帮助，但您也可以从像 LocalForage 这样更简单的东西中受益。 ，或者只是更改数据库设计，使每个记录都有自己的键/值，而不是将所有内容存储到具有单个值的单个键中。

(LocalForage 和 PouchDB 都使用 IndexedDB/WebSQL 而不是 LocalStorage，这意味着数据库操作不是同步的，并且不会阻塞 DOM。但是，您仍然不希望将所有内容都塞到单个文档中，因此需要读取整个文档数据库进出磁盘。:))