Angular vs. jQuery vs. Native

JavaScript performance comparison

Revision 15 of this test case created by

Preparation code

<!-- Jquery -->
<script src="https://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
for (var i = 0; i < 10; i++) {
  jqPush('jq-item');
  jqRender();
}
pending…
Angular 100
for (var i = 0; i < 10; i++) {
  angularPush('ng-item');
  angularApply();
}
pending…
Native 100
for (var i = 0; i < 10; 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}}