Improve the performace of multi string search in javascript

Question

I am searching through large set of an array with length more than 10000.

sample array should look like this.

let data = ['Hello world mr tom', ........]; // array length of 10000 with different strings

let input = '' // string gets from input field

and this is my code.

this.results = []; for (let i = 0; i < data.length; i++) { if (input.toLowerCase().split(' ').every(val => data[i].toLowerCase().includes(val))) { this.results.push(data[i]) } }

it is working, but it is taking too much time to load. let's say in my array list i have a common string called Hello world when entering this string in the input field, it is taking too much time to load. Is there any optimized way to acheive this search with lesser amount of time.

One quick change is saving the results of the split into a variable instead of doing it every iteration — Andy Ray
– Andy Ray, Commented Mar 25, 2021 at 2:43

CertainPerformance · Accepted Answer · 2021-03-25 02:47:11Z

Add a debounce function. Don't filter the data immediately - instead, wait until around 500ms after the user has stopped typing, then perform the filtering action.
```
let timeoutId; input.addEventListener('input', () => { clearTimeout(timeoutId); timeoutId = setTimeout(filterResults, 500); }); 
```
(where filterResults, of course, filters the results with the input's value)
Call toLowerCase on the data elements just once, ahead of time, not on every iteration in the loop or after each input change:
```
const data = [/* your data */]; const lowerData = data.map(str => str.toLowerCase()); // then use `lowerData` instead 
```
Call toLowerCase and .split on the input string outside of the loop beforehand, instead of on every iteration
Client-side is not meant for handling huge amounts of data, especially on lower-end phones. Performance suffers. For huge amounts of data, consider doing the filtering server-side instead.
If you have no choice but to do this client-side, perform the calculations in a separate Web Worker so that the page's main UI remains responsive while it's going on

is it possible to show me the code with adding debounce function.
Or, just a suggestion, you could just make the search async.
If the answer satisfies your needs, please make sure to mark it as correct!
is there any sample blog post to make it in a seperate web worker @CertainPerformance
@htoniv In a single script file: stackoverflow.com/a/58262471 With multiple script files: developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/…

Dharman · Accepted Answer · 2021-03-25 03:17:36Z

I think you can take a look at these algorithms. You can try to adapt them to this problem or even to other string problems that you may have.

Collectives™ on Stack Overflow

Improve the performace of multi string search in javascript

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related