Question

I have a array of data ,let us say var products =[]; products array will contains 10000 elements
Now i just want to find out all the products which is having name item1 .
In this case which one is efficient(in case of performace) making an ajax call to server to get the items with name item1, or Loop through products array.

Answer 1

Personally I wouldn’t recommend you to keep 10000 elements in browser.

You can do a simple test to see how much memory it will take. I’ll explain it with Chrome browser.
Open blank page, hit F12 to open developer tools and go to ‘Profiles’ tab. Then simply click on the ‘eye’ icon on the bottom – you will see new memory snapshot on left. When you click its size will appear under its name. Next go to ‘Console’ tab and run this code:

var products = {};
for (var i = 10000; i--; ) {
    products['name' + i] = {
        id             : i, 
        description    : (new Array(201)).join('x')
    };
}

Then return to the ‘Profiles’ tab and take second snapshot with ‘eye’ icon. When you compare their size you will see how much memory this simple objects took. In my case it is about 3MB and this are simple objects only with two fields: id and 200 chars of description. If you would have more complicated objects it would take much more. Of course it would be better if you would use objects similar to your to see how it would look like.

Second thing is that if you decide to use them in browser you have send all of them to it. So with simple objects like above even when you strip unnecessary whitespaces and single object will look like this:

p['namex']={id:x,description:'200 chars here....'};

and it will take about 250 chars per one entry, so with 10 000 entries you will send about 250 x 10 000 = 2 500 000 chars which is approximately about 2.5MB. And you will send this to client on every page reload/refresh.

Third point: if you would like to do searching by name (as you wrote in your question) you can’t use javascript object to this – objects with the same name overwrite predecessors. In this case you should rather use simple array. Moreover even if names would be different and you would like to search names which contains some string, e.g. you have this data

products['item1']     = {/** some data */};
products['foo']       = {/** some data */};
products['item13']    = {/** some data */};
products['bar']       = {/** some data */};
products['xitem1']    = {/** some data */};

and you would like to find all products which contains word ‘item’ you should use array instead of object because iterating over array is faster than iterating on object with for .. in loop (moreover iterating on array in reverse order is also quite faster than in standard order).

When it comes to server side searching there is also a lot of things to consider – performance can depend on many factors like your backend technology (language, database) and also can be boosted by e.g. memcached or redis which should give you really good time of response, and I’m sure that this would be better than sending all data from database to client on each request and dealing with it in browser 🙂