Как оптимизировать эту функцию JSON / JQuery / Javascript в IE7 / IE8?

Question

Я использую эту функцию для анализа этих данных JSON, но я считаю, что функция очень медленная в IE7 и немного медленная в IE8.

в основном первое поле списка генерирует основной список продуктов, а при выборе основного списка оно заполняет второй список.

это мои данные:

[{"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}]

и вот функции, которые я использую:

//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

Что я могу сделать, чтобы оптимизировать это, или это известная проблема браузера?

Answer 1

Единственное, что я хотел бы вам предложить, это извлечь элементы DOM (кэшировать их) перед Вы добавляете что-нибудь. Как:

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

Где бы вы ни работали с DOM, это должно значительно увеличить производительность.

Answer 2

@ jandy, тесты доказывают обратное. Кэширование элемента (но не отсоединение его) является самым быстрым.

http://jsperf.com/caching-vs-attach-detach