Question

I have a jQuery XML file parser that I got from somewhere which reads an XML file and parses the content into a list in an HTML page.

$(document).ready(function(){
    $("#dvContent").append("<ol></ol>");
    $.ajax({
            type: "GET",
            url: "BookList.xml",
            dataType: "xml",
            success: function(xml){
                $(xml).find('Book').each(function(){
                    var sTitle = $(this).find('Title').text();
                    var sPublisher = $(this).find('Publisher').text();
                    $("<li></li>").html(sTitle + ", " + sPublisher).appendTo("#dvContent ol");
                });
        },
        error: function() {
                alert("An error occurred while processing XML file.");
        }
    });
});

My XML file has about 24000 rows, 6500 of each are tags. Chrome can loop through all 6400 in around 1 second or less fine, but IE8 seems to cap out at 1228 rows.

Would this be IE8 interpreting this loop as infinite and halting it’s process or something else?

Thanks in advance all.

Answer 1

appending to the DOM over and over again is bad for performace. You should append once. Also looking up the location to append each time is expensive.

$("<li></li>").html(sTitle + ", " + sPublisher).appendTo("#dvContent ol");

Also looking up $(this) each time is expensive since it creates a new jQuery object.

var sTitle = $(this).find('Title').text();
var sPublisher = $(this).find('Publisher').text();

So something like this should perform a little bit better

var outHTML = "";
$(xml).find('Book').each(function(){
    var book = $(this),
        sTitle = book.find('Title').text(),
        sPublisher = book.find('Publisher').text();
    outHTML += "<li>" + sTitle + ", " + sPublisher + "</li>");
});
$("#dvContent ol").append(outHTML);

In the end 6400 items is a lot to add to the page, it might be better to display the data in another format.