UI Grid的性能问题与单元格模板相关

Question

我正在使用angular-ui-grid 3.1.1，每次显示25、50、75条记录，每个单元格都有不同的celltemplates，例如: 点击弹出层、悬停弹出层、文件下载链接、带有档案图片的数据、嵌套表中的数据等。

在网格中呈现的数据很好，但是对于一些秒数，ui grid会变得无响应。

此外，我已经创建了一个外部列选择器。选择要显示/隐藏的列时，网格会变得无响应几秒钟。(ui-grid提供的内置列选择器也具有相同的无响应行为)

请建议任何修复方法。

- user3816152

---

你能发布一下你已启用的网格选项吗？ - S. Baggy

你是一次性从服务器加载所有数据还是分别发出25、50、75个请求？ - fauverism

我正在使用分页功能，每次显示25/50/75条记录。 - user3816152

你能创建一个 Plunkr 来展示你的问题吗？ - Mohsin Muzawar

尽可能使用ng-if而不是ng-show/ng-hide。由于ng-if实际上会将项目从DOM中删除，并且内存中的对象较少，因此在涉及大量对象时，它往往可以显著提高性能。我不使用UI Grid，因此我不确定它在这里适用程度如何。 - Mike Feltman

你是否正在同步加载数据，导致网格在显示DOM节点之前等待数据？在这种情况下，Plunker会非常有帮助。 - Luca De Nardi

Answer 1

很遗憾，由于类似的问题，我们不得不放弃使用UI Grid。然而，问题并不在UI-Grid中，而是在Angular性能上的不足。在我的情况下，我使用ReactJS构建了一个网格，然后创建了一个Angular JS指令包装器来覆盖它。即使只是将带有大量行/列的Angular HTML放置在上面，速度也不够快。在切换到UI-Grid之前，您可以尝试的最后一件事是查看行/列虚拟化是否已启用。这是测试选项：columnVirtualizationThreshold。

- michael pilote

Answer 2

如果您不想更改作用域变量，请在模板中使用单向数据绑定，它将为您提供一些性能优化：

<span>{{::variable}}</span>

重要提示：请注意，除非您刷新视图，否则它将不再更新数据。

- segu