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

如何在IE7 / IE8中优化这个JSON / JQuery / Javascript函数？

2 个答案: