CODEWITHSUNDEEP
javascriptarraysperformance
htoniv
htoniv

Reputation: 1668

Improve the performace of multi string search in javascript

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.

Upvotes: 0

Views: 46

Answers (2)

Elmar Caixeta
Elmar Caixeta

Reputation: 88

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.

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371193

  • 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

Upvotes: 2

Related Questions