改善表格渲染，最快的表格渲染

所以我必須渲染1000行1000列的表格。因此，這是最好的方法是在JavaScript中構建HTML字符串，然後一次性將其插入到DOM中。我舉了一個簡單的例子，並將其與其他幾種方法進行比較。最後，這真的是我提出的最快的方式。但是這仍然不夠令人滿意。所以我的問題是，有沒有比以下例子更快的方法。改善表格渲染，最快的表格渲染

var startTime = new Date().getTime(), 
    tableString = "<table>", 
    body = document.getElementsByTagName('body')[0], 
    div = document.createElement('div'), 
    finalResult = 0, 
    endTime = 0, 
    result = 0; 

for (row = 0; row < 1000; row += 1) { 

    tableString += "<tr>"; 

    for (col = 0; col < 1000; col += 1) { 

     tableString += "<td>" + "testing" + "</td>"; 
    } 
    tableString += "</tr"; 
} 

tableString += "</table>"; 
div.innerHTML = tableString; 
body.appendChild(div); 

endTime = new Date().getTime(); 
console.log(endTime - startTime);

來源

2013-08-06 sla55er

無論使用什麼語言，大量的字符串連接都會讓您陷入運行時的困擾。緊固方式將通過本機JavaScript DOM API，同時在文檔片段中構建表。在函數結束時，將文檔片段插入文檔中的所需位置。

像這樣將創建一個表，1000行，每行20個細胞：

function makeTable() { 
    var fragment = document.createDocumentFragment(); 

    for (var i = 0; i < 1000; i++) { 
     var row = document.createElement('tr'); 
     fragment.appendChild(row); 

     for (var j = 0; j < 20; j++) { 
      var cell = document.createElement('td'); 
      cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString())); 
      row.appendChild(cell); 
     } 
    } 

    var target = document.getElementById('target'); 
    target.appendChild(fragment); 
}

的jsfiddle：http://jsfiddle.net/KbNLb/4/

編輯剛看到你做了1000×1000 - 這是100萬個細胞，即無論如何都會變慢。我真的希望萬用表格單元不是您的實際使用情況。 ;-)

來源

2013-08-06 06:51:59 UweB

我想這是最快的方法。謝謝！ :)） – sla55er

改善表格渲染，最快的表格渲染

回答

相關問題