1

背景：我有一个 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。

谢谢！

克里斯。

4

1 回答 1

0

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

我不认为你可以那么容易地改进它，但也许尝试使用一个小的延迟来异步执行这个

$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
  var id = $(this).data("id");
  setTimeout(function() {
    theSubView.setId(id);
  }, 0);
});
于 2012-04-19T10:04:19.780 回答