Have Geek Brain

Use the canvas tag or create a bunch of <div's> Which is faster?

Hi I have an array of hex colors and for each color in the array I want to create an 80px by 80px square representing that color. Which will be faster to use?

1: Use the canvas tag, iterate over the array, and use fillStyle and fillRect ();

or

2: Iterating over the array and creating a div box and setting the background color of the div to the current color in the array.

Note. I have 1034 colors and I am opening other suggestions, but it must be network based and cannot be flash.

+1


a source to share


3 answers


I would use divs, if only for cross-browser convenience.



Actually, I would try to do it in a server side language and then cache the results. Does the client need to interact with these forms or do something with them to make this impossible?

+1


a source


I would personally go to canvas (excanvas.js for VML emulation in IE will do the job). For simplicity and future code extension reasons.

The problem is browsers with built-in canvas implementation will perform better with 1st option, IE should be faster using DIVs (2nd method). This is due to the practice of emulation, which creates VML elements on the fly (there are simply more elements to create than just DIVs).



It's just a guess though :), write some tests and compare.

+1


a source


Do it in javascript document.createElement('div')

for simplicity and speed (you are not loading 1034 blocks of HTML markup and it will work everywhere).

0


a source






More articles:


All Articles