javascript - 提高生成 HTML 表格的速度

Question

使用 jQuery .append 我写了一些 html 来形成 125px X 80px 的 10,000px 网格。像素首先向下编号然后横向编号的位置。现在这工作正常，但速度足够慢，与直接用 html 编写页面相比，加载页面有明显的滞后。是否有可能在保持像素编号的同时加快速度？

我的 html 是:

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

Javascript:

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/