jquery performance td replace

Question

印刷用に複雑なテーブルを操作する必要があります。

私のコードは動作しますが、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：1つの行例：

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

Answer 1

私は、文字列を構築するために、配列を使用してみます。 IEは、文字列を連結すると、パフォーマンスが低下することがよくあります。

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

これは大きな違いはありませんという証拠があるが、私は最近、IEで巨大なパフォーマンスの向上のためにこれを使用7.

Answer 2

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

私は*（ユニバーサルを変更することをお勧めしたいですセレクタ）を探したい特定の要素に置き換えます（この例では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になるかどうか不明な場合は、とにかく自分の状況では実現できない可能性があります。

Answer 3

重要なことは、あなたのjQueryオブジェクト参照をキャッシュすることです。..

代わりの$(item)がvar $item = $(item);を行う。また*セレクタは非常に高価であることに留意してください$item.find(..)

のようなものを使用して複数回呼び出します。

スパンなどの特定のタグを探している場合は、その代わりにそのタグを使用してください。例えば
$item.find('span[name=iconForApprove]')