jQuery vs Angular vs Knockout vs AngularLight vs Riot.js
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://angularlight.org/bin/alight.last.min.js"></script>
<script src="//cdn.jsdelivr.net/g/riot(riot.min.js+compiler.min.js)"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//jsblocks.com/jsblocks/blocks.js"></script>
<div id="menu">
<div data-bind="visible: !processing()">
<span>Row count:</span>
<input type="text" data-bind="value: rowCount" />
<button data-bind="click: jqBench">Start jquery bench</button>
<button data-bind="click: ngBench">Start angular bench</button>
<button data-bind="click: koBench">Start knockout bench</button>
<button data-bind="click: alBench">Start aLight bench</button>
<button data-bind="click: alBench2">Start aLight bench (inline)</button>
<button data-bind="click: rtBench">Start riot.js bench</button>
<button data-bind="click: blBench">Start jsBlocks bench</button>
</div>
<table class="results" border="1">
<tr>
<th></th>
<th>filling</th>
<th>updating</th>
</tr>
<tr>
<th>jquery</th>
<td><span data-bind="text: results.jqFill"></span> ms</td>
<td><span data-bind="text: results.jqUpdate"></span> ms</td>
</tr>
<tr>
<th>angular</th>
<td><span data-bind="text: results.ngFill"></span> ms</td>
<td><span data-bind="text: results.ngUpdate"></span> ms</td>
</tr>
<tr>
<th>knockout</th>
<td><span data-bind="text: results.koFill"></span> ms</td>
<td><span data-bind="text: results.koUpdate"></span> ms</td>
</tr>
<tr>
<th>aLight</th>
<td><span data-bind="text: results.alFill"></span> ms</td>
<td><span data-bind="text: results.alUpdate"></span> ms</td>
...
JavaScript
'use strict';
function jqFill(n) {
var i, li,
ul = $("#jq-list");
for (i = 0; i < n; i += 1) {
li = '<li>jq: <span data-id="' + i + '">' + i + '</span></li>';
ul.append(li);
}
}
function jqUpdate(n) {
var i, el,
ul = $("#jq-list");
for (i = 0; i < n; i += 1) {
el = ul.find('span[data-id="' + i + '"]');
el.html(el.html() + ' ' + i);
}
}
function KoApp() {
var self = this;
self.items = ko.observableArray([]);
self.fill = function (n, callback) {
var i,
items = self.items();
for (i = 0; i < n; i += 1) {
items.push({
val: ko.observable(i)
});
}
self.items.valueHasMutated();
setTimeout(function () {
callback();
}, 0);
};
self.update = function (n, callback) {
var i;
ko.utils.arrayForEach(self.items(), function (item) {
item.val(item.val() + ' ' + item.val());
});
setTimeout(function () {
callback();
}, 0);
};
self.clear = function (callback) {
self.items([]);
setTimeout(function () {
callback();
}, 0);
};
}
var koApp = new KoApp();
var ngApp = angular.module('list', []);
ngApp.controller('ListCtrl', ['$scope', function ($scope) {
$scope.items = [];
$scope.fill = function (n) {
var i;
for (i = 0; i < n; i += 1) {
$scope.items.push({ t:i });
}
};
$scope.update = function (n) {
var i,
items = $scope.items;
for (i = 0; i < n; i += 1) {
items[i].t += ' ' + items[i].t;
}
};
}]);
ngApp.fill = function (n, callback) {
var scope = angular.element($('#ng-list')).scope();
scope.$apply(function () {
scope.fill(n);
});
setTimeout(function () {
callback();
}, 0);
};
ngApp.update = function (n, callback) {
var scope =...