Angular vs. jQuery vs. Native vs. Native (New School) (v11)

Revision 11 of this benchmark created on

Description

Comparison study for how an MVC framework vs. jQuery vs. native code vs. querySelector 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. newer 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>
<h1>jQuery:</h1>
<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>
  <h1>Angular:</h1>
  <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 -->
<h1>Native (getElementById):</h1>
<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> 


<!-- Native New -->
<h1>New Native (querySelector):</h1>
<div id="native_test_new"></div>

<script>
var newNativeEl = document.querySelector('#native_test_new');
var newNativeChildren = '';
var newNativePush = function (data) {
  var el = '<span>' + data + '</span>';
  newNativeChildren += el;
}
var newNativeRender = function () {
  newNativeEl.innerHTML = newNativeChildren;
}
var newNativeClear = function () {
  while (newNativeEl.hasChildNodes()) {
    newNativeEl.removeChild(newNativeEl.lastChild);
  }
  newNativeChildren = null;
  newNativeChildren = '';
}


</script>

Teardown


    jqClear();
    angularClear();
    angularApply();
    nativeClear();
    newNativeClear();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery 2000

for (var i = 0; i < 2000; i++) {
  jqPush('jq-item');
}
jqRender();
 
ready
Angular 2000

for (var i = 0; i < 2000; i++) {
  angularPush('ng-item');
}
angularApply();
ready
Native 2000

for (var i = 0; i < 2000; i++) {
  nativePush('native-item');
}
nativeRender();
ready
New Native 2000

for (var i = 0; i < 2000; i++) {
  newNativePush('native-item-new');
}
newNativeRender();
ready

Revisions

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