Angularjs用一张桌子慢

Posted 2023-02-19

【中文标题】Angularjs用一张桌子慢

【英文标题】：Angularjs slow with a table

【发布时间】：2017-01-02 16:39:20

【问题描述】：

我有一个大约 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 性能值。 我仍然很好奇如何实现上述解决方案的想法以及是否有意义。

【问题讨论】：

没有任何代码就不可能对问题进行推理。 “c.name | translate 仅出现 10 次” 这不是重点。问题是多久评估一次？ “p.name 可能只使用了 10 次，怎么会花这么长时间？” 统计数据显示 p.name | translate，这会产生巨大的差异。如果您不更改默认值，translate 过滤器是有状态的，因此成本很高。

@zeroflagL 多久评估一次c.name | translate？我猜每个摘要周期都会出现一次，而摘要周期需要太长时间。还是我错了？如果是这样，我怎样才能知道？ +++关于缓慢的状态循环的好点，我会研究一下。但是每次翻译 > 10 毫秒？？？

一个表达式可以（！）在每个摘要循环中多次测试/评估。并且有状态的过滤器等于“已更改”。

查看此文档，它会对您有所帮助。 coderwall.com/p/d_aisq/speeding-up-angularjs-s-digest-loop

一些代码会有所帮助。

【参考方案1】：

您可能想查看NgTable，它将来自 json 数据的输入作为行和列放置可能也可以解决您的性能问题，我建议您结帐