2011-02-03 3 views
1

인쇄용 복잡한 표를 조작해야합니다.jquery performance td replace

내 코드 작동하지만 IE에 10 초 (50 행 테이블)에 대한 실행

어떻게 성능을 향상시킬 수 있습니까?

나는 $(item).html(title)이 가장 많은 시간을 소비한다는 것을 알았는데, 어떻게 이것을 피할 수 있습니까?

감사

강령

:

  tblTBLRows.find("td[name=tdTBLTitle]").each(function (i, item) { 
      var title = ""; 
      if ($(item).find("*[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" } 
      if ($(item).find("*[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" } 
      title += $(item).find("#contTxtTitle").html(); 
      $(item).html(title).removeClass("tdTBLTitle"); 
     }); 

HTML : 하나의 행 예 :

<tr> 
    <td>...</td> 
    <td name="tdTBLTitle" class="tdTBLTitle txtRight" colid="3"> 
      <table cellspacing="0" cellpadding="0" class="tblTskTitle"><tbody><tr> 
      <td> 
       <span class="icon_24 iconVGray" name="iconForApprove" title="...">&nbsp;</span> 
       <span class="spacer5">&nbsp;</span> 
      </td> 
      <td class="tdTxtTitle " name="txtTitle"> 
       <a href="..." class="NoLnk"> 
        <div class="contTxtTitle Pointer" id="contTxtTitle"> 
         Title1 
        </div> 
       </a> 
      </td> 
      <td class="tdDescLast" name="txtDescLast"> 
       <a href="..." class="NoLnk"> 
        <div class="contDescLast Pointer" id="contDescLast"> 
         Title2 
        </div> 
       </a> 
      </td> 
     </tr></tbody> 
     </table> 
    </td> 
    <td>...</td> 
</tr> 
+0

@sirmorne는 루프의 비용이 많이 드는 작업으로 들이게 할 문자열에 HTML 결승전을 당신이 검색하는 경우 다음 루프 – kobe

+0

중의 .html 중에서을하지 않습니다 'id'는 어떤 문맥에서도 검색 할 필요가 없습니다. 단순한 것들은 jQuery조차 사용하지 않지만'$ ('# whateverID') '를 호출하는 것이 빠르므로'document.getElementById (' whateverID '). innerHTML'은 텍스트를 더 빨리 반환합니다. – zzzzBov

+0

각 행에 단 하나의 TD 문자열을 만든 다음이를 사용하여 모든 행의 모든 ​​TD를 바꾸는 방법은 알고 있습니까? (데이터가 모든 행에서 다릅니다) – SirMoreno

답변

0

내가 문자열을 구축하기 위해 배열을 사용하려고 할 것입니다. IE는 종종 문자열을 연결할 때 성능이 매우 떨어집니다.

var buffer = []; 
buffer.push("string"); // add a bunch of stuff 
var title = buffer.join(''); 

이 큰 차이를 만들하지 않는 증거가있다, 그러나 나는 최근에 IE에서 큰 성능 향상을 위해 이것을 사용 7.

+0

감사합니다. $ item.html (title)을 사용해 보았습니다. 주요한 문제. – SirMoreno

+0

죄송합니다. 도움이되지 않았습니다. 고맙게도, 시도할만한 다른 많은 제안이 있습니다! –

0
 tblTBLRows.find("#tdTBLTitle").each(function (i, item) { 
     var title = ""; 
     if ($(item).find("*[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" } 
     if ($(item).find("*[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" } 
     title += $(item).find("#contTxtTitle").html(); 
     $(item).html(title).removeClass("tdTBLTitle"); 
}) 

나는 * (보편적 변경 좋을 것 selector)를 찾으려는 특정 요소로 이동합니다.이 예제에서는 span 인 것 같습니다. 그런 식으로 jQuery를이 특정 요소-유형의보고보다는보고 및 평가하는 것, 모든 요소가 발견 :

 tblTBLRows.find("#tdTBLTitle").each(function (i, item) { 
     var title = ""; 
     if ($(item).find("span[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" } 
     if ($(item).find("span[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" } 
     title += $(item).find("#contTxtTitle").html(); 
     $(item).html(title).removeClass("tdTBLTitle"); 
}) 

난 확실하지,하지만 이것은 당신을 절약 할 수 얼마나 많은 시간; 마이크로 최적화 일 수도 있고 원하는 요소가 항상 span이 될지 확실하지 않은 경우 어쨌든 상황에 따라 가능하지 않을 수 있습니다.

3

중요한 것은 당신의 JQuery와 객체 참조를 캐시하는 것입니다 ..

대신 여러 번 호출하는 $(item)* 선택이 매우 비싼 것을 $item.find(..)

이 또한 염두에 두어야 좋아 var $item = $(item); 사용을한다.

스팬이나 다른 특정 태그를 찾으려면 대신 해당 태그를 사용하십시오. 예를 $item.find('span[name=iconForApprove]')를 들어

+0

예를 들어,'iconForApprove'가 항상 범위에 있다면, selector를'span [name = iconForApprove]'로 변경하십시오. 그렇지 않으면 브라우저는 문자 그대로 모든 노드를 검사하여 범위를 확인하는 것이 아니라 올바른 이름이 있는지 확인합니다. – calvinf

+0

@calvinf, 거기에 예제를 넣으라고 상기시켜 줘서 고마워. –