javascript - 在 javascript 中搜索项目列表的性能

Question

我有一份大约的 list 。 2000 个问题，我正在尝试创建一个界面，您可以在其中使用文本输入过滤所有问题。

我试过 this React tutorial因为我认为它会表现得足够好，但有相当大的滞后。或者至少当我在 Electron 容器中运行代码时(也许使用 Webpack 编译它会获得更好的性能)。我只是尝试将我的代码放入一个 jsfiddle 中，但如果有 3000 个元素，性能就会开始受到影响。

尝试使用 html 和 js 搜索这么多对象是徒劳的还是有更简单的方法性能更好？

Answer 1

所以延迟不是因为过滤，而是因为您试图一次渲染太多对象。您可以通过在过滤器输入中键入一系列零来查看这一点。键入每个零所需的时间更少，因为结果大小显然变得越来越小。

我已经更新了你的 fiddle here如果您只呈现结果集中的前 100 个项目(即使在每次输入更改时处理所有 3000 个项目)，以显示性能。

本质上，我只是生成完整的 rows 变量，然后使用 .slice(0, 100) 在渲染之前生成一个 chop 的版本。

在这种情况下您应该做的是考虑 UI/UX，并且确实没有必要同时呈现数千个项目。您可以实现某种分页或无限滚动等。