javascript - How to efficiently update a dynamically drawn background on hundreds of elements -
so, have table has dynamically drawn background on cells, gets updated regularly. table can have hundreds of rows efficiency quite important.
my current solution involves drawing background onto canvas, using drawing background image on cells via data uri.
cell.css({backgroundimage:'url(' + canvas.todataurl('image/png')+ ')' });
this works ok, html source gets rather large duplication encoded image, , makes browsers struggle.
is there way somehow reuse same data uri without duplicating it?
other ideas i've considered: - directly use canvas element background -webkit-canvas
or -moz-element
, not seem compatible internet explorer. - absolutely position canvas in each cell , redraw contents, doesn't feel efficient when hundreds of rows.
option 1:
look using canvas2blob.
basically can url string calling url.createobjecturl(blob);
blob
object returned polyfill canvas.toblob(function (blob) {...});
the advantage of blob
3/4 size of datauri string because of encoding, , should not memory / processor intensive when using 100s of times.
option 2:
if want use canvas.todataurl('image/png');
store string variable like
var str = canvas.todataurl('image/png'); // ... cell.css({backgroundimage:'url(' + str + ')' });
depending on browser implementation, calling .todataurl()
can expensive function call, , since of cells need same background, you'd better off storing string.
Comments
Post a Comment