Question

以下是我要做的事情：在一个phonegap android应用程序中，使用jquery listview从我的静态xml动态创建一个UL并显示它。

要创建可过滤的列表视图，我使用了w3schools中的代码然后我使用HTML主体中的onload（）方法中的以下代码从我的XML动态添加元素：

function parseit() {
    alert("parseit");
    $.ajax({
    type: "GET",
    url: "catalog.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find("Book").each(function(){
            var title = $(this).find('Name').text();
            console.log(title);
            var listItem = '<li> <a href="#">' +title + '</li>';
            $("#list").append(listItem).listview('refresh');
        });
    }
    });
}

我的XML文件架构如下：

<Books>
   <Book>
      <Name> somename </Name>
      <Price> $1.00 </Price>
      <Details> asdfgh </Details>
   </Book>
   <Book> .....  1500 items of this kind...  </Book>
</Books>

我面临的问题很少：

虽然我正在调用refresh，但Listview不会立即显示新添加的项目。我在很少的地方看到删除div内容等但我没有使用它（请参阅我给出的链接代码）。经过很长一段时间，我必须点击一下才能显示项目。 Jquery listview太慢了。我添加的列表项的数量是1500-ish。
添加的项目不属于已排序的标题（例如，以＆＃39开头的项目; A＆＃39;请勿返回该部分，而是在该部分创建新的＆＃39; A＆＃39;部分底

我选择了jquery的listview，因为它给了我免费的搜索功能。

Answer 1

好吧，让我们讨论这个问题。根据我的个人经验，您无法期望浏览器专门处理移动设备中的许多项目。 js在移动浏览器中运行以及DOM限制都存在各种性能问题。您必须按照以下步骤找出性能缓慢的根本原因：

复制XML并将其修剪为50或75个项目
运行它，观察您是否仍然看到相同的性能问题。
如果您仍然看到性能问题，那么您必须优化代码
如果性能问题得到解决，那么您应该找到一种按需解析的方法。例如：解析前几十个，和当用户输入时，搜索XML并按需解析。

使用DOM和JS无法在移动设备中动态添加1500个项目，并期望获得良好的性能。一旦我在桌面浏览器上动态创建600 div，它就超级慢了。这是因为DOM如何处理动态内容，遍历heirachy以便将项目放在正确的位置。您可能认为这是一个简单的过程，但整个遍历会耗费CPU和处理时间。如果有一种方法可以最小化解析并按需进行解析，那就太棒了。

阅读代理设计模式，有时当您处理大量数据集时，您使用代理使用户感觉所有内容都已加载，但只有一小部分可用，而其余部分是虚拟等待按需检索。

希望我的建议适合你。

http://en.wikipedia.org/wiki/Proxy_pattern

尝试使用此版本的jquery，它可能对移动设备有所帮助：http://jquerymobile.com/

Answer 2

人们错过了一件重要的事情 - 你要刷新代码1500次......

您也在搜索#list，1500次。

function parseit() 
{
   alert("parseit");
   $.ajax(
   {
      type: "GET",
      url: "catalog.xml",
      dataType: "xml",
      success: function(xml) 
      {
          var list = $("#list");
          $(xml).find("Book").each(function()
          {
              var title = $(this).find('Name').text();
              console.log(title);
              listItem = '<li> <a href="#">' +title + '</li>';
              //$("#list").append(listItem).listview('refresh'); - this line we dont want.
          });
         list.listview('refresh');
      }
   });
}

你甚至可以更进一步。

function parseit() 
{
   alert("parseit");
   $.ajax(
   {
      type: "GET",
      url: "catalog.xml",
      dataType: "xml",
      success: function(xml) 
      {
          var list = $("#list");
          var listItem = "";

          $(xml).find("Book").each(function()
          {
              var title = $(this).find('Name').text();
              console.log(title);
              listItem += '<li> <a href="#">' +title + '</li>';
              //$("#list").append(listItem).listview('refresh'); - this line we dont want.
          });
         list.append(listItem);
         list.listview('refresh');
      }
   });
}

如果您希望listview响应性地添加项目。你需要让它更慢我对不起我的朋友。

第一步。

一个。获取您要添加的图书清单。

B中。使用setTimeout

创建异步任务

℃。在该setTimeout中添加一些项目，然后刷新列表。

d。使用setTimeout使函数再次调用，直到删除了图书列表中的所有项目。

jquery mobile listview太慢了

2 个答案: