jQuery Mobile 过滤列表在 iPhone 3GS 上有 150 个项目很慢答案

【问题标题】：jQuery Mobile Filtered List slow with 150 items on iPhone 3GSjQuery Mobile 过滤列表在 iPhone 3GS 上有 150 个项目很慢
【发布时间】：2012-05-19 11:42:56
【问题描述】：

我正在使用 jQuery Mobile 过滤列表：

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

在我的 PC 上运行良好，但在我的 iPhone 3GS 上运行速度很慢。输入字母和过滤列表之间大约有半秒的延迟。我有 150 个项目要过滤，从一些谷歌搜索看来这应该处理得很好。那么我只是对响应 id 的速度不切实际，还是可能有问题？

即使单词不是以字符开头，过滤器也会找到字符。所以输入'ar'会找到'Paris'。这对我的应用程序来说不是必需的，我很高兴只有以过滤器开头的字母开头的项目才会返回。是否可以关闭此功能，如果我这样做，我可能会看到明显的性能优势吗？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

我还没有找到过滤器搜索栏变慢的解决方法，但是，如果您从 UL LI 列表中删除所有锚标记和角色，这将删除数百个减慢页面加载和转换的绑定。然后你必须添加一个函数：



    // 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.

更新：根据文档，如果您将以下内容添加到 mobileinit，搜索子字符串将应用于正在搜索的单词的开头：



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

注意：这仍然不能完全加快搜索栏的速度。由于即时搜索和 DOM 更新，按退格键特别慢。我没有看到解决此问题的 API 挂钩（还没有？）...它可能需要修改库。

另外：stackoverflow 的代码验证器过于挑剔，所以我省略了细节，比如显式的 mobileinit 代码...

更新：如果您开始使用 CSS3 过渡并遇到问题，请考虑以下...

如果您在 iOS 上遇到由于 GPU 的平铺渲染引擎在转换后没有 vsync-ing 而导致的渲染瑕疵，以下可能会有所帮助：



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

【讨论】：

使用 vclick 可以将响应速度提高到 300 毫秒。有很大帮助

【解决方案2】：

我的结论是 jQuery Mobile 实在是太慢了。我只用 jQuery 重建了我的网站的精确副本，并且性能要好得多。也许是因为它是一个年轻的框架，但我非常主观的经验是，如果您需要最佳性能，它还没有准备好生产。

【讨论】：