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/

Answer 2

$('<table width="625px"><tr>')

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

您的代码可能很慢，因为您正在创建大量不完整/自动完成的微小DOM对象，这些对象在某种程度上被捆绑在一起，甚至可能在正确的结构中。操纵DOM对象，它应该非常快，或构造一个完整的字符串并对其进行一次评估。

Answer 3

提高性能的第一步是生成完整的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);
}

提高生成HTML表的速度

3 个答案: