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

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -