jQuery vs native

JavaScript performance comparison

Test case created by Ivan Brajković

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
    </tr>
  </thead>
  <tbody id="data">
  </tbody>
</table>
      
<script>
Benchmark.prototype.teardown = function() {
  data.innerHTML = '';

};
</script>

Preparation code output

<table id="table"> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> </tr> </thead> <tbody id="data"> </tbody> </table>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
native 1
/*var data = document.getElementById('data');
for (var i=0; i<20; i++) {
  data.innerHTML += '<td>Number ' + i + '</td>';
}*/

var data = document.getElementById('data');
for (var i=0; i<20; i++) {
  data.insertAdjacentHTML('beforeend',
    '<tr>' + 
      '<td>Number 0</td>' +
      '<td>Number 1</td>' +
      '<td>Number 2</td>' +
    '</tr>'
  );
}
pending…
native 2
var data = document.getElementById('data');

for (var i=0; i<20; i++) {
  var tr = document.createElement('tr');

  for (var j=0; j<3; j++) {
    var td = document.createElement('td');
    td.innerText = 'Number ' + j;
    tr.appendChild(td);
  }
  
  data.appendChild(tr);
}
pending…
native 3
var data = document.getElementById('data');
var fragment = document.createDocumentFragment();

for (var i=0; i<20; i++) {
  var tr = document.createElement('tr');

  for (var j=0; j<3; j++) {
    var td = document.createElement('td');
    td.innerText = 'Number ' + j;
    tr.appendChild(td);
  }  
  fragment.appendChild(tr);

}
data.appendChild(fragment);
pending…
jquery 1
var data_jq = $('#data');

for (var i=0; i<20; i++)
  data_jq.append(
    '<tr>' + 
      '<td>Number 0</td>' +
      '<td>Number 1</td>' +
      '<td>Number 2</td>' +
    '</tr>'
  );
pending…
jquery 2
var data = $("#data");

for (var i=0; i<20; i++) {	
  var tr = $('<tr>');  
  for (var j=0; j<3; j++) {  	
    var td = $('<td>');
    td.append('Number ' + j);
    tr.append(td);
	}

  data.append(tr);
}
pending…
jquery 3
var data = $("#data");

for (var i=0; i<20; i++) {	
  var tr = $('<tr>', {
    html: [
      $('<td>', {text: 'number 1'}),
      $('<td>', {text: 'number 2'}),
      $('<td>', {text: 'number 3'})
    ]
  });

  data.append(tr);
}
pending…
native 4
var data = document.getElementById('data');
for (var i=0; i<20; i++) {
  data.insertAdjacentHTML('beforeend',
    '<tr>' + 
      '<td>Number 0</td>' +
      '<td>Number 1</td>' +
      '<td>Number 2</td>' +
    '</tr>'
  );
}
pending…
dom
var row,
    cell,
    table = document.getElementById('table');

for (var i=0; i<20; i++) {  
  row = table.insertRow(-1);
  for (var j=0; j<3; j++) {  	
    cell = row.insertCell(-1);
    cell.textContent = 'Number ' + j;
  }
}
pending…

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

Compare results of other browsers

0 Comments

col1 col2 col3