compare concat plus vs array join

Benchmark created on


Test runner

Ready to run.

Testing in
TestOps/sec
array.join()
var html = [];
html.push(
    '<div class="c-item">',
        '<a href="#" class="c-img">',
            '<img class="border-img" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg?_=1384308019032" width="100px" height="100px">',
        '</a>',
        '<div class="c-info">',
            '<p class="c-name">C-NAME</p>',
            '<p class="desc">I once worked with a development team that eschewed the use of JavaScript because it was difficult to test. Now this was a few years back, but maybe they didn\'t look very hard for JS testing frameworks. </p>',
            '<p class="c-code">',
                '<strong>Code</strong>',
                '<a class="btn-code">ABCDEFGH</a>',
                '<span class="g-until">',
                    '<strong>Good Until:</strong>',
                    '<span class="date">13/11/2013</span>',
                '</span>',
                '<label class="overlay">',
                    '<input type="text" value="ABCDEFGH"/>',
                    'Copy code then click',
                    '<a class="btn" href="#">Click here</a>',
                '</label>',
            '</p>',
            '<a class="c-link" href="#">See all c-links &raquo;</a>',
        '</div>',
    '</div>'
);

html.join('');
ready
concat +operator
var html = '';
html =  '<div class="c-item">' +
            '<a href="#" class="c-img">' +
                '<img class="border-img" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg?_=1384308019032" width="100px" height="100px">' +
            '</a>' +
            '<div class="c-info">' +
                '<p class="c-name">C-NAME</p>' +
                '<p class="desc">I once worked with a development team that eschewed the use of JavaScript because it was difficult to test. Now this was a few years back, but maybe they didn\'t look very hard for JS testing frameworks. </p>' +
                '<p class="c-code">' +
                    '<strong>Code</strong>' +
                    '<a class="btn-code">ABCDEFGH</a>' +
                    '<span class="g-until">' +
                        '<strong>Good Until:</strong>' +
                        '<span class="date">13/11/2013</span>' +
                    '</span>' +
                    '<label class="overlay">' +
                        '<input type="text" value="ABCDEFGH"/>' +
                        'Copy code then click' +
                        '<a class="btn" href="#">Click here</a>' +
                    '</label>' +
                '</p>' +
                '<a class="c-link" href="#">See all c-links &raquo;</a>' +
            '</div>' +
        '</div>';
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.