Javascript 动态创建大型表的Jquery性能

我想生成一个由Javaservlet生成的巨大表，并作为ajax响应发送给客户机。我的表格单元格是

<td style="background-color:blue;border-color:yellow;" onClick=tableClick(this)>value1</td>
<td style="background-color:red;border-color:cyan" onClick=tableClick(this)>value2</td>

填充包含所有单元格的大字符串，并使用append仅将其设置为表一次

 // iterate in the json array and fetch the corresponding background color
 var bgcolor = extractFromJson(row,col);
 tablestring += "<td onclick=tableClick(this) style='background-color:' + bgcolor + ';border-color:' + brcolor + '>cellvalue</td>";

 // once we have all the cells, then set to the table
 $('#mytable').append(tablestring);

---

选项1是更好的方法。DOM操作通常非常慢。在第一个选项中，创建一个字符串，然后最后追加一次。另一方面，在选项2中，您正在对每一行执行DOM操作，这使得它效率低下。我认为选项1更好。

关于事件处理，您应该使用。您应该有一个单独的处理程序，而不是每行一个处理程序。在jQuery中：

 $('#mytable').parent().on('click', 'td', function(ev) {
     tableClick($(this)[0]);
 });

将脚本与文档结构（DOM创建）混合在一起是不好的，原因有很多（对web设计师来说是不好的，难以维护，关注点混杂，对客户端的影响很大，等等）

因此，应该在服务器上准备DOM创建。由于您使用的是Java，我不认为有理由不使用服务器端技术来生成HTML（手动、JSP、Facelets、Velocity等）。 这将使客户的工作比您想要的轻松得多

---

如果不可能，（）您应该避免基于字符串的创建。

您应该像这样循环json

for(var i = 0; i < json.length; i++){
    $('<td/>').style({
        backgroundColor: getColor(json[i][0]),
        border: getColor(json[i][1])
    })
    .html(json[i][2])
    .click(function(){
        tableClick($(this)[0]);
    }).appendTo("#mytable");
}

for（var i=0；i

可能值得在json中循环，并使用

createElement

和

attr

按照您的意愿对其进行样式化，而不是创建一个字符串供jquery读取并执行相同的操作，请参见这里注入html字符串有什么问题？只要您避免基于字符串的DOM创建（您可以应用@rorypicko方法来避免它），就可以使用更少的函数调用involvedOption 1。无论如何，它仍然是基于JS的。我从未测试过它，但完整的HTML（由服务器生成）可能更快，对客户端的压力更小（甚至可以缓存到服务器端！）。当然，事件处理部分是JS性质的，在这种情况下，JSON比XML轻。发送一些JSON供客户端处理。在这里，您可以考虑像AngularJS这样的声明性方法（结构部分），而不是JQuery命令式方法。我从来没有测试过它，但是在这种情况下考虑它似乎是合理的。关于你的DOM问题，既然性能非常重要，我建议你做一些关于样式的实验，是的，你必须一个一个地做，但这不是问题。只是需要去做；您只需要现在就进行基准测试。如果性能和网络延迟很重要。。。。。基于字符串是一种方式，尽管它有很多缺点。。。检查这里：什么是事件？使用字符串设置将事件侦听器放在完整表上更好，这是事件委派的主要功能。与其在每个td上添加事件侦听器，不如在表上只添加一个事件侦听器。最终设计：我将在整个表上放置事件侦听器。对于样式和值，将发送json数组，解码例如背景颜色：#001122 by c1，（为了最大限度地减少网络使用，我将有1000个单元格，但只有5种不同的背景和前景颜色）通过json发送属性。在接收方，我生成一个巨大的字符串，其中包含由concat创建的所有单元格（搜索很多，并且+=字符串操作足够快）。然后，最后使用document.getElementById（'id'）.innerHTML=hugeString（使用$（'#id）时会有性能损失）。html（hugeString）这很好，JQuery选择器将比本机选择器慢一点，因此getElementById更好。

$('#mytable').append(tablestring);
// register actions and set colors
$('#mytable').find('td').each(funtction() {
     $(this).on('click', function () { tableClick($(this)[0]); });
     $(this).style('background-color', getColor($(this).attr("bg")));
     $(this).style('border-color', getColor($(this).attr("br")));

 $('#mytable').parent().on('click', 'td', function(ev) {
     tableClick($(this)[0]);
 });

for(var i = 0; i < json.length; i++){
    $('<td/>').style({
        backgroundColor: getColor(json[i][0]),
        border: getColor(json[i][1])
    })
    .html(json[i][2])
    .click(function(){
        tableClick($(this)[0]);
    }).appendTo("#mytable");
}