Real world JavaScript performance mess

For a change, a post that is neither a rant nor a joke. Yes, I can hear people leaving already...

Well, I wanted to show a funny fact about JavaScript performance in a real-world case. The task is quite simple. I have a ul with 1549 (!) li elements, each with a unique id. I want to show only those whose id contains a certain substring (instant search).

For this task I have two candidates, either using jQuery selectors or "manually" filtering the list. The code is as below:

$(field_search).parents(".search_realm").find(".search_item").each(function(){
    if(this.id.indexOf(text) == -1){
        $(this).hide();
    } else {
        $(this).show();
    }
});

The jQuery option is:

$(field_search).parents(".search_realm").
            find(".search_item[id*="+text+"]").show();
$(field_search).parents(".search_realm").
            find(".search_item:not([id*="+text+"])").hide();

As you can see, it's not that complicated. Of course, suggestions accepted ;)

Now let's see the results (Hide/Show) in ms, averaged over multiple runs:

Manual         jQuery       [Browser Version]
Firefox Linux:   510/810        350/750      3.6.13
Firefox WinXP:   240/589        114/550      3.6.13
Chromium Linux: 1680/14320       35/14600    9.0.597.94
Chrome WinXP:   2340/12500       60/12600    9.0.597.107
IE7:             320/320        410/3000     7.0.5730.13

jQuery version: 1.4.4, 1.5.1 (minified)

That's right, no typos there. Weird facts:

1. Chrome is slower than firefox in 3 out of 4 cases, 2 of them being a trainwreck case.
2. Showing the previously hidden li elements takes significantly longer than the opposite except in IE7, manual method. In Chrome showing things back takes 10x more time, 500x (!) jQuery case.
3. jQuery makes it slighty faster for Firefox, variable on Chrome, slower on IE7.
4. Firefox on Windows is faster than on Linux. For Chrome results are mixed.
5. Chrome is both the best and worst performer, by an order of magnitude in both cases.
6. IE7 is capable of the fastest time to show the elements back, Chrome the slowest. Firefox is neither, but it's the best on average.

The performance fight is far from being over...

Update: In the end, after some hacks, Chrome wins the battle...