Angular vs. jQuery vs. Native (v27)

Revision 27 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 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) {
  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

Ready to run.

Testing in
TestOps/sec
jQuery 100
jqClear();
for (var i = 0; i < 100; i++) {
  jqPush('jq-item');
}
jqRender();
 
ready
Angular 100
angularClear();
for (var i = 0; i < 100; i++) {
  angularPush('ng-item');
}
angularApply();
ready
Native 100
nativeClear();
for (var i = 0; i < 100; i++) {
  nativeRender('native-item');
}
 
ready
Native with cached elements 100
native2Clear();
for (var i = 0; i < 100; i++) {
  native2Render(i, 'native2-item');
}
ready

Revisions

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