Angular vs. jQuery vs. Native (v15)

Revision 15 of this benchmark created on

Description

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 HTML

<!-- 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>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery 100
for (var i = 0; i < 10; i++) {
  jqPush('jq-item');
  jqRender();
}
ready
Angular 100
for (var i = 0; i < 10; i++) {
  angularPush('ng-item');
  angularApply();
}
ready
Native 100
for (var i = 0; i < 10; i++) {
  nativePush('native-item');
  nativeRender();
}
ready

Revisions

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