Best way to render many element on a webpage?

Question

I'm building a webpage with many moving graphic/text elements using javascript, I'm using div for each element but on my mobile phone it is slow. Is there tips for making it faster ? For exemple if my container div overflow style is set to hidden it is faster.

Also is it better to use SVG or something else ?

Yes: don't. Cut down on the amount of animations you're using. You'll get much, *much* better accessibility for your site. — Niet the Dark Absol, May 23 '18 at 11:34
I think this summarizes the answer: https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div — Eriks Klotins, May 23 '18 at 11:41
@NiettheDarkAbsol I need many elements. Have you downvoted ? — Entretoize, May 25 '18 at 11:11

score 0 · Accepted Answer · answered May 23 '18 at 11:46

Handling DOM elements is a heavy thing to do, even on desktop browsers, and it is also inefficient. But there are good libraries out there to work with DOM elements, such as animating them, moving them, styling them programmatically, etc ... . For example JQuery makes it easier and more robust across different platforms/browsers combination. But The problem of slowness is with DOM itself, not the JS and not the code you write and how you handle it.

So You're right! You're better using something else than the DOM, SVG makes things a little better. I honestly do not know much about it and every time I see it's syntax, its just frightening! But I know it has it's own animating system and that's more lightweight that other DOM elements.

But what I suggest to you is canvas. It is HTML5, faster, and its syntax is much more beautiful, than handling DOM elements (i.e. div) and drawing SVG (i.e. 80 M 62.5 D 10). Canvas uses beautiful JS function APIs and is logically easy to understand and design. All you do is pureJS. Also canvas's performance has proven to be great! for example : https://robostorm.io/

It gives the beautyness and functionality of Adobe Flash, but portabality of JS : )

Best way to render many element on a webpage?

1 Answers1