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

Performance of searching through a list of items in javascript

本文关键字：列表性能项目搜索 javascript 更新时间：2023-09-26

我有一个大约2000个问题的列表，我正在尝试创建一个界面，您可以使用文本输入来筛选所有问题。

我试着学习这个React教程，因为我认为它会表现得很好，但有相当大的滞后。或者至少当我在Electron容器中运行代码时（也许用Webpack编译它会获得更好的性能）。我只是试着把我的代码放在jsfiddle中，3000个元素的性能开始受到影响。

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

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

我在这里更新了你的fiddle，以显示如果你只渲染结果集中的前100个项目（即使每次输入更改都会处理所有3000个项目）的性能。

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

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