Performance 具有多个选项卡和数据卸载的复杂用户界面

我不熟悉EmberJS，并计划使用它构建一个具有复杂UI设计的单页应用程序，其中涉及多个用于搜索项目的选项卡。例如，以下是导航的外观：

• 客户（选项卡）
  • 订单1（制表符）
    • 搜索1（选项卡）
    • 搜索2（选项卡）
  • 订单2
    • 搜索1（选项卡）
    • 搜索2（选项卡）

最多可以有4个订单选项卡，每个订单选项卡最多可以有4个搜索选项卡。每次搜索最多可返回500条记录

我担心的是，如果同时打开所有选项卡（4x4=16个选项卡），浏览器将需要处理大量数据，如果处理不当，可能会导致性能降低或内存泄漏。因此，我的问题是： 1） 在选项卡之间切换时（特别是搜索选项卡，最多可有1000条记录），如何正确销毁未激活选项卡的数据？ 2） 如果我使用html显示1000条记录，那么Ember可以一次清空整个表容器（来自DOM）的内容，还是需要在迭代中清空内容，一次只删除一行？我认为，在迭代中删除非活动选项卡的数千条记录的内容将非常耗时，并且会导致性能降低。 3） 是否有任何网站已经开发使用这种类型的导航方案的烬

---

非常感谢您提供的任何指导。

只要您为每个选项卡使用单独的路由，那么它应该可以正常工作

无论何时转换到新路由，Ember都会自动刷新视图，删除上一个路由的DOM元素，然后呈现新路由的DOM元素

至于内存，您可以这样做来清除记录：

App.SearchRoute = Ember.Route.extend({
     deactivate:function() {
         var items = this.store.all('item');
         items.forEach(function(item) {
              item.dematerializeRecord();
         )};
     };
});

每当用户离开路线时，就会调用

Deactivate

All

获取存储中当前的所有记录，而不从服务器加载更多记录。不过，我不完全确定这会对浏览器内存产生什么影响

---

我不确定这会产生多大的影响。我的一个应用程序加载了数千条记录，最大的性能损失实际上是从服务器加载记录。一旦加载，路线之间的转换通常相当顺利。

感谢Nicholoas的及时响应，并分享了清除记录的提示。将尝试此选项。我真的很感激。