javascript - 为超过 20k 行填充表需要大量时间，并且页面在完成后变得无响应

Question

我的表格格式如下：

 <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
              <td>{{friend.name}}</td>
              <td>{{friend.phone}}</td>
              <td>{{friend.age}}</td>
            </tr>

我怎样才能解决这个问题 ？

Answer 1

如评论中所示，您不想同时显示 20k 行。即使 Angular 不是故事的一部分，20k 行对于浏览器来说还是太多了，无法很好地处理。

我在浏览器中显示数据包捕获，我要求所有这些都在页面上

该声明不能证明同时将所有行放在页面上。原因是您永远无法同时看到 20k 行。我的意思是，我现在的显示器只有大约 1k 像素。除非您使用数据创建了一个可视化（并且使用 20k 点仍然会很慢），否则您永远不会同时看到它们。

您想要做的是提供一种用户体验，允许查看所有数据而无需 DOM 中的所有行。眼不见，心不烦（从 DOM 的角度来看）。有几种方法可以做到这一点。一些常见的方法是分页和“虚拟滚动”。这些解决方案通常假设您的服务器正在为您分页数据，但没有什么能阻止您调整它以使用客户端数据，假设您已经将所有数据都保存在内存中。

如果您正在寻找一种无需分页或虚拟滚动的方法，您将等待很长时间。DOM 没有足够的能力来帮助你。

但是，有些人在 Angular 中提出了虚拟滚动的解决方案：

• 角度虚拟滚动
• 怎么做