加快了缓慢的jQuery Mobile页面转换 - 为什么

Question

背景：我有一个jQuery移动应用程序（单.htm，多jqm页面），其中一个页面包含一个列表视图，其中包含相当多的列表项（300-500个）。我正在这里测试性能的边界，所以目前我的自定义"分页"将使用 CSS 一次隐藏除 25 个项目之外的所有项目。该应用程序使用 PhoneGap 部署到设备。

所以，对于我的问题。

我发现，当我单击列表中的项目时，当我使用以下代码时，导航到列表项链接到的页面在设备上非常缓慢。这将处理单击，从列表项中提取 ID 并存储它，然后允许单击执行页面导航：

    $('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
        theSubView.setId($(this).data("id"));
    });

但是，下面的代码要快得多。它还存储 id，但随后防止点击导致导航并手动更改页面：

    $('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
        theSubView.setId($(this).data("id"));
        e.preventDefault();
        $.mobile.changePage('#subView');
    });

更快的解决方案的唯一缺点（据我所知）是该项目没有显示任何发生点击的 UI 反馈。

有谁知道为什么我在这里获得巨大的速度改进，以及是否有办法加快选项 1

？我

不喜欢以这种方式规避设计，如果我能获得良好的性能，我更喜欢使用选项 1。

谢谢！

克里斯。

Answer 1

只是一个猜测，但这可能是由于默认浏览器行为触发自定义事件并调用一些滚动机制而 $.mobile 调用避免了这种开销......

我认为您不能如此轻松地改进它，但也许尝试使用一个小延迟来异步执行此操作

$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
  var id = $(this).data("id");
  setTimeout(function() {
    theSubView.setId(id);
  }, 0);
});