4 ms·

One thing to note with respect to SVG and Canvas is that these APIs are not nearly as optimized in browsers as HTML is. Since the web is predominantly HTML, Ch

One thing to note with respect to SVG and Canvas is that these APIs are not nearly as optimized in browsers as HTML is. Since the web is predominantly HTML, Chrome and other browser devs have focused all their efforts on optimizing it (and JS). SVG and Canvas rendering has not gotten that kind of attention. However it sounds like they are working on it now. The upshot is that even if it doesn't seem like it would work today doesn't mean it's dead in the water and we need yet another drawing API. Give it time. It also means -- and I know this sounds crazy -- that you could try drawing your dots with absolutely positioned 1px by 1px DIVs. I know this sounds absurd but I once worked on a scrolling + scaling timeline widget that performed 10x better when implemented with absolutely positioned HTML DIVs than in SVG. (And like gruesom noted, it is probably best to blast all your DIVs the DOM in one shot.)

kodisha 13y ago
Wow, thats bold. I would love to do some experiments with divs, but i would really hesitate to put something like that in production. I think that comments like this confirm that we really need new/better APIs, and i hope that browsers will get into it.
eagsalazar2 13y ago
I can second this. Did a mind map + force directed graph where the lines connected at the edges of each node and each node had to be markup/css (so canvas was out). Making the dots slide around the node perimeter smoothly ended up working best by doing some trig and placing them absolutely within the node div. Super hacky but it was what worked.
seszett 13y ago
I've done this too (on http://ssz.fr/ker/ http://ssz.fr/ker/ for example) and I've noticed if indeed, HTML DOM was slightly faster than SVG up to a couple Firefox versions ago, I have found it to be consistently slower on Chromium, and about the same in the latest Firefox versions. And 40k elements is a no way with any method other than canvas on Firefox, though it can sometimes stay somewhat usable with SVG on Chromium.
- teleclimber 13y ago
  Interesting. I should point out my experience with this is from about 18 months ago (Spring 2012).

kodisha 13y ago

Wow, thats bold. I would love to do some experiments with divs, but i would really hesitate to put something like that in production. I think that comments like this confirm that we really need new/better APIs, and i hope that browsers will get into it.

eagsalazar2 13y ago

I can second this. Did a mind map + force directed graph where the lines connected at the edges of each node and each node had to be markup/css (so canvas was out). Making the dots slide around the node perimeter smoothly ended up working best by doing some trig and placing them absolutely within the node div. Super hacky but it was what worked.

seszett 13y ago

I've done this too (on http://ssz.fr/ker/ http://ssz.fr/ker/ for example) and I've noticed if indeed, HTML DOM was slightly faster than SVG up to a couple Firefox versions ago, I have found it to be consistently slower on Chromium, and about the same in the latest Firefox versions. And 40k elements is a no way with any method other than canvas on Firefox, though it can sometimes stay somewhat usable with SVG on Chromium.

teleclimber 13y ago
Interesting. I should point out my experience with this is from about 18 months ago (Spring 2012).