IE7/IE8에서이 JSON/JQuery/Javascript 기능을 최적화하는 방법은 무엇입니까?

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 요소를 꺼내 (캐쉬)하는 것이 좋습니다. 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); 

DOM 조작을하면 어디에서나 성능이 향상됩니다.

Answer 2

@jandy, 벤치 마크는 그렇지 않다는 것을 증명합니다. 엘리먼트를 캐싱하는 것은 가장 빠릅니다.

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