Back to blog

Performance tuning – Part 1

Posted on 10 June 2014 | Development

In the realm of front-end development, lots of DOM manipulation libraries exist. The most popular library, without a doubt, is jquery. A DOM manipulation library, providing very concise shorthand commands, cross-browser compatibility and a very gradual learning curve. All this, and an extremely large active community, contributed to its high popularity.

Can’t have it all

When all this functionality is included in a generic library some sacrifices have to be made. In jquery this comes down to performance, especially when adding elements to the DOM. When performance is paramount, or when you run into a performance drop because of a large amount of DOM elements, vanilla javascript DOM manipulation can speed things up a lot. The downside to using vanilla javascript is that it’s quite verbose (though getting better).

DocumentFragment

According to Mozilla: “The DocumentFragment interface represents a minimal document object that has no parent. It is used as a light-weight version of Document to store well-formed or potentially non-well-formed fragments of XML.”

What it comes down to is that when inserting DOM elements, it is often much faster to create a DocumentFragment, add elements to it and insert the fragment into the DOM. This alone will improve performance quite considerably.

Example: Here a document fragment is created, an H1 element is appended to it and finally the document fragment is inserted into the DOM.

1
2
3
4
5
6
    var element = document.getElementById('myEl'),
            docfrag = document.createDocumentFragment(),
            title = document.createElement('h1');
    title.textContent = 'My big title';
    docfrag.appendChild(title);
    element.appendChild(docfrag);
    var element = document.getElementById('myEl'),
            docfrag = document.createDocumentFragment(),
            title = document.createElement('h1');
    title.textContent = 'My big title';
    docfrag.appendChild(title);
    element.appendChild(docfrag);

DOM creation libraries

Luckily there are some nice DOM creation libraries around that don’t affect performance too much. Creating DOM elements using these libraries will allow for a more modest code base. At the time of writing, crel is the fastest of the two libraries and smaller in size as well.

Check out this jsPerf for performance results in your browser…

Let’s take the following code as an example:

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    var firstTh = document.createElement('th');
    firstTh.appendChild(document.createTextNode('Article'));
    var secondTh = document.createElement('th');
    secondTh.appendChild(document.createTextNode('Price'));
    var firstTr = document.createElement('tr');
    firstTr.appendChild(firstTh);
    firstTr.appendChild(secondTh);
    var firstTd = document.createElement('td');
    firstTd.appendChild(document.createTextNode('Toothpaste'));
    var secondTd = document.createElement('td');
    secondTd.appendChild(document.createTextNode('€ 2.46'));
    var secondTr = document.createElement('tr');
    secondTr.appendChild(firstTd);
    secondTr.appendChild(secondTd);
    var table = document.createElement('table');
    table.appendChild(firstTr);
    table.appendChild(secondTr);
    document.body.appendChild(table);
    var firstTh = document.createElement('th');
    firstTh.appendChild(document.createTextNode('Article'));
    var secondTh = document.createElement('th');
    secondTh.appendChild(document.createTextNode('Price'));
    var firstTr = document.createElement('tr');
    firstTr.appendChild(firstTh);
    firstTr.appendChild(secondTh);
    var firstTd = document.createElement('td');
    firstTd.appendChild(document.createTextNode('Toothpaste'));
    var secondTd = document.createElement('td');
    secondTd.appendChild(document.createTextNode('€ 2.46'));
    var secondTr = document.createElement('tr');
    secondTr.appendChild(firstTd);
    secondTr.appendChild(secondTd);
    var table = document.createElement('table');
    table.appendChild(firstTr);
    table.appendChild(secondTr);
    document.body.appendChild(table);

laconic
“Laconic offers an intuitive approach to generating DOM content in JavaScript”. Using laconic it would look like this:

1
2
3
4
5
6
7
8
9
10
    $.el.table(
        $.el.tr(
            $.el.th('Article'),
            $.el.th('Price')
        ),
        $.el.tr(
            $.el.td('Toothpaste'),
            $.el.td('€ 2.46', {style: 'font-weight: bold;'})
        )
    ).appendTo(document.body);
    $.el.table(
        $.el.tr(
            $.el.th('Article'),
            $.el.th('Price')
        ),
        $.el.tr(
            $.el.td('Toothpaste'),
            $.el.td('€ 2.46', {style: 'font-weight: bold;'})
        )
    ).appendTo(document.body);

crel
“A small, simple, and fast DOM creation utility”. Using crel it would look like this:

1
2
3
4
5
6
7
8
9
10
    document.body.appendChild(crel('table',
        crel('tr',
            crel('th', 'Article'),
            crel('th', 'Price'),
        ),
        crel('tr',
            crel('td', 'Toothpaste'),
            crel('td', {style: 'font-weight: bold;'}, '€ 2.46'),
        )
    ));
    document.body.appendChild(crel('table',
        crel('tr',
            crel('th', 'Article'),
            crel('th', 'Price'),
        ),
        crel('tr',
            crel('td', 'Toothpaste'),
            crel('td', {style: 'font-weight: bold;'}, '€ 2.46'),
        )
    ));

References

Our website uses cookies to understand how it is used, which helps us to improve your experience. More information