

Ask HN: How to handle more than 1500 moving divs? - lampe3

Hey,
I was looking for a way to move&#x2F;pan&#x2F;zoom ALOT of divs!
I wrote a litte test app with a SVG element:
http:&#x2F;&#x2F;pmtesting1.meteor.com&#x2F;<p>but I&#x27;am not really happy with the Performance of that Demo.<p>Some tips would be really nice!<p>Thanks!
======
seanp2k2
Re: moving divs: this is probably not what you want to do. Re: performance,
check out the Chrome developer tools for info on the redraws / re-paints; this
is where your performance hit likely is. Pre-rendering to an off-screen canvas
may help here, but I'm definitely no UI / UX expert.

Check these out too: Chrome dev tools primer:
[https://developers.google.com/chrome-developer-
tools/](https://developers.google.com/chrome-developer-tools/)

Getting dirty with chrome dev tools: [http://net.tutsplus.com/tutorials/tools-
and-tips/chrome-dev-...](http://net.tutsplus.com/tutorials/tools-and-
tips/chrome-dev-tools-javascript-and-performance/)

Forcing a redraw/re-paint with some other good info:
[http://stackoverflow.com/questions/3485365/how-can-i-
force-w...](http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-
to-redraw-repaint-to-propagate-style-changes)

Canvas performance:
[http://www.html5rocks.com/en/tutorials/canvas/performance/](http://www.html5rocks.com/en/tutorials/canvas/performance/)

More on SVG:
[http://www.mysparebrain.com/svgjs2#(1)](http://www.mysparebrain.com/svgjs2#\(1\))

General JS optimization: [http://www.mellowmorning.com/2008/05/18/javascript-
optimizat...](http://www.mellowmorning.com/2008/05/18/javascript-optimization-
high-performance-js-apps/)

Usually, I find that by asking about what you want to accomplish vs. how to do
it, the results are better. Could you please give us some more context on what
you're using this for? That will probably lead you to a better and more
complete solution (unless you're just really curious about how to do
specifically this, in which case, I bet others would be interested in that as
well).

Also, with all the best intentions, and coming from someone who only knows one
language, check out this humorous post about "alot" vs "a lot" (unless that
was intentional, in which case, lol).
[http://hyperboleandahalf.blogspot.com/2010/04/alot-is-
better...](http://hyperboleandahalf.blogspot.com/2010/04/alot-is-better-than-
you-at-everything.html)

Good luck! :) [edited for formatting]

~~~
lampe3
Thank you for your info! I will look into the links!

Basically what i want to do: A big view of a Garden. The Plants are SVG images
for better and cleaner zoom. When the user is zoomed into the view he should
be able to drag around the garden.

The ALOT thing was intentional that's why it is BIG

------
apphrase
Whenever the question is 'how do i ...' followed by insane amount of
something, the right answer is usually; 'Don't'

Are you sure you want to have that many things in the same view, coz human
attention is limited as well as his perception of movement and reading
speed...

~~~
lampe3
i want to make a big garden with SVG images of the flowers so yes i want that
munch stuff on one site. The User can drag and zoomin and out.

The smoothness is okay in Chrome but in Firefox is just terrible(linux)

------
xauronx
Can you try using a canvas and drawing the images yourself instead of with
divs? Or, see if threejs has any way of implementing what you want. They have
some demos with huge numbers of elements and 60fps.

