When it comes to optimising a Javascript app that involves inserting hundreds and potentially thousands of elements into a page, save yourself headaches and use

When it comes to optimising a Javascript app that involves inserting hundreds and potentially thousands of elements into a page, save yourself headaches and use documentFragment to prevent reflow and at the same time, insert a lot of elements into your page/app very quickly. I recently build an app that has reached almost 54,000 mouse click records. Each time you click, it saves that value in a database: http://coolcoolcoolcoolcool.com/ http://coolcoolcoolcoolcool.com/ Inspecting the page will yield a click map where I am displaying all 53,000 mouse clicks inside of a map. As you can see I am using canvas now, but before that I was inserting them into the page and believe it or not, using documentFragment it was amazingly fast. The reason I switched to canvas because performance on mobile was poor. 53,000+ elements rendered by Javascript on desktop didn't cause any fuss though, using documentFragment makes all the difference. Keep in mind, documentFragment really only shines when you are inserting 1000 plus elements into the page at once. One reflow against many reflows is going to cause you a lot of headaches.