3 ms·

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

• apphrase 13y ago
  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 13y ago
    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)
• seanp2k2 13y ago
  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-tools-javascript-and-performance/ http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-... Forcing a redraw/re-paint with some other good info: http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes http://stackoverflow.com/questions/3485365/how-can-i-force-w... 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-optimization-high-performance-js-apps/ http://www.mellowmorning.com/2008/05/18/javascript-optimizat... 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-than-you-at-everything.html http://hyperboleandahalf.blogspot.com/2010/04/alot-is-better... Good luck! :) [edited for formatting]
  • lampe3 13y ago
    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
• xauronx 13y ago
  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.