As the user pans around a Google Map, a list of of currently visible markers is updated. This list contains up to 1000 items, and it slows down when several hundred li's are shown or hidden all at once. It's less than half a second, but it's getting annoying.

An array (newLiList) contains the items which should now be visible. Another array (currentLiList) has the items which were previously visible. Both arrays contain the ids of the li's as indexes.

I did know that those selectors were equivalent, but I didn't know that simplifying it would have as big of an effect as it did (3.5x). However, storing the <li> elements in an array was even faster (4.5x). Thanks!
–
Chris BJun 30 '09 at 23:22

It's not entirely true that li#id and #id is the same. You will get the same object, but the speed will not be the same, but it depends a bit on the DOM. But generally if you traverse a DOM of mixed elements adding the li, div, or what type of element you want to search for will fasten the search by a few ms.
–
googletorpJul 1 '09 at 7:54

@googletorp - I meant that li#id and #id would return the same object. And adding the "li" to "#id" didn't speed up the search - it slowed it down by about 2x.
–
Chris BJul 1 '09 at 14:46

For every single .show() and .hide() function call, you're causing a redraw in the browser.

Setting the whole list to display none before you change the list items will prevent the browser from having to recalculate the flow of the document every time, and then you could set the list back to block.

Alternatively, if you don't want the flicker of the list disappearing, you could clone the list, make all the items hide that should hide, and then replace the old list with the new.

Most likely this is slow because you are asking jQuery to traverse the DOM several hundred times. If you instead made a string with all the Ids seperated by comma you could select and hide/show them all in one action.

Let me clarify a bit what I meant, since if you just do $(string_of_elements) jQuery will of cause traverse the entire DOM for each element.

$("ul#theList").find(string_of_elements).show()

Using this syntax, jQuery will first find the ul element and then only have to traverse it to find the li elements. Now if you have both lists converted to a string, you can do some really neat stuff: