Question

I’m creating an app using PhoneGap and JQuery Mobile where I expect to be reading data from some backend service and adding/removing list items (potentially divs as well) based on what is received. Naturally, I want to prevent the app from slowing down too much with prolonged use.

Are there any general best practices when it comes to adding/removing HTML? I’m pretty new to this, so I don’t really understand how the DOM works and whatnot.

Currently I am using JQuery’s append to add lines of HTML to some container div, and using .html(“”) to remove an element. Is this acceptable, or is there a better way of doing this?

Edit: For your reference, I am using JQuery Mobile 1.1.0 and Phonegap 1.9.0. Don’t know if that’s helpful or not, but there you go.

I’m hoping to use this app across as many mobile devices as possible, but I guess iOS and Android are the biggest market right now.

To clarify, I haven’t actually run into major issues (yet), I just wanted to avoid running into anything later on and having to go through a large amount of code to try to fix the problem. I figured it’d be useful for everyone if we could agree on a set of best practices, ie using innerHTML() over .append, remove vs innerHTML(“”), et cetra 😛

Some example code:

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);
                }

            });

        }

Answer 1

I’m just going to throw a smattering of ideas at you and we’ll see what sticks!

Make sure to concoct your HTML and add it to the DOM all at once rather than adding bits and pieces in a loop or something.

For Example (DO THIS):

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(''));

Notice how I only select the container once, this is key, even if you do have to reference a DOM element inside a loop, make sure to cache a reference to the element outside the loop, otherwise your’re needlessly doing extra work every iteration.

And for example (DON’T DO THIS, except for the DOM element caching, that’s good):

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>');
}

If you are going to add some complex HTML structure to the DOM, do the same thing as before, create a “temporary” container, do work on it, then append the whole thing to the DOM at once. For example:

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);

I like to store data associated with an object using $.data() so that when an element is removed, so is it’s data and therefore we aren’t using-up memory with useless data.

Use JSPerf.com, it’s an amazing tool when used properly. You can run tests to determine what method is faster for an operation. Here is an example one I setup a while ago: http://jsperf.com/jquery-each-vs-for-loops/2

Don’t needlessly create global variables. When you do this it creates extra overhead when those variables are looked-up. This line: xmlInfo=data; should be var xmlInfo=data; unless xmlInfo is to be accessed outside of the AJAX callback function. Basically when you look-up a variable that is in the global scope while inside of a function (or nested functions); first the browser will look in the current scope, then the parent scope of the current one, all the way up to the global scope. So if you attempt to access a global variable inside of a function inside of a function, you’re now doing about three times as much look-up as if you used a locally scoped variable. If you must use a globally scoped variable, cache it inside of your function and use the local version in your function to avoid the extra loop-up time.