1

I have a list of approx. 2000 questions and I am trying to create an interface where you can filter through them all using a text input.

I tried going through this React tutorial since i thought it would perform well enough but there is a considerable lag. Or at least there is when I run the code in an Electron container (perhaps I'd get better performance compiling it with Webpack). I just tried putting my code in to a jsfiddle and with 3000 elements the performance starts to suffer.

Is it futile trying to search through this many objects with html and js or is there a simpler way with better performance?

Improve this question
1

1 Answer 1

Reset to default
2

So the lag is not because of the filtering, but because you are trying to render too many objects in one hit. You can see this by typing a sequence of zeros into the filter input. Each zero typed requires less time, as obviously the result size gets smaller and smaller.

I have updated your fiddle here to show the performance if you only render the first 100 items in the result set (even though all 3000 are processed on each input change).

Essentially I am just generating the full rows variable, and then using .slice(0, 100) to generate a truncated version before rendering.

What you should do in this situation is think about UI/UX, and that it really isn't necessary to render thousands of items at the same time. You could implement some sort of pagination or infinite scroll, etc.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Good point about the UX. I haven't really found a good way to navigate 2000 questions, but they are divided in sections so that could be a first step. I guess the idea is to not render the questions I cannot see anyway. Then again - something like this jsfiddle.net/hkwdw77c using jQuery seems to have decent performance .
While you should be able to get a few thousand rendering quickly, it really shouldn't be done that way. Users are only ever going to see x at a time, so things like infinite scroll can make the page appear as though it is rendering as many as you want without the processing overhead.
Also I found clusterize.js which seems to fit my use case. Example with search.
Thanks. And for React this might be a good place to look: github.com/bvaughn/react-virtualized

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.