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

Question

背景:我有一个 jQuery 移动应用程序(单个 .htm、多个 jqm 页面)，其中一个页面包含一个 ListView ，其中包含相当多的列表项(例如 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);
});