Angular vs. jQuery vs. Native

JavaScript performance comparison

Revision 27 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 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 type="text/javascript">
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>

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 i = 0; i < 100; i++) {
  jqPush('jq-item');
}
jqRender();
 
pending…
Angular 100
angularClear();
for (var i = 0; i < 100; i++) {
  angularPush('ng-item');
}
angularApply();
pending…
Native 100
nativeClear();
for (var i = 0; i < 100; i++) {
  nativeRender('native-item');
}
 
pending…
Native with cached elements 100
native2Clear();
for (var i = 0; i < 100; i++) {
  native2Render(i, 'native2-item');
}
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