June 26, 2014

DOM Insertion Test

While I worked on some task that includes inserting of many HTML elements into the document I was wandering what the fastest method is. I tried (basically) three methods:


The fastest method is the last and the slowest is the first method. But sometimes is better use safe DOM approach so in this cases is the best using of the second method.

Some advices

  1. Make HTML you are inserting as simple as is possible - each attribute counts!
  2. If you create many elements and want event handlers attached to them don`t do it for each one element but attach one event handler to the parent element and then inside the handler self determine what the target element is.
  3. Insert large amount of new elements in portions not in once. The advantage is that user always see that something is happening, the disadvantage is that it is little slower than do it at once.

Below is jsFiddle with the testing document (http://jsfiddle.net/ondrejd/kLw52/):

No comments: