Javascript 交互式画布与html中的渲染表。哪条路更快？

哪种方式速度更快，占用的内存更少？ 现在我已经用jQuery呈现了动态的

。有时候它有几千个细胞，当我在上面做事情的时候，它工作得很慢。Html2Canvas将此表渲染为图像需要花费大量时间。所以我想知道如何使用交互式画布。

---

这里是用于生成表的fiddle脚本

我创建了两个示例

反映您创建表格的方式的方法 这是通过在每个循环迭代中创建和附加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....
}

让我们看看结果：

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

              ~920 ms                                       ~130 ms

---

关于字符串连接的（逻辑）旁注：
您将无法将活动对象的副本保存在

数据-*

属性中，例如：

---

其中，对对象的任何进一步更改，如：

$（td）.eq（0）.data（）.objectcopy.someProperty=“new value”

将保持对原始

myObject

对象的引用处于活动状态。

请给出示例，什么类型的事件？试着分页，试着无限滚动，等等。也问问你自己“有几千个单元格的表格”有多友好？这真的是最好的方法吗？Alos您是如何在jquery中呈现表的，是许多小的DOM计算还是一个大的DOM计算？许多小的操作会降低性能。添加具有不同背景的类，调整所有表的大小（通过调整每个单独的宽度和高度，即+1px），html2canvas非常慢，当然呈现这个表。是的，有很多小动作。为generate table添加了fiddle-with脚本。+1用于演示一次DOM操作接近magnitute的顺序，其速度要快于数千次DOM操作。即使降到一行，concatation的速度大约是创建每个单元格并将其附加到单行的两倍。5毫秒对2毫秒的粗略数字。@JonP谢谢你的留言！我测试了创造100000个元素；10000行和10个单元格：9200毫秒（几乎是10秒！！）而连接时只有410毫秒（在我糟糕的配置上）。我也开始玩大数字。当您进入大数字时，concatation版本的伸缩性非常好，而且似乎是浏览渲染成为了瓶颈。这纯粹是观察，没有尝试任何实际测量！大约5000行之后，重复的DOM操作版本几乎无法使用。@jonP。即使10万个元素的连接占用

~400ms

，我们实际上在等待的是浏览器在页面上呈现元素，不管怎样，后者的速度更快。@snouve我几乎可以肯定它可以降到1s。甚至更少。例如，您甚至不需要为元素指定数据。您可以在对象中保持数据的完整性。。。真的，如果我能看到你正在尝试的东西的演示，我相信我们可以在性能或其他想法上找到答案。

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

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

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