How to optimize this JSON/JQuery/Javascript function in IE7/IE8?

Question

hi guys, i'm using this function to parse this json data but i find the function to be really slow in IE7 and slightly slow in IE8.

basically the first listbox generate the main product list, and upon selection of the main list, it will populate the second list.

this is my data:

[{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":15913,"ProductName":"Creative Xmod","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":15913,"ProductName":"Creative Xmod","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":18094,"ProductName":"Sound Blaster Wireless Receiver","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":16185,"ProductName":"Xdock Wireless","ProductServiceLifeId":1},{"ProductCategoryId":209,"ProductCategoryName":"X-Fi","ProductSubCategoryId":668,"ProductSubCategoryName":"External Solutions","ProductId":16186,"ProductName":"Xmod Wireless","ProductServiceLifeId":1}]

and these are the functions that i'm using:

//Three Product Panes function
function populateMainPane() {
    $.getJSON('/Home/ThreePaneProductData/', function(data) {
        products = data;
        alert(JSON.stringify(products));

        var prodCategory = {};
        for (i = 0; i < products.length; i++) {
            prodCategory[products[i].ProductCategoryId] = products[i].ProductCategoryName;
        } //end for

        //take only unique product category to be used
        var id = 0;
        for (id in prodCategory) {
            if (prodCategory.hasOwnProperty(id)) {
                $(".LBox1").append("<option value='" + id + "'>" + prodCategory[id] + "</option>");
                //alert(prodCategory[id]);
            }
        }

        var url = document.location.href;
        var parms = url.substring(url.indexOf("?") + 1).split("&");
        for (var i = 0; i < parms.length; i++) {
            var parm = parms[i].split("=");
            if (parm[0].toLowerCase() == "pid") {

                $(".PanelProductReg").show();

                var nProductIds = parm[1].split(",");

                for (var k = 0; k < nProductIds.length; k++) {
                    var nProductId = parseInt(nProductIds[k], 10);
                    for (var j = 0; j < products.length; j++) {
                        if (nProductId == parseInt(products[j].ProductId, 10)) {
                            addProductRow(nProductId, products[j].ProductName);
                            j = products.length;
                        }
                    } //end for                
                }
            }
        }



    });
} //end function

function populateSubCategoryPane() {

    var subCategory = {};
    for (var i = 0; i < products.length; i++) {
        if (products[i].ProductCategoryId == $('.LBox1').val())
            subCategory[products[i].ProductSubCategoryId] = products[i].ProductSubCategoryName;
    } //end for

    //clear off the list box first
    $(".LBox2").html("");

    var id = 0;
    for (id in subCategory) {
        if (subCategory.hasOwnProperty(id)) {
            $(".LBox2").append("<option value='" + id + "'>" + subCategory[id] + "</option>");
            //alert(prodCategory[id]);
        }
    }
} //end function

is there anything i can do to optimize this or is this a known browser issue?

Answer 1

Only thing I would suggest you is, to pull DOM elements out (cache them) before you appending anything. Like:

var LBox        = $(".LBox1"),
    LBox_parent = LBox.parent();

LBox.detach();

for (id in prodCategory) {
        if (prodCategory.hasOwnProperty(id)) {
            LBox.append("<option value='" + id + "'>" + prodCategory[id] +      "</option>");
            //alert(prodCategory[id]);
        }
}

LBox_parent.append(LBox);

Whereever you do DOM manipulation, this should increase performance like a lot.

Kind Regards

--Andy