Jquery 动态创造巨大 table 性能

Question

我想生成一个巨大的 table 由 Java servlet 生成并作为 ajax 响应发送给客户端。我的 table 个细胞是

<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>

假设我们有一个有 30 行和 40 列的 table 1000 摄氏度。当我将此字符串从 java 发送到浏览器时，我将使用大量网络资源并且客户端连接能力较差，因此必须尽量减少从 java 发送的内容。首先我缓存颜色名称 c1:blue、c2:yellow、c3:red、c4:cyan

在接收方，设备是移动设备或 ipad 或 tablets，因此 cpu 工作量也很重要。性能动态生成 table 的最佳方式是什么？应如何注册操作？颜色应该怎么设置？

选项 1: 使用 json 符号，例如

 { {'c1','c2','value1'},{'c3','c4','value2'}..

填充一个包含所有单元格的大字符串并设置为 table 只有一次附加。

 // 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);

选项：2 发送一个空模板在接收方填写

Java: 字符串table字符串； bg为背景颜色属性，br为边框颜色属性

tableString += '<td bg=c1 br=c4>cellvalue</td>';

在浏览器端，将此 table 字符串设置为 table 容器

$('#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")));

Answer 1

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

Answer 2

关于您的事件处理，您应该使用event delegation。您应该有一个处理程序，而不是每行一个处理程序。在 jQuery:

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

将脚本与文档结构（DOM 创建）混合在一起是不好的，原因有很多（对网页设计人员不利，难以维护，关注点的混合，对客户的影响太大等）

因此，DOM 应在服务器上准备创建。由于您使用的是 Java，我看不出有什么理由不使用某些服务器端技术。生成 HTML（手动，JSP，Facelets，Velocity，...）。 这会让客户的工作如你所愿的轻松很多。

如果不可能，at least use DOM API ()。 你应该避免基于字符串的创建..

Answer 3

你应该像这样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");
}

Jquery 动态创造巨大 table 性能

Jquery performance creating huge table dynamically

html

javascript

performance

jquery

html-table