具有 1,000 行和 5,000 个输入的 Angular 表的缓慢渲染

Posted 2023-02-24

【中文标题】具有 1,000 行和 5,000 个输入的 Angular 表的缓慢渲染

【英文标题】：Slow rendering of Angular table with 1,000 rows and 5,000 inputs

【发布时间】：2016-01-01 10:24:48

【问题描述】：

我正在显示一个 Angular 表，其中包含大约 ~1,000 行和每行 5 个输入（总共 5,000 个输入字段）。这是一个标准的 Angular 表，行中带有 ng-repeat。

数据快速下载到客户端。但是 - 问题是缓慢的 Angular 渲染。

在 MacBook Pro 上，加载需要 10 秒。在 Chromebook 上，这需要 40 多秒。

我正在寻找一种懒惰的 RENDER 方法。我相信你们中的许多人都遇到过这个问题 - 谁能指出可能的解决方案？

【问题讨论】：

在单元格内使用分页和按需编辑来避免输入的所有监视

我们正在使用实时搜索，因此我们希望避免分页。您能否举例说明如何创建“按需编辑”？我们既有移动（触摸）用户，也有笔记本电脑，他们希望在输入字段之间切换（类似于 Excel 类型表）。

分页并不意味着你不能同时使用过滤。就地编辑的一个例子是x-editable

如何设置实时搜索过滤？ （抱歉有问题，还在习惯 Angular）

很多关于使用角度过滤器的例子，包括在文档中。还有许多带有您提到的功能的表格/网格模块

【参考方案1】：

使用分页 仅使用编辑模板和编辑按钮为每行添加输入 用户 $compileProvider.debugInfoEnabled(false) 删除调试类 尝试通过添加“track by”来利用您的项目 ID 如果您有只读的值，请使用一次绑定::property 如果您有许多表单字段，请尝试ng-model-options=" debounce: 250 尽可能使用 ng-if 代替 ng-show 以避免添加许多未显示的内容 在 ng-repeat 中使用 limitTo 来限制显示的项目数 使用 chrome 开发工具栏时间线来识别函数中的瓶颈

One of many good resources on our lovely web

And another one

【参考方案2】：

因为问题在于渲染，您可以使用过滤器来限制 ng-repeat 返回的字段数量。然后只需对多余的行进行分页。

【讨论】：

啊是的忘记限制了。这也是加快速度的好方法。不错！

如果没问题，我也会将其添加到我的答案中。我给了你一个赞成票，所以应该没问题:)

我忘了添加 - 我们正在使用实时搜索。如何过滤以呈现仅在屏幕上可见的那些行？