Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm building a guestlist app for my company using PHP, Javascript/jQuery/Ajax, JSON and localstorage. It will be used on smartphones: primarily Iphone 4. I'm using localstorage as my cache since the search-part of the application has to work in offline mode.

I'm having performance issues while searching through a guestlist.

The app's flow looks like this (for this examaple I'm working with guestlist which contains 600 guests)

1. Retrieve all guests from the server with PHP encode with JSON and send back to js via AJAX. This works fine.

2. Parse the PHP responseText (called phpData) using JSON.Parse: 

var parsedMysqlData = JSON.parse(phpData);

which gives us an JSON.Array containing 600 objects looking like this:

Object:  {
Id: Int
EventId: int
guestInfo: string
guestlist: string
guestName: string
reference: string
total: int
used: int
}

3. Save the JSON.Array to the user's localstorage using JSON.Stringify:

 localStorage.setItem(0, JSON.stringify(parsedMysqlData));

4. when the user starts searching we get his search string then retrieve our guestlist using JSON.parse in localstorage like this:

 var currentGuestlist = JSON.parse(localStorage.getItem(0));

And then iterate through our objects using this for-loop trying to match his search string with our guests the array currentGuestlist:

 for (i=0; i<currentGuestlist.length; i++) {
 // match 'currentGuestList[i]['name']' with what the user typed in search form 
}


For some reason this takes a really long time on an iPhone 4. Searching through 600 objects will freezes the iphone for about 4 seconds before returning the matches.

Before storing arrays containing JSON objects in localStorage and parsing it with JSON, I simply stored unordered strings in localStorage and it work a whole lot faster. The JSON objects ad structure to the data stored in localStorage which is crucial. So I guess the speed issue has to have something to do with the fact that I'm using JSON objects? How can i structure my data i localStorage in an organized way while still maintaining as good speed performance as before?

Lastly anykind of tips or advice on which techniques you would use to make this app as lightweight and fast as possible is greatly appreciated.

share|improve this question

2 Answers

up vote 1 down vote accepted

Are you fetching the list per each search from the local storage? Don't do that, instead store it in the local storage only as needed (whenever it changes), and keep it always as a data structure.

Simply having objects instead of plain strings cannot be the reason for slowness, as everything in JavaScript is an object already, and thus it should only be slowing by a constant factor.

Furthermore, if this is about autocomplete kind of behaviour, then I suggest you would slow down the search, and also consider that if the user types in the box "Ma", the list gets filtered, and the user adds "tt" for "Matt", only previously filtered matches need to be considered...

share|improve this answer
Great answer but this doesnt seem to solve my speed-issue. 1. Before I iterate through the guestlist I fetch it from localStorage. This is done before the loop. (see step 4: variable CurrentGuestlist). What do you mean by keeping my guestlist as a datastructure? 2. Right now it feels like the only difference between my fast and fluid code and this slow code is the fact that I now am using JSON obj instead of strings placed in arrays. But you are 100% certain that JSON objects cant slow this down? Note that my search is going through an array containing those objects. 3. Great advice, thx! – nalas May 16 '12 at 16:13
I mean: most of the time you must not call JSON.parse, but instead save the result and use it. The only time you would need JSON.parse (and localStorage.getItem()) would then be when the program was first started. – Antti Haapala May 16 '12 at 18:33
I just want to get back and tell you what was making the search go so slow: We didnt use the key in LocalStorage while accessing our saved guests. That was the difference between a very fast and fluid search and the slow one. So what we learnt here was that accessing localstorage objects via Key is faster than looping through the same data with a for-loop. Its even way faster... – nalas May 29 '12 at 8:55
up vote 0 down vote

Perhaps your set up would me more suited to use the WebSQL-database instead of storing a JSON object in the local storage. WebSQL is now deprecated but it's pretty well supported in webkit-browsers. and i'm using it with good results on a couple of projects.

You can read more about it here: http://html5doctor.com/introducing-web-sql-databases/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.