Question

我为listview创建了10000个虚拟记录，并在2组代码中测试它的性能。

第一种方法。使用push方法而不是附加到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");                
            }

第二种方法，直接附加到列表视图

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条虚拟记录很多。即使在100多个元素之后，Listview滚动性能也开始降低。 jQuery Mobile 1.4的功能很多，但你仍然会遇到200-300 + listview元素的问题。

更不用说，Kendo UI，PhoneJS或Sencha Touch无法处理那么多的listview元素。

最佳做法是在列表视图中实现分页。

jQuery Mobile Listview分页插件

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

官方支持：jQuery Mobile 1.3

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

或实施Pull-to-Refresh。您可以自己完成，也可以使用：

iScrollView插件

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

官方支持：jQuery Mobile 1.3（它甚至适用于1.4）

如何增加JQM附加listview性能

1 个答案: