Early on I would've done this:

for (var i=0; i<10000; i++) { $("BODY").append($("<div />").addClass("test-div")); }

This code produced an average running time of 779.463ms. This means it took over three quarters of a second to append these elements to the DOM.

So what is the problem here?

Well, there are a few - too many reflows and too many jQuery objects. We'll address the latter in the next step, so let's look at reflow here.

Simply put, reflow is when the browser needs to process and draw the webpage, and it is one of the most expensive browser processes. One of the easiest ways to improve the performance of your application is to minimize the number of reflows, and that's what we're going to do.

Many different operations can cause a reflow, and it isn't the same for every browser. But rest assured, appending an element to the DOM will cause a reflow. So the obvious problem with our code snippet is that we are generating 10,000 reflows. Some browsers may handle this intelligently and reduce some of the cost, but we can do better.