JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="bench();">Benchmark</button>
<input id="status" readonly />
<ul>
<li><label for="repeats">Repeat factor:</label><input id="repeats" value="100" /></li>
<li><label for="runs">Runs:</label><input id="runs" readonly /></li>
</ul>
<table>
<thead>
<tr><th>Name</th><th>Single (ms)</th><th>Mean (ms)</th></tr>
</thead>
<tbody>
<tr>
<td>old</td>
<td><span id="old_time"> </span></td>
<td><span id="old_mean"> </span></td>
</tr>
<tr>
<td>recursive</td>
<td><span id="recur_time"> </span></td>
<td><span id="recur_mean"> </span></td>
</tr>
<tr>
<td>iterative</td>
<td><span id="iter_time"> </span></td>
<td><span id="iter_mean"> </span></td>
</tr>
</tbody>
</table>
CSS
thead tr {
border: 1px solid black;
}
th, td {
padding: 0.25em;
}
tr:nth-child(even) {
background-color: #DDD;
}
input[readonly] {
border: none;
background: transparent;
width: 4em;
}
JavaScript
function makeDeepObject() {
var root = {};
var current = root;
for (var i = 33, max = 136; i < max; i++) {
var key = String.fromCharCode(i);
var newObject = {};
for (var j = 0; j < 25; j++) {
newObject['a' + j] = {x: 1};
}
current[key] = newObject;
for (; j < 50; j++) {
newObject['z' + j] = {y: 2};
}
current = newObject;
}
return root;
}
window.test = makeDeepObject();
function clone_recursive(object) {
var result = {};
for (var key in object) {
var value = object[key];
if (typeof value === 'object') {
result[key] = clone_recursive(value);
} else {
result[key] = value;
}
}
return result;
}
function clone_iterative(object) {
var result = {};
var stack = [result, object];
var curr, base;
while (curr = stack.pop()) {
var base = stack.pop();
for (var key in curr) {
var value = curr[key];
if (typeof value === 'object') {
stack.push(base[key] = {});
stack.push(value)
} else {
base[key] = value;
}
}
}
return result;
}
function clone_old(object) {
var result = {};
var queue = [{base: result, value: object}];
var item;
while (item = queue.shift()) {
var current = item.value;
var base = item.base;
for (var key in current) {
var value = current[key];
if (typeof value === 'object') {
var resultValue = base[key] = {};
queue.push({base: resultValue, value: value});
} else {
base[key] = value;
}
}
}
return result;
}
function testrun(n) {
var results = {};
var start;
var temp;
if (! n) {
n = 100;
}
...