Angular vs. jQuery vs. Native

JavaScript performance comparison

Revision 4 of this test case created

Info

Comparison study for how an MVC framework vs. jQuery vs. native code performs while rendering a list populated from an array. We're doing a study trying to determine the best JavaScript approach to an app running on an ARM board, so we want to get a sense of what we're sacrificing in native js vs. jquery-only vs. angular.js scenarios.

Preparation code

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
jQuery:
<div id="jq_test">
</div>
<script type="text/javascript">
  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 type="text/javascript">
  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 type="text/javascript">
  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:
Angular:
{{item}}

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery 100
jqClear();
for (var j = 0; j < 100; j++) {
  for (var i = 0; i < 100; i++) {
    jqPush('jq-item');
  }
  jqRender();
}
pending…
Angular 100
angularClear();
for (var j = 0; j < 100; j++) {
  for (var i = 0; i < 100; i++) {
    angularPush('ng-item');
  }
  angularApply();
}
pending…
Native 100
nativeClear();
for (var j = 0; j < 100; j++) {
  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. Here’s a list of current revisions for this page:

0 comments

Add a comment