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

Question

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

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

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

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

Answer 1

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

One of many good resources on our lovely web

And another one

Answer 2

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