Angular vs. jQuery (v44)

Revision 44 of this benchmark created by Mark on

Description

Per the original tests, without the native comparison.

Preparation HTML

<!-- Jquery -->
<script src="https://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);
} 
var jqClear = function () {
  jqEl.empty();
  children = '';
}
</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.data.push(data);
    };
    window.angularApply = function(data){
      angScope.$apply();
    };
  });
</script> 

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular
angularClear();
for (var i = 0; i < 100; i++) {
  angularPush('data');
  angularApply();
}
 
ready
jQuery
jqClear();
for (var i = 0; i < 100; i++) {
  jqPush('data');
  jqRender();
}
ready

Revisions

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