jQuery $ each very slow

Question

HTML table을 검색하고 검색어에 따라 표시/숨기기를하는 "실시간 검색"상자가 있습니다.

작은 테이블에서는 완벽하게 작동하지만 테이블 데이터가 커지면 검색 속도가 느려집니다.

내 코드 :

$("#search").keyup(function() { 
     var raderna = $("#history tbody tr"); 
     var value = this.value.toLowerCase().trim(); 
      if(value.length == 0) { 

       raderna.each(function(index) { 
      if (index !== 0) { 
       $row = $(this); 
        if($row.hasClass("hiddenRow")) { 
         $row.hide(); 
        } else { 
         $row.show(); 
        } 
       } 
      }); 

       return false; 
     } 
     raderna.each(function (index) { 
      $(this).find("td").each(function() { 
       var id = $(this).text().toLowerCase().trim(); 
       var not_found = (id.indexOf(value) == -1); 
       $(this).closest('tr').toggle(!not_found); 
       return not_found; 
      }); 
     }); 
    }); 

내가 속도를 높이기 위해 무엇을 할 수 있는지 어떤 아이디어?

Answer 1

1. 키 업 이벤트 위에 var raderna = $("#history tbody tr");을 넣으세요. 모든 키 이벤트로 DOM에서 #history tbody tr을 찾고 있으므로 쓸모가 없습니다. 페이지로드시이 작업을 한 번 수행하고 해당 변수에 유지할 수 있습니다.
2. 클래스 hiddenRow의 스타일을 display: none으로하고 $row.hide() 및 $row.show()을 호출하는 대신 $row.addClass() 또는 removeClass()을 사용할 수 있습니다. 요소를 표시하거나 숨기는 것보다 클래스를 추가하거나 제거하는 것이 더 빠릅니다. 또는 toggleClass()를 사용할 수도 있습니다.

3. 이 각 : 나는 그것을 쓰는 동안

   $(this).find('td').each(function() { 
       var $this = $(this), 
        id = $this.text().toLowerCase(), 
        not_found = (id.indexOf(value) == -1); 
       $this.closest('tr').toggle(!not_found); 
       return not_found; 
   }); 
   

내가 @Tyranicangel 귀하의 질문에 댓글을 달았 내가 생각하는 것을 보았다 :이처럼 작성하는 경우

$(this).find("td").each(function() { 
    var id = $(this).text().toLowerCase().trim(); 
    var not_found = (id.indexOf(value) == -1); 
    $(this).closest('tr').toggle(!not_found); 
    return not_found; 
}); 

이 quickier 될 수 있습니다 두 가지 모두 그의 제안이 좋다. 나는 당신에게 당신의 코드의 성능을 향상시키기위한 작은 조언만을 주었다.