提高生成 HTML 表格的速度答案

【问题标题】：Improving speed of generating HTML table提高生成 HTML 表格的速度
【发布时间】：2013-05-23 14:24:20
【问题描述】：

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

【问题讨论】：

你的代码有大问题，那是完全错误的！为了性能，构建一个字符串，避免附加。
你为什么要那样做？听起来您正试图以错误的方式解决某些问题。 :)
不要使用第三方代码 (jQuery)，如果你不知道它是如何工作的。

标签： javascript jquery html

【解决方案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/

【讨论】：

谢谢效果很好 - 我曾假设（错误地）appendTo 只是在写我没有意识到它创建了一个新的 DOM 元素 - 只要计时器允许，就会将其标记为已解决。
这是一种常见的误解，我们都有过。我们使用 HTML 标记进行编码，但浏览器理解 DOM 元素，而作为 JavaScript 程序员的一部分，就是将您对如何构建网页的想法从一个转移到另一个。
谢谢 - 我注意到当我单击查看源代码时没有显示由此产生的 html 输出。这与这有什么关系吗？
"view source" 从服务器获取原始源，而不是经过操作后呈现的 DOM。使用浏览器的开发人员工具来查看浏览器看到的 DOM 元素。在 Chrome 中，它是 View > Developer > Developer Tools

【解决方案2】：

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

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

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

【讨论】：

【解决方案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);
}

【讨论】：

你复制了错误！ $('</tr></table>')
也修复此行：$('<table width="625px"><tr>').appendTo('#grid');