아이콘을 추가하여 jQuery 성능을 향상시키는 방법은 무엇입니까?

Question

jQuery로 스프레드 시트 편집기를 구축 중이며 큰 테이블에서 성능 문제가 발생했습니다. 표에는 많은 데이터 세트가 들어 있으며 하나를 클릭하면 아이콘이 다른 세트의 첫 번째 셀에 추가됩니다. 코드는 다음과 같습니다 :이 약 5 초 정도 소요

$('.click_icon').remove(); 
for (var i = 0; i < datasets.length; i++) { 
    var first_cell = $('td.content[dataset="' + datasets[i].id + '"]').filter(':first'); 
    if (in_group(datasets[i].id)) { 
    first_cell.append('<i class="icon-remove click_icon remove_group" style="float:right"></i>'); 
    } else { 
    first_cell.append('<i class="icon-magnet click_icon add_group" style="float:right"></i>'); 
} 

500 데이터 세트를. in_group()은 세트가 선택된 데이터 세트를 가진 그룹에 있는지 점검하는 작은 기능입니다.

클릭하기 전에 아이콘을 만들고 show() hide()을 사용하면 더 빠를 것일까요? 다른 아이디어?

우분투에서 Chromium을 사용하고 있습니다. (Version 28.0.1500.52 Ubuntu 12.04)

Answer 1

메모리에 테이블을 구축하고 한 번만 DOM을 변경

$('.click_icon').remove(); 
var table = $('table'); 
var clone = table.clone(true); 

for (var i = 0; i < datasets.length; i++) { 
    var _class = in_group(datasets[i].id) ? 
        'icon-remove click_icon remove_group' : 
        'icon-magnet click_icon add_group', 
     elem = $('<i />', {'class': _class, style:'float:right'}); 

    $('td.content[dataset="' + datasets[i].id + '"]', clone).filter(':first') 
                  .append(elem); 
} 

table.replaceWith(clone); 

이 일반 예를 들어, 당신은 할이를 조정해야 할 수도 있습니다 마크 업과 제대로 작동합니다.
일반적으로 성능을 위해 일반 JS를 사용하고 documentFragments를 사용하지만 jQuery가 이런 식으로 내부적으로 조각을 사용한다고 생각합니다.

Answer 2

제 경험상 문자열로 요소를 추가하는 것은 DOM으로 요소를 만드는 것보다 성능면에서 최악입니다.

그래서 다음과 같은 것을 시도 :

if (in_group(datasets[i].id)) { 
    var i = document.createElement('i'); 
    i.className = 'icon-remove click_icon remove_group'; 
    i.style.float = 'right'; 
    first_cell.appendChild(i); 
} 

Answer 3

사용자가 클릭하기를 기대하는 경우 클릭하기 전에 아이콘을 만드는 것이 좋습니다.

표시 속성을 전환하는 표시/숨기기 대신 visibility property을 사용할 수 있습니다. 가시성이 숨김에서 가시성으로 바뀌면 브라우저는 레이아웃을 다시 계산할 필요가 없습니다.