Angularjs用桌子慢了

时间:2016-08-26 05:38:08

标签: angularjs performance

我有一张约30行,约10列的桌子。行是一个更大的集合的子范围(我手动操作以避免巨大的DOM)。这些列存储在[{name: "firstname", width: 200}, {name: "married", type: "bool"}]之类的列表中,这允许一些灵活性(例如显示属性"已婚"作为复选框)。

所以只有大约300个字段,但摘要周期大约需要一秒钟(在我的i5-2400 CPU @ 3.10GHz上)。

我在解释Batarang表演页面时遇到了麻烦。它说

p.name | translate  16.0%  139.6ms
e[c.name]           15.8%  138.4ms
c.name | translate  11.1%   96.3ms

(稀疏命名的)变量的含义对我来说很清楚:

  • e代表实体,即表格行。
  • p代表财产,只发生在表外。
  • c代表专栏。
  • e[c.name]代表字段内容(来自实体ec命名的属性)。

但是表现数据毫无意义:

  • p.name只使用了10次,怎么可能需要那么久?
  • c.name | translate也只出现了10次(在标题行中),怎么可能需要那么长时间?

我意识到{::a_once_only_bound_expression},我尝试过,但没有取得多大成功。我真正需要的是以下内容:

  • c发生变化时,请重新创建整个表格(这种情况只会异常发生,因此我并不关心速度)。
  • e更改时,重新创建整行(如果有更改,则只在一行中)。

有任何方法可以实现这一目标吗?

解决方案想法

我想,我需要的是使用一个指令在渲染后从行中剥离掉所有角度的东西:

  • 删除所有子范围
  • 所有手表
  • 但保留所有HTML和听众

如果需要,我可以每行添加一个负责重绘的手表。

有意义吗?

更新

我一直忙于处理应用程序 - 改进其他功能而不是性能。我很幸运,并获得了一些表现作为奖金。然后我将页面简化了一点,现在速度可以接受。至少现在。

还是:

  • 我不相信上述Batarang的表现值。
  • 我仍然很好奇如何实施上述解决方案的想法,如果有意义的话。

1 个答案:

答案 0 :(得分:0)

您可能希望查看NgTable来自json数据的输入,因为行和列也可以解决您的性能问题,我建议结帐