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

我使用这个函数来解析这个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

//三个产品窗格函数
函数populateMainPane（）{
$.getJSON（'/Home/ThreePaneProductData/'，函数（数据）{
产品=数据；
警报（JSON.stringify（产品））；
var prodCategory={}；
对于（i=0；i

---

我能做些什么来优化它吗？或者这是一个已知的浏览器问题吗？

我唯一建议您的是，在之前将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);

var LBox=$（“.LBox1”），
LBox_parent=LBox.parent（）；
LBox.detach（）；
用于（prodCategory中的id）{
if（prodCategory.hasOwnProperty（id））{
LBox.append（“+prodCategory[id]+”）；
//警报（prodCategory[id]）；
}
}
LBox\u父项追加（LBox）；

---

无论您在哪里进行DOM操作，这都会极大地提高性能。

我唯一建议您的是，在操作之前将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);

var LBox=$（“.LBox1”），
LBox_parent=LBox.parent（）；
LBox.detach（）；
用于（prodCategory中的id）{
if（prodCategory.hasOwnProperty（id））{
LBox.append（“+prodCategory[id]+”）；
//警报（prodCategory[id]）；
}
}
LBox\u父项追加（LBox）；

---

无论您在哪里进行DOM操作，这都会极大地提高性能。

@jandy，基准测试的结果证明了这一点。缓存元素（但不分离它）是最快的

---

@jandy，基准测试的结果证明了这一点。缓存元素（但不分离它）是最快的

---

Alrity兄弟。但是如何将json转换为xml呢？我想把所有的东西都转换成一大块。。。然后将它们保存在html中的div中，然后稍后再将它们缝合在一起，有点像旧的asp方式？alritey bro。但是如何将json转换为xml呢？我想把所有的东西都转换成一大块。。。将它们保存在html中的div中，然后稍后将它们缝合在一起，有点像旧的asp方式？