Angular vs. jQuery vs. Native (v38)

Revision 38 of this benchmark created on

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 jqEl2 = $('<div></div>');
var jqPush = function (data) {
  $('<span></span>').text(data).appendTo(jqEl2);
}
var jqRender = function () {
  jqEl.append(jqEl2);
} 
var jqClear = function () {
  jqEl2.empty();
  jqEl.empty();
// 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);
    };
    window.angularPush = function(data){
      angScope.$apply(function(){
          angScope.data.push(data);
      });
    };
    window.angularApply = function(data){
    };
  });
</script> 

<!-- Native -->

<div id="native_test"></div>

<script>
var nativeEl = document.getElementById('native_test');
var container = null;

var nativeAddItem = function(data) {
  var span = document.createElement("span");
  span.textContent = data;
  container.appendChild(span);
}
var nativeRender = function () {
  nativeEl.appendChild(container);
} 
var nativeClear = function () {
    var range = document.createRange();
    range.selectNodeContents(nativeEl);
    range.deleteContents();
    
    container = document.createElement("div");
}


</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');
}
ready
Native 100
nativeClear();
for (var i = 0; i < 100; i++) {
  nativeAddItem('native-item');
}
nativeRender();
ready

Revisions

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