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
<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">
</script>
<script src="
http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js">
</script>
<script>
var Ctrl = function($scope) {
$scope.data = "";
$scope.numberofChanges1 = 0;
$scope.numberofChanges2 = 0;
$scope.numberofChanges3 = 0;
$scope.numberofChanges4 = 0;
$scope.numberofChanges5 = 0;
$scope.numberofChanges6 = 0;
$scope.numberofChanges7 = 0;
$scope.numberofChanges8 = 0;
$scope.numberofChanges9 = 0;
$scope.numberofChanges10 = 0;
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges1++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges2++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges3++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges4++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges5++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges6++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges7++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges8++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges9++;
});
$scope.$watch('data', function(a,b,c){
$scope.numberofChanges10++;
});
}
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();
};
}); </script>
<script>
var KOData = ko.observable("");
var KOUpdates1 = ko.observable(0);
var KOUpdates2 = ko.observable(0);
var KOUpdates3 = ko.observable(0);
var KOUpdates4 = ko.observable(0);
var KOUpdates5 = ko.observable(0);
var KOUpdates6 = ko.observable(0);
var KOUpdates7 = ko.observable(0);
var KOUpdates8 = ko.observable(0);
var KOUpdates9 = ko.observable(0);
var KOUpdates10 = ko.observable(0);
KOData.subscribe(function(){
KOUpdates1(KOUpdates1() + 1);
});
KOData.subscribe(function(){
KOUpdates2(KOUpdates2() + 1);
});
KOData.subscribe(function(){
KOUpdates3(KOUpdates3() + 1);
});
KOData.subscribe(function(){
KOUpdates4(KOUpdates4() + 1);
});
KOData.subscribe(function(){
KOUpdates5(KOUpdates5() + 1);
});
KOData.subscribe(function(){
KOUpdates6(KOUpdates6() + 1);
});
KOData.subscribe(function(){
KOUpdates7(KOUpdates7() + 1);
});
KOData.subscribe(function(){
KOUpdates8(KOUpdates8() + 1);
});
KOData.subscribe(function(){
KOUpdates9(KOUpdates9() + 1);
});
KOData.subscribe(function(){
KOUpdates10(KOUpdates10() + 1);
});
var KOviewmodel = {data: KOData, updates1: KOUpdates1, updates2: KOUpdates2, updates3: KOUpdates3, updates4: KOUpdates4, updates5: KOUpdates5, updates6: KOUpdates6, updates7: KOUpdates7, updates8: KOUpdates8, updates9: KOUpdates9, updates10: KOUpdates10};
ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
var KOclear = function (){
KOData("");
};
var KOpush = function (){
var old = KOData()
KOData(old += "OMGOMGOMG");
};
</script>
<!-- Angular -->
<div style="width: 200px; height: 300px; overflow: hidden" ng-app>
Angular:
<span ng-controller="Ctrl" id="angList">
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</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 data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
</span>
</div>
Ready to run.
Test | Ops/sec | |
---|---|---|
Angular 10 |
| ready |
Knockout 10 |
| ready |
Angular 100 |
| ready |
Knockout 100 |
| ready |
Angular 500 |
| ready |
Knockout 500 |
| ready |
Angular 1000 |
| ready |
Knockout 1000 |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.