Building a Fast People-Finder for Flickr with YUI AutoComplete » Yahoo! User Interface Blog

Building a Fast People-Finder for Flickr with YUI AutoComplete » Yahoo! User Interface Blog

In the end, we found two transport/parse techniques that turned out to be extremely fast:
* we switched from using Ajax to instead fetching the data using a dynamically generated script tag. This means that the contact data was never treated as string, and was instead executed as soon as it was downloaded, just like any other JavaScript file.
* This approach looked perfect, except for one thing: in order for this JSON to be executed, we had to wrap it in a callback method. Since it’s executable code, any website in the world could use the same approach to download a Flickr member’s contact list. This was a deal breaker.
* The challenge would be to create a format that we could parse ourselves, using JavaScript’s String and RegExp methods, that would also match the speed of JSON executed natively. This would allow us to use Ajax again, but keep the data restricted to our domain.
* we restricted ourselves to a method that we knew to be fast: split(). We used control characters to delimit each contact, and a different control character to delimit the fields within each contact.
* We used control characters to delimit each contact, and a different control character to delimit the fields within each contact.

that.contacts = o.responseText.split("\\c");

for (var n = 0, len = that.contacts.length, contactSplit; n < len; n++) {

 contactSplit = that.contacts[n].split("\\a");

 that.contacts[n] = {};
 that.contacts[n].n = contactSplit[0];
 that.contacts[n].e = contactSplit[1];
 that.contacts[n].u = contactSplit[2];
 that.contacts[n].r = contactSplit[3];
 that.contacts[n].s = contactSplit[4];
 that.contacts[n].f = contactSplit[5];
 that.contacts[n].a = contactSplit[6];
 that.contacts[n].d = contactSplit[7];
 that.contacts[n].y = contactSplit[8];
}

* Regardless of how much we optimized our search method, we could never get results to return in less than 200ms (even for trivially small numbers of contacts). After a lot of profiling and hair pulling, we found the queryDelay setting. This is set to 200ms by default, and artificially delays every search in order to reduce UI flicker for quick typists. After setting that to 0, we found our search times improved dramatically.