Angular vs. jQuery vs. Native (v52)

Revision 52 of this benchmark created on

Description

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 HTML

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.11.3.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 = '';
        // not sure if we need to do more to prevent memory leak - probably doesn't matter
    }
</script>

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>

Angular:
<div ng-app>
    <div ng-controller="Ctrl" id="angList">
        <span ng-repeat="item in data">
            {{item}}
        </span>
    </div>
</div>

<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> 

<!-- Native -->
Native:
<div id="native_test"></div>

<script>
    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>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery 10000
jqClear();
for (var i = 0; i < 10000; i++) {
  jqPush('jq-item');
}
jqRender();
 
ready
Angular 10000
angularClear();
for (var i = 0; i < 10000; i++) {
  angularPush('ng-item');
}
angularApply();
ready
Native 10000
nativeClear();
for (var i = 0; i < 10000; i++) {
  nativeRender('native-item');
}
 
ready

Revisions

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