Interactive canvas vs renderer table in html. Which way is faster?
Which way would be faster and use less memory? I have processed dynamic <table>
jQuery for now. Sometimes it has about a few thousand cells and it runs so slowly when I do events on it. Html2Canvas makes it time consuming to render this table as an image. So I'm wondering about using an interactive canvas. Here is a fiddle with a script to generate the table http://fiddle.jshell.net/j6G66/
source to share
I have created two examples,
One that reflects the way of creation tables , and by creating and adding elements of the jQuery object on each iteration of the loop:
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....
}
The second uses a different way of creating a table based instead on the principle of
concatenating the representation of strings in HTML strings :
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!
}
Now let's be human and exaggerate a bit by creating a table with 1000 rows and 10 cells in each run:
var start = new Date().getTime();
createDynamicTable(1000, 10);
var total = new Date().getTime() - start;
And let's see the results:
IN-LOOP jQuery OBJECTS/EL. CREATION vs. IN-LOOP STRING CONCATENATION ~920 ms ~130 ms
A (logical) side of a note about string concatenation:
you won't be able to store copies of live objects inside data-*
, such as ie:
cell = "<td data-objectcopy='"+ myObject +"'>...</td>"
because an object will cast to a String "[object Object]"
, unlike jQuery .data()
:
cell = $("<td />", {html:"..."}).data("objectcopy", myObject );
where any further change to the object of type: $(td).eq(0).data().objectcopy.someProperty = "new value";
will contain a reference to the original object myObject
.
source to share