如何增加JQM追加列表視圖性能

Question

我已經爲列表視圖創建了10000個虛擬記錄並在兩組代碼中測試它的性能。

第一種方法。使用推方法和不是附加到ListView

function CreateList(result){ 
       var i = 0; 
       var lstlist=[]; 
       for(i=0; i< result.length; i++) 
       {         
        lstlist.push("<li id='"+result[i].ID+"'><a><img src='"+result[i].Image+"'><h2>"+result[i].Name+" "+ result[i].ID+"</h2><p>"+result[i].Description+"</p></a>"); 
       } 

       $("#lv").append(lstlist); 
       $("#lv").listview("refresh");     
      } 

第二種方法中，直接附加到ListView

function CreateList(result){ 
       var i = 0; 
       var lstlist=[]; 
       for(i=0; i< result.length; i++) 
       {         
        $("#lv").append("<li id='"+result[i].ID+"'><a><img src='"+result[i].Image+"'><h2>"+result[i].Name+" "+ result[i].ID+"</h2><p>"+result[i].Description+"</p></a>"); 
       }      

       $("#lv").listview("refresh");     
      } 

兩種方法似乎是表現不好，是沒有更好的方法？

Answer 1

對於jQuery Mobile 1.3來說，10000個虛擬記錄是waaaaay。即使在100多個元素之後，Listview滾動性能也開始降低。 jQuery Mobile 1.4的票價很高，但你仍然會遇到200-300 + listview元素的問題。

更不用說，Kendo UI，PhoneJS或Sencha Touch無法處理那麼多的listview元素。

最好的方法是在你的listview中實現分頁。

jQuery Mobile的列表視圖分頁插件

Github上鍊接：https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin

官方支持：jQuery Mobile的1.3

演示http://listomatic.stakbit.com/

或者實現拉來刷新。你可以做你自己，或者你可以使用：

iScrollView插件

Github上鍊接：https://github.com/watusi/jquery-mobile-iscrollview

官方支持：jQuery Mobile的1.3（它甚至有1.4作品）