jQuery vs join vs DOM (v3)

Revision 3 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;
  
  function xmlEncode(string) {
    return string.replace(/\&/g, '&' + 'amp;').replace(/</g, '&' + 'lt;').replace(/>/g, '&' + 'gt;').replace(/\'/g, '&' + 'apos;').replace(/\"/g, '&' + 'quot;');
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Pure jQuery
var div = $( "<div></div>" ).addClass( 'class1' );

if (isError){
    div.addClass( 'class2' );
}

if ( this.odd ) {
    div.addClass( ' class3 ' );
}

this.odd = !this.odd;

$( '<span></span>' ).addClass( 'span1' ).text( timestamp.toString() ).appendTo( div );
$( '<span></span>' ).addClass( 'span1' ).text( line ).appendTo( div );
 
ready
Join (jQuery)
// DOM - JOIN w/ JQuery
var div = document.createElement( 'div' ),
    classes = [ 'class1' ],
    divHTML = [];

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

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

this.odd = !this.odd;

divHTML.push( '<span class="span1">' );
divHTML.push( timestamp.toString() );
divHTML.push( '</span>' );
divHTML.push( '<span class="span2">' );
divHTML.push( xmlEncode( line ) );
divHTML.push( '</span>' );

div.setAttribute( 'class', classes.join( ' ' ) );
$( div ).html( divHTML.join( '' ) );
ready
DOM -> Join innerHTML
// DOM - JOIN
var div = document.createElement( 'div' ),
    classes = [ 'class1' ],
    divHTML = [];

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

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

this.odd = !this.odd;

divHTML.push( '<span class="span1">' );
divHTML.push( timestamp.toString() );
divHTML.push( '</span>' );
divHTML.push( '<span class="span2">' );
divHTML.push( xmlEncode( line ) );
divHTML.push( '</span>' );

div.setAttribute( 'class', classes.join( ' ' ) );
div.innerHTML = divHTML.join( '' );
 
ready
Pure DOM
// PURE DOM
var div = document.createElement( 'div' ),
    classes = [ 'class1' ],
    divHTML = [];

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

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

this.odd = !this.odd;

var span1 = document.createElement( 'span' );
span1.setAttribute( 'class', 'span1' );
span1.textContent = timestamp.toString();

div.appendChild( span1 );

var span2 = document.createElement( 'span' );
span2.setAttribute( 'class', 'span2' );
span2.textContent = line;
div.appendChild( span2 );
div.setAttribute( 'class', classes.join( ' ' ) );
 
ready

Revisions

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