Re: Cuppadev » Javascript Draw

Michel Hegeraat — Sun, 03 Jun 2007 01:56:35 -0000

I'm trying to show a layer2 map of connected devices.

I figured out a way to do this creating a div for each line and device basically allowing me to update these individually using a ajax poll of a page that can reports any changes.

I found that when you have many div's it seems to be more and more time consuming to access the div. e.g. if we have 10 device then moving a device while redrawing the lines takes half a second. If we have 200 devices then moving a device while redrawing the same 2 lines takes 10 seconds.

I guess this shows that the browser has to search the div in the current document. I already started using an array to hold the reference to a div but this doesn't change anything. It' is like if the browser has to sequentially go through the source to find the right div.

I guess I need something like SVG to get the performance right.

Would there be any performance gain in using an object oriented style of javascript? I guess not as there is no way to associate the contents of a dom object with the property of a line or device object.

I wonder what the canvas approach would add and how easy or difficult it would be to trap events like drag drop and click.

Is line drawing faster when no div's are used?

Would it be possible to see you source? The files in the example are not very readable and I guess I like source especially when there comments hinting me what each part is doing ;-)

If you are interested is my sources feel free.

Cheers,

Michel

Disqus - Latest Comments for Michel Hegeraat

Re: Cuppadev » Javascript Draw