Angular vs. jQuery vs. Native

JavaScript performance comparison

Revision 28 of this test case created by Alban Mouton

Preparation code

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
jQuery:
<div id="jq_test"></div>

<script>
var jqEl = $('#jq_test');
var children = '';
var jqPush = function (data) {
  children += '<span>' + data + '</span>';
}
var jqRender = function () {
  jqEl.append(children);
  //jqEl.append('<span>' + data + '</span>');
} 
var jqClear = function () {
  jqEl.empty();
  children = '';
// not sure if we need to do more to prevent memory leak - probably doesn't matter
}
</script>

<!-- Angular -->
<div ng-app>
  Angular:
  <div ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>

<script>
  var Ctrl = function($scope){
    $scope.data = [];
  }
  
  angular.element(document).ready(function() {
    var angScope = $('#angList').scope();
    
    window.angularClear = function(){
      angScope.data.splice(0, angScope.data.length);
     // angScope.$digest();
    };
    window.angularPush = function(data){
      angScope.data.push(data);
     // angScope.$digest();
    };
    window.angularApply = function(data){
      angScope.$apply();
    };
  });
</script> 

<!-- Native -->

<div id="native_test"></div>

<script>
var nativeEl = document.getElementById('native_test');
var nativeRender = function (data) {
  var el = document.createElement('span');
  el.innerHTML = data;
  nativeEl.appendChild(el);
} 
var nativeClear = function () {
  while (nativeEl.hasChildNodes()) {
    nativeEl.removeChild(nativeEl.lastChild);
}
// not sure if we need to do more to prevent memory leak - probably doesn't matter
}
</script>
<!-- Native with cached elements -->

<div id="native2_test"></div>

<script>
var native2El = document.getElementById('native2_test');
var nativeElements = {};
var native2Render = function (key, data) {
  if(!nativeElements[key]) {
    nativeElements[key] = document.createElement('span');
    nativeElements[key].innerHTML = data;
  }
  native2El.appendChild(nativeElements[key]);
} 
var native2Clear = function () {
  while (native2El.hasChildNodes()) {
    native2El.removeChild(native2El.lastChild);
}
}


</script> 
    

Preparation code output

<!-- Jquery --> jQuery: <div id="jq_test"></div> <script> var jqEl = $('#jq_test'); var children = ''; var jqPush = function (data) { children += '<span>' + data + '</span>'; } var jqRender = function () { jqEl.append(children); //jqEl.append('<span>' + data + '</span>'); } var jqClear = function () { jqEl.empty(); children = ''; // not sure if we need to do more to prevent memory leak - probably doesn't matter } </script> <!-- Angular --> <div ng-app> Angular: <div ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script> <script> var Ctrl = function($scope){ $scope.data = []; } angular.element(document).ready(function() { var angScope = $('#angList').scope(); window.angularClear = function(){ angScope.data.splice(0, angScope.data.length); // angScope.$digest(); }; window.angularPush = function(data){ angScope.data.push(data); // angScope.$digest(); }; window.angularApply = function(data){ angScope.$apply(); }; }); </script> <!-- Native --> <div id="native_test"></div> <script> var nativeEl = document.getElementById('native_test'); var nativeRender = function (data) { var el = document.createElement('span'); el.innerHTML = data; nativeEl.appendChild(el); } var nativeClear = function () { while (nativeEl.hasChildNodes()) { nativeEl.removeChild(nativeEl.lastChild); } // not sure if we need to do more to prevent memory leak - probably doesn't matter } </script> <!-- Native with cached elements --> <div id="native2_test"></div> <script> var native2El = document.getElementById('native2_test'); var nativeElements = {}; var native2Render = function (key, data) { if(!nativeElements[key]) { nativeElements[key] = document.createElement('span'); nativeElements[key].innerHTML = data; } native2El.appendChild(nativeElements[key]); } var native2Clear = function () { while (native2El.hasChildNodes()) { native2El.removeChild(native2El.lastChild); } } </script>

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
jQuery 100
jqClear();
for (var i = 0; i < 100; i++) {
  jqPush('jq-item');
}
jqRender();
pending…
Angular 100
angularClear();
for (var i = 0; i < 100; i++) {
  angularPush('ng-item');
}
angularApply();
pending…
Native 100
nativeClear();
for (var i = 0; i < 100; i++) {
  nativeRender('native-item');
}
pending…
Native with cached elements 100
native2Clear();
for (var i = 0; i < 100; i++) {
  native2Render(i + '-native2-item', 'native2-item');
}
pending…
Angular - Random - 100
angularClear();
for (var i = 0; i < 100; i++) {
  angularPush('ng-item-' + Math.floor((Math.random()*1000000)));
}
angularApply();
pending…
Native - Random - 100
nativeClear();
for (var i = 0; i < 100; i++) {
  nativeRender('native-item-' + Math.floor((Math.random()*1000000)));
}
pending…
jQuery - Random - 100
jqClear();
for (var i = 0; i < 100; i++) {
  jqPush('jq-item-' + Math.floor((Math.random()*1000000)));
}
jqRender();
pending…

Compare results of other browsers

Revisions

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

0 Comments

jQuery:
Angular:
{{item}}