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
Testing performance of subscribers/watchers and updating the ui (Angular.js, knockoutjs, ModelView.js 0.42.2)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://foo123.github.io/libs/modelview-0.42.2.min.js"></script>
<script>
/* Angular */
var Ctrl = function($scope){
$scope.data = "";
$scope.numberofChanges1 = 0;
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges1++;
});
}
angular.element(document).ready(function(){
var ang_scope = $('#angList').scope();
ANGclear = function() {
ang_scope.data = "OMGOMGOMG";
};
ANGpush = function() {
ang_scope.data += "OMGOMGOMG";
ang_scope.$apply();
};
});
/* Knockout */
var KOData = ko.observable(""), KOUpdates1 = ko.observable(0),
KOviewmodel = {data: KOData, updates1: KOUpdates1};
var KOclear = function(){ KOData(""); };
var KOpush = function(){ var old = KOData(); KOData(old + "OMGOMGOMG"); };
KOData.subscribe(function(){
KOUpdates1(KOUpdates1() + 1);
});
ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
/* ModelView */
var MVModel = new ModelView.Model('model', {data: "", updates1: 0}),
MVApp = new ModelView.View('view', MVModel).autobind(false).livebind('$(__KEY__)').bind(['change'], document.getElementById('mvapp'));
var MVclear = function(){ MVModel.set('data', "", true); };
var MVpush = function(){ MVModel.set('data', MVModel.$data.data+"OMGOMGOMG", true); };
MVModel.on('change', function(evt, data){
if ( 'data' == data.key )
MVModel.set('updates1', MVModel.$data.updates1+1, true);
});
MVApp.sync( );
</script>
<!-- Angular -->
<div style="width: 200px; height: 300px; overflow: hidden" ng-app>
Angular:
<span ng-controller="Ctrl" id="angList">
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
AngularTestArea Data: {{data}}
</span>
</div>
<!-- Knockout -->
<div style="width: 200px; height: 300px; overflow: hidden" id="koapp">
Knockout:
<span>
KnockoutTestArea Subscriber Updates: <span data-bind="text: data"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
</span>
</div>
<!-- ModelView -->
<div style="width: 200px; height: 300px; overflow: hidden" id="mvapp">
ModelView:
<span>
ModelViewTestArea Subscriber Updates: $(data)
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
</span>
</div>
Ready to run.
Test | Ops/sec | |
---|---|---|
Angular 10 |
| ready |
Knockout 10 |
| ready |
ModelView 10 |
| ready |
Angular 100 |
| ready |
Knockout 100 |
| ready |
ModelView 100 |
| ready |
Angular 1000 |
| ready |
Knockout 1000 |
| ready |
ModelView 1000 |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.