1

使用 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');   
}
4

3 回答 3

4

您的代码不会像您期望的那样工作，因为.append()创建了完整的 DOM 元素。$('<table width="625px"><tr>').appendTo('#grid')将自动关闭两个标签，您必须将下一行附加到表格中，并将单元格附加到行中。

碰巧的是，始终将元素附加到 DOM 是低效的。相反，将表构建为单个字符串并一次将其全部写出。这更有效，因为您只添加到 DOM 一次。

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/

于 2013-05-23T14:26:22.143 回答
1 
$('<table width="625px"><tr>')

与编写和附加 HTML 字符串不同！jQuery 将评估该<table><tr>字符串并从中创建一个DOMElement。即，仅用这一点点代码，您就在 DOM 中创建了一个完整的表。结束标签是自动完成的，表格是实例化的。从那时起，您需要将其作为 DOM 对象使用，而不是作为要附加到的字符串。

您的代码可能很慢，因为您正在创建大量不完整/自动完成的微小 DOM 对象，这些对象都以某种方式聚集在一起，甚至可能不是正确的结构。要么操作应该非常快的 DOM 对象，要么构造一个完整的字符串并对其进行一次评估。

于 2013-05-23T14:28:16.917 回答
0

提高性能的第一步是一步生成完整的 HTML 并附加到 DOM。

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);
}
于 2013-05-23T14:25:37.657 回答