HTML 테이블 생성 속도 향상

Question

jQuery 사용 .append 일부 html로 125px X 80px의 10,000px 격자를 만듭니다. 픽셀은 먼저 아래로 번호가 매겨집니다. 이제는 정상적으로 작동하지만 느린 속도로 페이지를로드하는 눈에 띄는 지연이 html로 바로 작성하는 것과 비교됩니다. 여전히 픽셀 번호 매기기를 유지하면서 속도를 높일 수 있습니까?

내 HTML은 다음과 같습니다

<div id="grid"> 
</div> 

자바 스크립트 : 전체 HTML을 생성하고 한 단계에서 DOM에 추가 성능을 개선하는 것 향한 첫 단계의

function createGrid() { 
var counter = 1; 
var rowCounter = 1; 
var divs = 10000; 
$('<table width="625px"><tr>').appendTo('#grid'); 
for (var i = 1; i <= divs; i++) { 
    if (i % 125 == 0){ 
     $('</ tr><tr>').appendTo('#grid'); 
     rowCounter++; 
     counter = rowCounter; 
    } 
    else 
     $('<td id="pixel_' + counter + '" class="pixel"></td>').appendTo('#grid'); 
     counter =+ 80; 
    } 
$('</tr></table>').appendTo('#grid'); 
} 

Answer 1

.append()은 완전한 DOM 요소를 만들기 때문에 코드가 예상대로 작동하지 않습니다. $('<table width="625px"><tr>').appendTo('#grid')은 자동으로 두 태그를 모두 닫습니다. 다음 행을 표에 추가하고 셀을 행에 추가해야합니다.

이렇게되면 it's inefficient to constantly append elements to the DOM anyway이 발생합니다. 대신 테이블을 단일 문자열로 작성하고 한 번에 모두 작성하십시오. This is more efficient since you're only adding to the DOM one time.

function createGrid() { 
    var counter = 1; 
    var rowCounter = 1; 
    var divs = 10000; 
    var tstr = '<table width="625px"><tr>'; 
    for (var i = 1; i <= divs; i++) { 
     if (i % 125 == 0) { 
      tstr += '</ tr><tr>'; 
      rowCounter++; 
      counter = rowCounter; 
     } else 
      tstr += '<td id="pixel_' + counter + '" class="pixel"></td>'; 
     counter = +80; 
    } 
    tstr += '</tr></table>'; 
    $('#grid').append(tstr); 
} 

http://jsfiddle.net/mblase75/zuCCx/

Answer 2

하나.

function createGrid() { 
    var counter = 1; 
    var rowCounter = 1; 
    var divs = 10000; 
    var html = '<table width="625px"><tr>'; 
    for (var i = 1; i <= divs; i++) { 
     if (i % 125 == 0){ 
     html += '</ tr><tr>'; 
     rowCounter++; 
     counter = rowCounter; 
    } 
    else 
     html += '<td id="pixel_' + counter + '" class="pixel"></td>'; 
     counter =+ 80; 
    } 
    html += '</tr></table>'; 
    $('#grid').html(html); 
}