Angular vs. jQuery (v46)

Revision 46 of this benchmark created on

Description

Per the original tests, without the native comparison.

Preparation HTML

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-2.1.4.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.html(children);
}
var jqRenderAppend = function () {
  jqEl.append(children);
} 
var jqClear = function () {
  jqEl.empty();
  children = '';
}
</script>

<!-- Angular -->
<div ng-app="app">
  Angular:
  <div ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>

<script>
  angular.module('app', [])
.controller('Ctrl',
  function($scope){
    $scope.data = [];
  });

angular.element(document).ready(function() {
  var angScope = angular.element('#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>

Test runner

Ready to run.

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

Revisions

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