Question

哪种方式会更快并且使用更少的内存？现在我已经通过jQuery渲染了动态<table>。有时它有大约几千个细胞，当我在它上面做事件时，它的工作速度很慢。 Html2Canvas花了很多时间将此表渲染为图像。所以我想知道使用交互式画布。这里有用于生成表http://fiddle.jshell.net/j6G66/

的脚本

Answer 1

我创建了两个例子，

反映你创建表格的方式 ，这是通过在每个循环迭代中创建和附加jQuery对象元素来实现的：

function createDynamicTable(rows, cols) {
  var table = $('<table />');
    for(var i=0; i<rows; i++){ // noprotect
        var row = $('<tr />');
        for(var j=0; j<cols; j++){
            var cell = $('<td />');
            cell.text("R"+i+"-C"+j);
            cell.appendTo( row ); // Appends here....
        }
        row.appendTo( table ); // Appends here....
    }
    $('#tableContainer').append( table );  // Appends here....
}

第二种使用不同的创建表格的方式，而不是基于原则 连接所需元素的HTML字符串表示：

function createDynamicTable(rows, cols) {
  var table = "<table>";
    for(var i=0; i<rows; i++){
        var row = "<tr>";
        for(var j=0; j<cols; j++){
            var cell = "<td>R"+i+"-C"+j+"</td>";
            row += cell;
        }
        row += "</tr>";
        table += row; 
    }
    table += "</table>"
    $('#tableContainer').append( table ); // Append only once!
}

现在让我们成为人类并夸大一点，在每次运行中创建一个包含1000行和10个单元格的表：

var start = new Date().getTime();
createDynamicTable(1000, 10); 
var total = new Date().getTime() - start;

让我们看看结果：

IN-LOOP jQuery OBJECTS/EL. CREATION       vs.     IN-LOOP STRING CONCATENATION

              ~920 ms                                       ~130 ms

jsBin demo 1 jsBin demo 2

_{字符串连接上的（逻辑）侧注：

您将无法在data-*属性中保留活动对象的副本，例如：}

cell = "<td data-objectcopy='"+ myObject +"'>...</td>"

_{导致该对象将导致字符串"[object Object]"，与jQuery的.data()形成对比：}

cell = $("<td />", {html:"..."}).data("objectcopy", myObject );

_{对对象的任何进一步更改，如：$(td).eq(0).data().objectcopy.someProperty = "new value";将保持对原始myObject对象的引用。}

交互式画布vs html中的渲染表。哪种方式更快？

1 个答案: