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);
});

加快了jQuery Mobile页面过渡的速度 - 为什么？

1 个答案: