4

我正在使用 PhoneGap 和 JQuery Mobile 创建一个应用程序，我希望在其中从某些后端服务读取数据并根据收到的内容添加/删除列表项（也可能是 div）。自然地，我想防止应用程序在长时间使用时速度过慢。

在添加/删除 HTML 时是否有任何一般的最佳实践？我对此很陌生，所以我不太了解 DOM 是如何工作的等等。

目前我正在使用 JQuery 的 append 将 HTML 行添加到某些容器 div，并使用 .html("") 删除元素。这是可以接受的，还是有更好的方法来做到这一点？

编辑：供您参考，我使用的是 JQuery Mobile 1.1.0 和 Phonegap 1.9.0。不知道这是否有帮助，但你去。

我希望在尽可能多的移动设备上使用这个应用程序，但我猜 iOS 和 Android 是目前最大的市场。

澄清一下，我实际上还没有遇到重大问题（还），我只是想避免以后遇到任何事情，并且必须通过大量代码来尝试解决问题。我认为如果我们能就一组最佳实践达成一致，这对每个人都会很有用，即在 .append 上使用 innerHTML()、remove vs innerHTML("") 等等：P

一些示例代码：

function changeList(sel){
            var xmlfolder="/"
            var name = sel[sel.selectedIndex].value+".xml";                
            var location= xmlfolder+name;
            var list = document.getElementById("opList"); //opList is the container
            list.innerHTML=""; //what i'm using to remove the previous occupant
                               //: is there a better way of doing this?
            //reading stuff                
            $.ajax({

                type:'GET',
                cache: false,
                url: location,
                dataType:"xml",
                success: function(data){
                    xmlInfo=data;


                    var i=0;
                    $(data).find("data").each(function(){

                        var string = "";
                        var sName=$(this).find("name").text();

                        string +=("<li>");
                        string +=("<a href=#details data-transition = slide >");
                        string+= sName;
                        string+="</a></li>";
                         $('#opList').append(string); //is there a better way of appending?
                         i++;

                    })

                    $('#opList').listview('refresh');

                },                    
                error:function(e){
                    alert("failed D:");
                    console.log(e);
                }

            });

        }
4

1 回答 1

4

我只是想给你一些想法，我们会看看有什么坚持！

确保编造您的 HTML 并将其一次性添加到 DOM 中，而不是在循环中添加点点滴滴之类的东西。

例如（这样做）：

var arr    = ['Title 1', 'Title 2', 'Title 3'],
    output = [];

for (var i = 0, len = arr.length; i < len; i++) {
    output.push('<li>' + arr[i] + '</li>');
}
$('ul').append(output.join(''));

请注意我如何只选择一次容器，这是关键，即使您必须在循环内引用 DOM 元素，请确保缓存对循环外元素的引用，否则您每次迭代都不必要地做额外的工作.

例如（不要这样做，除了 DOM 元素缓存，这很好）： 

var arr = ['Title 1', 'Title 2', 'Title 3'],
    $ul = $('ul');

for (var i = 0, len = arr.length; i < len; i++) {
    $ul.append('<li>' + arr[i] + '</li>');
}

如果您要向 DOM 添加一些复杂的 HTML 结构，请执行与之前相同的操作，创建一个“临时”容器，对其进行处理，然后一次将整个内容附加到 DOM。例如：

var $tmpObj = $('<div id="my-div" />').append(
    $('<span class="my-title" />').text('Title 1')
).append(
    $('<div class="my-description" />').append(
        $('<span class="my-copy" />').text('Blah Blah Blah')
    )
).on('click', function () {
    alert('Don\'t Touch Me!');
}).data('my-data-key', 'my-data-val');

$('#my-div').replaceWith($tmpObj);

我喜欢存储与对象关联的数据，$.data()这样当一个元素被删除时，它的数据也是如此，因此我们不会用无用的数据耗尽内存。

使用 JSPerf.com，如果使用得当，它是一个了不起的工具。您可以运行测试以确定哪种方法对操作更快。这是我不久前设置的一个示例：http: //jsperf.com/jquery-each-vs-for-loops/2

不要不必要地创建全局变量。当你这样做时，它会在查找这些变量时产生额外的开销。这行：xmlInfo=data;应该是var xmlInfo=data;除非xmlInfo要在 AJAX 回调函数之外访问。基本上，当您在函数（或嵌套函数）内部查找全局范围内的变量时；首先浏览器将查看当前范围，然后是当前范围的父范围，一直到全局范围。因此，如果您尝试在函数内部访问函数内部的全局变量，那么您现在的查找量大约是使用局部范围变量的三倍。如果必须使用全局范围的变量，请将其缓存在函数中并在函数中使用本地版本以避免额外的循环时间。

于 2012-07-11T21:32:53.630 回答