Javascript Phonegap - 保存所有 <li> 以避免浪费时间答案

【问题标题】：Javascript Phonegap - Saving all <li> to avoid wasting timeJavascript Phonegap - 保存所有 <li> 以避免浪费时间
【发布时间】：2014-02-26 05:03:09
【问题描述】：

我正在迭代我的本地数据库并将表的每个项目添加到列表中。由于我在该表中有超过 3,000 行，因此附加所有这些项目需要大约 10 秒。我尝试取出 jQuery Mobile，但仍然需要很长时间。

例如，我有我的客户列表，我等待 10 秒以获取其中的 3,000 个，然后，我触摸其中一个以查看详细信息，当我返回时，它开始重新添加 3,000 个，然后必须一次又一次地等待。

有没有办法只在第一次这样做？我尝试将 html 保存到会话变量中，但也需要很长时间。

这就是我拥有它的方式：

function getProducts(){
        var query ="SELECT name FROM person";

        db.transaction(function (tx){
            tx.executeSql(query, [], function (tx, results){
                var len = results.rows.length;


                    for (var i = 0; i < len; i++){
                        $('#customers').append("<li>" + results.rows.item(i).name + 
                        "</li>");
                    }

            }, callBack);
        }, callBack);
    }

【问题讨论】：

我会从不加载所有这些开始...分页是你的朋友。
将页面分页或缓存为 HTML 并按设定的时间间隔更新。
我建议循环遍历每个li 并将其连接到字符串的末尾。然后，一旦构建了字符串，您只需执行一个 .append()。这不一定能解决您只获取一次数据的问题，但绝对可以减轻执行 3000 .append()'s 的负担

标签： javascript html list session cordova

【解决方案1】：

我建议在 document.createDocumentFragment 中执行所有附加操作，然后仅在您完成构建每个 LI 的循环后将其附加到实时 DOM。

【讨论】：