search

FredrikNoren / ungit

The easiest way to use git. On any platform. Anywhere.
MIT License
10.44k stars 637 forks source link

Recommend switching to D3/SVG #152

Closed eahutchins closed 10 years ago

eahutchins commented 11 years ago

Using a canvas very slow for any reasonably large repo (I scrolled around and quickly generated a 20k pixel tall canvas before ungit ground to a halt). D3/SVG would be a much more responsive solution, and you can easily add styling and event handlers to SVG elements. I've built something similar for a CI system we're using in-house and it's quite responsive even viewing every commit in our entire repo.

notslang commented 11 years ago

+1: Thanks for the suggestion, this sounds like a great idea! Would you have time to submit a PR for this?

Ajedi32 commented 11 years ago

Yeah, I did notice some slowdowns on Ubuntu 12.04 LTS with Chrome. The problem wasn't nearly as bad on Windows, but it does still seem a bit sluggish. I'm unsure of how hard this would be to implement though...

eahutchins commented 11 years ago

Sorry I don't have the time to implement it. For reference the D3 rendering code I wrote was ~300 lines for a simple force-directed layout with clickable nodes and branch labels, so it's not that huge an undertaking. Another way to do things would be to keep the canvas sized to the window and do your own scroll/clip rect into that.

villelahdenvuo commented 11 years ago

:+1: for D3, I've used it and it's really easy for data visualization.

FredrikNoren commented 11 years ago

Cool thanks for the tip, I'll definitely give this a try as soon as I have time!

zedutch commented 11 years ago

:+1: for D3. I recently had to use it at Uni and it's really a great data visualization library.

FredrikNoren commented 11 years ago

Did some quick testing just to see how svg performs compared to canvas; off the bat it seems like canvas wins.

3000 circles in a 1000x8000 large svg/canvas it was less than 30fps for svg and more than 60fps for canvas on my machine (win7 & chrome).

Here's the tests: https://googledrive.com/host/0BwdGi7DdqCYFTHF3TjVCcUNQdlE/canvasTest.html https://googledrive.com/host/0BwdGi7DdqCYFTHF3TjVCcUNQdlE/svgTest.html

Nothing decisive yet though, could be that canvas is just better for drawing lots of circles

eahutchins commented 11 years ago

@FredrikNoren make sure you set shape-rendering="crispEdges" and turn the stroke to transparent to get a fair comparison, I assume the canvas isn't anti-aliased? (the canvas test doesn't render anything for me).

FredrikNoren commented 11 years ago

@eahutchins hm no the canvas is with anti-aliasing so in that respect they're the same. Weird that it doesn't render anything for you though, maybe it's the height of the canvas (it didn't render anything for me when I went from 8,000 to 10,000)

Tried setting c.setAttributeNS(null, 'stroke', 'transparent'); but it didn't have any effect on fps. Also, with "cripsEdges" it barely borders 30fps.

(Again, just tested here on my machine on chrome, so a very rough test)

Ajedi32 commented 11 years ago

They both seem about the same on my PC...

FredrikNoren commented 11 years ago

@Ajedi32 hm interesting, what framerates are you getting and what os/browser are you on?

zedutch commented 11 years ago

For me they're also about the same (Mac OS X 10.8 + Firefox) I do know SVG doesn't work on older versions of android, but I don't think that's a problem for this software?

eahutchins commented 11 years ago

@FredrikNoren one other thing: requestAnimationFrame is rate-limited to 60Hz, so if the SVG is slightly slower but can't quite make 60FPS it'll drop down to 30FPS. Try redrawing in a tight loop instead, or setting the circle count to something that takes about a second in the canvas case.

Even if SVG is a bit slower, it's still the better choice for this kind of application because it has a proper DOM and elements can be evented/scripted directly.

Ajedi32 commented 11 years ago

I just tried it on another PC (2.66 GHz Intel Core Duo, ATI Radeon X600 SE, 3 Gig of RAM) with Chrome and I'm getting 6 fps for canvas and 20 fps for SVG.

I'll get the FPS and specs for my previous test in a bit...

Ajedi32 commented 11 years ago

Okay so on my Laptop (2.5 GHz Intel Core i5-3210M, Intel HD Graphics 4000, 6 GB of RAM) with Chrome I get 40-55 fps with canvas and 20 fps with SVG.

eahutchins commented 11 years ago

On my OpenSUSE 12.3 x86_64 laptop (i7-3720QM CPU @ 2.60GHz, GTX680M graphics) running chrome 31.0.1612.0 dev, with the circle counts bumped to 30,000:

canvas: 699 ms/frame average SVG: 284.103 ms/frame average

SVG is 2.4x faster

FredrikNoren commented 10 years ago

Thanks sticking in with this guys! I've started playing around with a svg rewrite (see the svg branch) and so far it feels pretty promising!