html中的交互式画布与渲染表.哪条路更快?

Interactive canvas vs render table in html. Which way is faster?

本文关键字：条路 交互式 html      更新时间：2023-09-26

哪种方式更快，使用更少的内存?现在我用jQuery渲染了动态的<table>。有时它大约有几千个细胞，当我对它执行事件时，它的工作速度很慢。Html2Canvas花了很多时间将该表渲染为图像。所以我想知道如何使用交互式画布。下面是生成表格http://fiddle.jshell.net/j6G66/

的脚本

我创建了两个例子，

镜像创建表的方式
，这是通过创建和附加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演示1 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,jsBin demo 2

A(逻辑)边注关于字符串连接:
您将无法在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对象的引用有效

相关文章：