jQuery Mobile Filtered List slow with 150 items on iPhone 3GS

Question

Im using the jQuery Mobile Filtered List:

http://jquerymobile.com/demos/1.0.1/docs/lists/lists-search.html

On my PC it works fine but on my iPhone 3GS its quite

Answer 1

I haven't yet found a workaround to the filter search bar being slow, however, if you remove all anchor tags and roles from your UL LI list, this will remove hundreds of bindings that slow down the page load and transitions. You then have to add a function:

    // should be defined in your body onload method, or pageinit
    $("li").on("click", function(event) {
    // determine your URI here you want to load
    // ...
        $.mobile.changePage(uri);
    }; // if list dividers exist, add code to ignore them, or get page load error.

Update: As per the docs, if you add the following to mobileinit, the search substring applies to the beginning of the words being searched:

    $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
        return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;
    };

Note: This still doesn't speed up the search bar entirely. Hitting backspace is especially slow because of the instant search and DOM update. I don't see an API hook to fix this (yet?)...it may require library modification.

Aside: stackoverflow's code validator is overly picky, so I left out details, like the explicit mobileinit code...

---

Update: If you get to using CSS3 transitions and have problems, consider the following...

If you encounter rendering artifacts on iOS due to the tiled rendering engine of the GPU not vsync-ing after the transition, the following may help:

    <style type="text/css">
      html, body { -webkit-transform: translateZ(0); }
    </style>

Answer 2

My conclusion is that jQuery Mobile is just plain slow. Ive rebuilt an exact copy of my site with just jQuery and the performance is much better. Maybe its because its a young framework but my very subjective experience is that its not production ready if you need optimal performance.