加速緩慢的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。

謝謝！

Chris。

Answer 1

只是一種猜測，但也許這種情況是由於默認瀏覽器的行爲會觸發自定義事件，並調用一些滾動機制，而$。移動通話避免這種開銷的事實...

我不認爲你可以改善這麼容易，但也許嘗試使用一個小的延遲來執行此異步

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