jQuery vs join (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  var line = "THIS IS A TEST",
      timestamp = new Date(),
      isError = true,
      odd = true;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
var timestamp = new Date(),
    tr = $( "<tr/>" ).addClass( "class1" ),
    scroll = false,
    lineHtml = $("<pre></pre>").text(line);

if (isError){
    tr.addClass("class2");
} 
if ( this.odd ) {
    tr.addClass( "class3" );
}
odd = !odd;

$( "<td/>" ).text( timestamp.toString() ).appendTo( tr );
$( "<td/>" ).addClass("class4").html( lineHtml ).appendTo( tr );

var t = tr;
ready
Join (jQuery)
function xmlEncode(string) {
        return string.replace(/\&/g,'&'+'amp;').replace(/</g,'&'+'lt;')
                .replace(/>/g,'&'+'gt;').replace(/\'/g,'&'+'apos;').replace(/\"/g,'&'+'quot;');
}

var tr = []

tr.push( '<tr class="class1 ' );

if (isError){
        tr.push( ' class2 ' );
}

if ( odd ) {
        tr.push( ' class3 ' );
}

odd = !odd;

tr.push( '<td>' );
tr.push( timestamp.toString() );
tr.push( '</td>' );
tr.push( '<td class="class4">' );
tr.push( xmlEncode( line ) );
tr.push( '</td></tr>' );

var t = $( tr.join('') );
 
ready
DOM -> Join innerHTML
function xmlEncode(string) {
        return string.replace(/\&/g,'&'+'amp;').replace(/</g,'&'+'lt;')
                .replace(/>/g,'&'+'gt;').replace(/\'/g,'&'+'apos;').replace(/\"/g,'&'+'quot;');
}

var tr = document.createElement( 'tr' ),
    trHTML = [],
    classes = [];

classes.push( 'class1' );

if (isError){
        classes.push( 'class2' );
}

if ( odd ) {
        classes.push( 'class3' );
}

odd = !odd;

trHTML.push( '<td>' );
trHTML.push( timestamp.toString() );
trHTML.push( '</td>' );
trHTML.push( '<td class="class4">' );
trHTML.push( xmlEncode( line ) );
trHTML.push( '</td>' );

tr.innerHTML = trHTML.join( '' );
 
ready
Pure DOM
var tr = document.createElement( 'tr' );
var classes = [];

classes.push( 'class1' );

if (isError){
    classes.push( 'class2' );
}

if ( odd ) {
        classes.push( ' class3 ' );
}

odd = !odd;
tr.setAttribute( 'class', classes.join( ' ' );

var td = document.createElement( 'td' );
td.textContent = timestamp.toString();

tr.appendChild ( td );

var td2 = document.createElement( 'td' );
td2.textContent = line;
tr.appendChild( td2 );
 
ready

Revisions

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