Angular vs. jQuery vs. Native

JavaScript performance comparison

Revision 3 of this test case created by

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 nativeChildren = '';
var nativePush = function (data) {
  var el = '<span>' + data + '</span>';
  nativeChildren += el;
}
var nativeRender = function () {
  nativeEl.innerHTML = nativeChildren;
}
var nativeClear = function () {
  while (nativeEl.hasChildNodes()) {
    nativeEl.removeChild(nativeEl.lastChild);
  }
  nativeChildren = null;
  nativeChildren = '';
}


</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 nativeChildren = ''; var nativePush = function (data) { var el = '<span>' + data + '</span>'; nativeChildren += el; } var nativeRender = function () { nativeEl.innerHTML = nativeChildren; } var nativeClear = function () { while (nativeEl.hasChildNodes()) { nativeEl.removeChild(nativeEl.lastChild); } nativeChildren = null; nativeChildren = ''; } </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++) {
  nativePush('native-item');
nativeRender();
}
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}}