使用 LocalStorage 和 AngularJS 的缓慢应用
Slow app with LocalStorage and AngularJS
我创建了一个应用程序来存储、比较、过滤并从记录集合中获取统计信息。我已经这样做了，所以它可以离线工作，因为在某些用户情况下，用户可能无法持续（或根本无法）访问互联网。
我的问题是，在我添加了大约 60 条记录后，应用程序开始运行 非常 缓慢。例如，我将 LocalStorage 中的一组简单对象列到 ng-model（Select 列表）中，在这 ~60 条记录进入后，打开 Select 框会严重变慢。
可能是什么问题？我在想，要么是某些功能占用了不必要的资源，要么是 LocalStorage 不适用于此类用途？
我开始接触 PouchDB，您认为将所有内容迁移到 Pouch 而不是 LocalStorage 会是一个好的举措吗？
我无法将整个控制器粘贴在这里，因为它太大了，但我已经放了一个在线版本进行测试。可以看到here.
为了让您不必为了查看效果而创建 60 条记录，您可以 download this CSV 并将其导入到应用程序中。
为了导入，编辑模式的通行证是：admin
让我们看看是否有人对此有提示！
我看到您将所有记录存储在单个 LocalStorage 值中（键为 recordspax）。所以是的，这会变得很慢，因为你的应用程序必须 1) JSON parse/stringify 和 2) store/retrieve 整个列表 每次你read/write 数据到数据库。
基本上，对于每个操作，您都在将整个数据库读入和读出磁盘。由于 LocalStorage 和 JSON stringify/parse 在主线程上同步发生，它可以阻止 DOM 渲染，从而减慢您的应用程序。
PouchDB 在这里可能会有所帮助，但您也可以从更简单的东西中受益，例如 LocalForage，或者简单地更改您的数据库设计，以便每条记录都有自己的 key/value，而不是将所有内容都存储到具有单个值的单个键。
（LocalForage 和 PouchDB 都使用 IndexedDB/WebSQL 而不是 LocalStorage，这意味着数据库操作不是同步的并且不会阻塞 DOM。但是，您仍然不想将所有内容都塞入单个文档，因此将整个数据库读入和读出磁盘。:))
我创建了一个应用程序来存储、比较、过滤并从记录集合中获取统计信息。我已经这样做了，所以它可以离线工作，因为在某些用户情况下，用户可能无法持续（或根本无法）访问互联网。
我的问题是，在我添加了大约 60 条记录后，应用程序开始运行 非常 缓慢。例如，我将 LocalStorage 中的一组简单对象列到 ng-model（Select 列表）中，在这 ~60 条记录进入后，打开 Select 框会严重变慢。
可能是什么问题？我在想，要么是某些功能占用了不必要的资源，要么是 LocalStorage 不适用于此类用途？
我开始接触 PouchDB，您认为将所有内容迁移到 Pouch 而不是 LocalStorage 会是一个好的举措吗？
我无法将整个控制器粘贴在这里，因为它太大了，但我已经放了一个在线版本进行测试。可以看到here.
为了让您不必为了查看效果而创建 60 条记录，您可以 download this CSV 并将其导入到应用程序中。
为了导入，编辑模式的通行证是：admin
让我们看看是否有人对此有提示！
我看到您将所有记录存储在单个 LocalStorage 值中（键为 recordspax）。所以是的，这会变得很慢，因为你的应用程序必须 1) JSON parse/stringify 和 2) store/retrieve 整个列表 每次你read/write 数据到数据库。
基本上，对于每个操作，您都在将整个数据库读入和读出磁盘。由于 LocalStorage 和 JSON stringify/parse 在主线程上同步发生，它可以阻止 DOM 渲染，从而减慢您的应用程序。
PouchDB 在这里可能会有所帮助，但您也可以从更简单的东西中受益，例如 LocalForage，或者简单地更改您的数据库设计，以便每条记录都有自己的 key/value，而不是将所有内容都存储到具有单个值的单个键。
（LocalForage 和 PouchDB 都使用 IndexedDB/WebSQL 而不是 LocalStorage，这意味着数据库操作不是同步的并且不会阻塞 DOM。但是，您仍然不想将所有内容都塞入单个文档，因此将整个数据库读入和读出磁盘。:))