jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
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.
Note Alban revision 28: Just updated the test with a native implementation that mimics what angular does under the hood, i.e cache elements according to the values of the rendered items. Also added snippets with random values instead of constant values. In this case angular's performance breaks down.
<!-- 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 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>
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>
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>
var native2El = document.getElementById('native2_test');
var nativeElements = {};
var native2Render = function (key, data) {
if(!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>
Ready to run.
Test | Ops/sec | |
---|---|---|
jQuery 100 |
| ready |
Angular 100 |
| ready |
Native 100 |
| ready |
Native with cached elements 100 |
| ready |
Angular - Random - 100 |
| ready |
Native - Random - 100 |
| ready |
jQuery - Random - 100 |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.