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
<div id="main"></div>
<script id="templateDummy" type="text/html"></script>
<script id="templateInline" type="text/html">
<table data-bind="template: { foreach: rows }">
<tr data-bind="template: { foreach: cells }">
<td data-bind="text: 'Cell ' + id()"></td>
</tr>
</table>
</script>
<script id="templateMemory" type="text/html">
<table data-bind="template: { foreach: rows, id: 'templateRow' }">
<tr data-bind="template: { foreach: cells, id: 'templateCell' }">
<td data-bind="text: 'Cell ' + id()"></td>
</tr>
</table>
</script>
<script id="templateNamed" type="text/html">
<table data-bind="template: { foreach: rows, name: 'templateRow' }"></table>
</script>
<script id="templateRow" type="text/html">
<tr data-bind="template: { foreach: cells, name: 'templateCell' }"></tr>
</script>
<script id="templateCell" type="text/html">
<td data-bind="text: 'Cell ' + id()"></td>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js">
</script>
<script>
//define a template source that simply treats the template name as its content
ko.templateSources.stringTemplate = function(template, templates) {
this.templateName = template;
this.templates = templates;
}
ko.utils.extend(ko.templateSources.stringTemplate.prototype, {
data: function(key, value) {
console.log("data", key, value, this.templateName);
this.templates._data = this.templates._data || {};
this.templates._data[this.templateName] = this.templates._data[this.templateName] || {};
if (arguments.length === 1) {
return this.templates._data[this.templateName][key];
}
this.templates._data[this.templateName][key] = value;
},
text: function(value) {
console.log("text", value, this.templateName)
if (arguments.length === 0) {
return this.templates[this.templateName];
}
this.templates[this.templateName] = value;
}
});
//modify an existing templateEngine to work with string templates
function createStringTemplateEngine(templateEngine, templates) {
templateEngine.makeTemplateSource = function(template) {
return new ko.templateSources.stringTemplate(template, templates);
}
return templateEngine;
}
function Cell(id) {
this.id = ko.observable(id);
}
function Row(id) {
this.id = ko.observable(id);
this.cells = ko.observableArray();
}
var viewModel = {
rows: ko.observableArray()
};
for (var i = 0; i < 5; i++) {
var row = new Row(i);
for (var j = 0; j < 5; j++) {
row.cells.push(new Cell(i + " - " + j));
}
viewModel.rows.push(row);
}
var main = $("#main");
</script>
setTimeout(function() {
ui.benchmarks[0].setup = function(){
main.attr('data-bind', 'template: "templateNamed"');
};
ui.benchmarks[1].setup = function(){
main.attr('data-bind', 'template: "templateInline"');
};
ui.benchmarks[2].setup = function(){
ko.setTemplateEngine(createStringTemplateEngine(new ko.nativeTemplateEngine(), {
'templateNamedMemory': '<table data-bind="template: { foreach: rows, name: \'templateRowMemory\' }"></table>',
'templateRowMemory': '<tr data-bind="template: { foreach: cells, name: \'templateCellMemory\' }"></tr>',
'templateCellMemory': '<td data-bind="text: \'Cell \' + id()"></td>'
}));
main.attr('data-bind', 'template: "templateNamedMemory"');
};
}, 1);
Ready to run.
Test | Ops/sec | |
---|---|---|
templateNamed |
| ready |
templateInline |
| ready |
stringtemplate |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.