Created
December 17, 2016 17:27
-
-
Save leeoniya/ac2b8d1bdb717ab782b0aeb0be4c365c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head></head> | |
<body> | |
<ul id='cycleResults'></ul> | |
<div id="result"></div> | |
<br> | |
<button id="btn">Run Tests</button> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.2/benchmark.min.js"></script> | |
<script> | |
var Types = { | |
NODE: 1, | |
EMPTY: 2 | |
}; | |
var isArray = Array.isArray; | |
function Shape(val, key, props, children) { | |
this.val = val; | |
this.children = children; | |
this.dom = null; | |
this.key = key; | |
this.ref = null; | |
this.props = props; | |
this.instance = null; | |
this.type = Types.NODE; | |
} | |
function Shape2(val, key, props, children) { | |
this.val = val; | |
this.children = children; | |
this.dom = null; | |
this.key = key; | |
this.ref = null; | |
this.props = props; | |
this.instance = null; | |
this.type = Types.NODE; | |
} | |
Shape.prototype.mount = function () { | |
this.val = this.val * 2; | |
this.dom = [1 ,2 ,3]; | |
var children = this.children; | |
if (children) { | |
if (isArray(children)) { | |
for (var i = 0; i < children.length; i++) { | |
children[i].mount(); | |
} | |
} else { | |
children.mount(); | |
} | |
} | |
}; | |
Shape.prototype.patch = function (o2) { | |
this.val = this.val / 2; | |
o2.val = o2.val / 2; | |
o2.dom = this.dom; | |
var children = this.children; | |
var children2 = o2.children; | |
if (children && children2) { | |
if (isArray(children) && isArray(children2)) { | |
for (var i = 0; i < children.length; i++) { | |
children[i].patch(children2[i]); | |
} | |
} else { | |
children.patch(children2); | |
} | |
} | |
}; | |
Shape.prototype.unmount = function () { | |
this.val * 2; | |
var children = this.children; | |
if (children) { | |
if (isArray(children)) { | |
for (var i = 0; i < children.length; i++) { | |
children[i].unmount(); | |
} | |
} else { | |
children.unmount(); | |
} | |
} | |
}; | |
Shape.prototype.hydrate = function () { | |
this.val / 2; | |
var children = this.children; | |
if (children) { | |
if (isArray(children)) { | |
for (var i = 0; i < children.length; i++) { | |
children[i].hydrate(); | |
} | |
} else { | |
children.hydrate(); | |
} | |
} | |
}; | |
function mount(o1) { | |
o1.val = o1.val * 2; | |
o1.dom = [1 ,2 ,3]; | |
var children = o1.children; | |
if (children) { | |
if (isArray(children)) { | |
for (var i = 0; i < children.length; i++) { | |
mount(children[i]); | |
} | |
} else { | |
mount(children); | |
} | |
} | |
} | |
function patch(o1, o2) { | |
o1.val = o1.val / 2; | |
o2.val = o2.val / 2; | |
o2.dom = o1.dom; | |
var children = o1.children; | |
var children2 = o2.children; | |
if (children && children2) { | |
if (isArray(children) && isArray(children2)) { | |
for (var i = 0; i < children.length; i++) { | |
patch(children[i], children2[i]); | |
} | |
} else { | |
patch(children, children2); | |
} | |
} | |
} | |
function unmount(o1) { | |
o1.val = o1.val * 2; | |
var children = o1.children; | |
if (children) { | |
if (isArray(children)) { | |
for (var i = 0; i < children.length; i++) { | |
unmount(children[i]); | |
} | |
} else { | |
unmount(children); | |
} | |
} | |
} | |
function hydrate(o1) { | |
o1.val = o1.val / 2; | |
var children = o1.children; | |
if (children) { | |
if (isArray(children)) { | |
for (var i = 0; i < children.length; i++) { | |
hydrate(children[i]); | |
} | |
} else { | |
hydrate(children); | |
} | |
} | |
} | |
function createShape(val, key, props, children) { | |
return new Shape(val, key, props, children); | |
} | |
function createShape3(val, key, props, children) { | |
return new Shape2(val, key, props, children); | |
} | |
function createShape2(val, key, props, children) { | |
return { | |
val: val, | |
children: children, | |
dom: null, | |
key: key, | |
ref: null, | |
props: props, | |
instance: null, | |
type: Types.NODE | |
}; | |
} | |
var items = []; | |
for (var i = 0; i < 100; i++) { | |
items.push(Math.round(Math.random() * 100)); | |
} | |
function addChildren(node, children) { | |
node.children = children; | |
return node; | |
} | |
function addProps(node, props) { | |
node.props = props; | |
return node; | |
} | |
function addKey(node, key) { | |
node.key = key; | |
return node; | |
} | |
function literalFactory() { | |
var nodeTree = createShape2(items[0], null, { className: 'test' }, | |
createShape2(items[1], null, null, | |
createShape2(items[2], null, null, | |
createShape2(items[3], null, null, | |
createShape2(items[4], null, null, | |
createShape2(items[5], null, null, | |
createShape2(items[6], null, null, | |
createShape2(items[7], null, null, | |
createShape2(items[8], null, null, [ | |
createShape2(items[9], 1, null, null), | |
createShape2(items[10], 2, null, null), | |
createShape2(items[11], 3, null, null), | |
createShape2(items[12], 4, null, null), | |
createShape2(items[13], 5, null, null), | |
createShape2(items[14], 6, null, null), | |
createShape2(items[15], 7, null, null), | |
createShape2(items[16], 8, null, null), | |
createShape2(items[17], 9, null, null), | |
createShape2(items[18], 10, null, null), | |
createShape2(items[19], 11, null, null), | |
createShape2(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = createShape2(items[0], null, { className: 'foo' }, | |
createShape2(items[1], null, null, | |
createShape2(items[2], null, null, | |
createShape2(items[3], null, null, | |
createShape2(items[4], null, null, | |
createShape2(items[5], null, null, | |
createShape2(items[6], null, null, | |
createShape2(items[7], null, null, | |
createShape2(items[8], null, null, [ | |
createShape2(items[9], 1, null, null), | |
createShape2(items[10], 2, null, null), | |
createShape2(items[11], 3, null, null), | |
createShape2(items[12], 4, null, null), | |
createShape2(items[13], 5, null, null), | |
createShape2(items[14], 6, null, null), | |
createShape2(items[15], 7, null, null), | |
createShape2(items[16], 8, null, null), | |
createShape2(items[17], 9, null, null), | |
createShape2(items[18], 10, null, null), | |
createShape2(items[19], 11, null, null), | |
createShape2(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
} | |
function newFactoryFuncs() { | |
var nodeTree = createShape(items[0], null, { className: 'test' }, | |
createShape(items[1], null, null, | |
createShape(items[2], null, null, | |
createShape(items[3], null, null, | |
createShape(items[4], null, null, | |
createShape(items[5], null, null, | |
createShape(items[6], null, null, | |
createShape(items[7], null, null, | |
createShape(items[8], null, [ | |
createShape(items[9], 1, null, null), | |
createShape(items[10], 2, null, null), | |
createShape(items[11], 3, null, null), | |
createShape(items[12], 4, null, null), | |
createShape(items[13], 5, null, null), | |
createShape(items[14], 6, null, null), | |
createShape(items[15], 7, null, null), | |
createShape(items[16], 8, null, null), | |
createShape(items[17], 9, null, null), | |
createShape(items[18], 10, null, null), | |
createShape(items[19], 11, null, null), | |
createShape(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = createShape(items[0], null, { className: 'foo' }, | |
createShape(items[1], null, null, | |
createShape(items[2], null, null, | |
createShape(items[3], null, null, | |
createShape(items[4], null, null, | |
createShape(items[5], null, null, | |
createShape(items[6], null, null, | |
createShape(items[7], null, null, | |
createShape(items[8], null, [ | |
createShape(items[9], 1, null, null), | |
createShape(items[10], 2, null, null), | |
createShape(items[11], 3, null, null), | |
createShape(items[12], 4, null, null), | |
createShape(items[13], 5, null, null), | |
createShape(items[14], 6, null, null), | |
createShape(items[15], 7, null, null), | |
createShape(items[16], 8, null, null), | |
createShape(items[17], 9, null, null), | |
createShape(items[18], 10, null, null), | |
createShape(items[19], 11, null, null), | |
createShape(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
/* | |
nodeTree.mount(); | |
nodeTree.unmount(); | |
nodeTree.patch(nodeTree2); | |
nodeTree.hydrate(); | |
*/ | |
} | |
function newFactoryFuncs2() { | |
var nodeTree = createShape3(items[0], null, { className: 'test' }, | |
createShape3(items[1], null, null, | |
createShape3(items[2], null, null, | |
createShape3(items[3], null, null, | |
createShape3(items[4], null, null, | |
createShape3(items[5], null, null, | |
createShape3(items[6], null, null, | |
createShape3(items[7], null, null, | |
createShape3(items[8], null, [ | |
createShape3(items[9], 1, null, null), | |
createShape3(items[10], 2, null, null), | |
createShape3(items[11], 3, null, null), | |
createShape3(items[12], 4, null, null), | |
createShape3(items[13], 5, null, null), | |
createShape3(items[14], 6, null, null), | |
createShape3(items[15], 7, null, null), | |
createShape3(items[16], 8, null, null), | |
createShape3(items[17], 9, null, null), | |
createShape3(items[18], 10, null, null), | |
createShape3(items[19], 11, null, null), | |
createShape3(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = createShape3(items[0], null, { className: 'foo' }, | |
createShape3(items[1], null, null, | |
createShape3(items[2], null, null, | |
createShape3(items[3], null, null, | |
createShape3(items[4], null, null, | |
createShape3(items[5], null, null, | |
createShape3(items[6], null, null, | |
createShape3(items[7], null, null, | |
createShape3(items[8], null, [ | |
createShape3(items[9], 1, null, null), | |
createShape3(items[10], 2, null, null), | |
createShape3(items[11], 3, null, null), | |
createShape3(items[12], 4, null, null), | |
createShape3(items[13], 5, null, null), | |
createShape3(items[14], 6, null, null), | |
createShape3(items[15], 7, null, null), | |
createShape3(items[16], 8, null, null), | |
createShape3(items[17], 9, null, null), | |
createShape3(items[18], 10, null, null), | |
createShape3(items[19], 11, null, null), | |
createShape3(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
} | |
function newMethods() { | |
var nodeTree = new Shape(items[0], null, { className: 'test' }, | |
new Shape(items[1], null, null, | |
new Shape(items[2], null, null, | |
new Shape(items[3], null, null, | |
new Shape(items[4], null, null, | |
new Shape(items[5], null, null, | |
new Shape(items[6], null, null, | |
new Shape(items[7], null, null, | |
new Shape(items[8], null, [ | |
new Shape(items[9], 1, null, null), | |
new Shape(items[10], 2, null, null), | |
new Shape(items[11], 3, null, null), | |
new Shape(items[12], 4, null, null), | |
new Shape(items[13], 5, null, null), | |
new Shape(items[14], 6, null, null), | |
new Shape(items[15], 7, null, null), | |
new Shape(items[16], 8, null, null), | |
new Shape(items[17], 9, null, null), | |
new Shape(items[18], 10, null, null), | |
new Shape(items[19], 11, null, null), | |
new Shape(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = new Shape(items[0], null, { className: 'foo' }, | |
new Shape(items[1], null, null, | |
new Shape(items[2], null, null, | |
new Shape(items[3], null, null, | |
new Shape(items[4], null, null, | |
new Shape(items[5], null, null, | |
new Shape(items[6], null, null, | |
new Shape(items[7], null, null, | |
new Shape(items[8], null, [ | |
new Shape(items[9], 1, null, null), | |
new Shape(items[10], 2, null, null), | |
new Shape(items[11], 3, null, null), | |
new Shape(items[12], 4, null, null), | |
new Shape(items[13], 5, null, null), | |
new Shape(items[14], 6, null, null), | |
new Shape(items[15], 7, null, null), | |
new Shape(items[16], 8, null, null), | |
new Shape(items[17], 9, null, null), | |
new Shape(items[18], 10, null, null), | |
new Shape(items[19], 11, null, null), | |
new Shape(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
nodeTree.mount(); | |
nodeTree.unmount(); | |
nodeTree.patch(nodeTree2); | |
nodeTree.hydrate(); | |
} | |
function newFunctions() { | |
var nodeTree = new Shape2(items[0], null, { className: 'test' }, | |
new Shape2(items[1], null, null, | |
new Shape2(items[2], null, null, | |
new Shape2(items[3], null, null, | |
new Shape2(items[4], null, null, | |
new Shape2(items[5], null, null, | |
new Shape2(items[6], null, null, | |
new Shape2(items[7], null, null, | |
new Shape2(items[8], null, [ | |
new Shape2(items[9], 1, null, null), | |
new Shape2(items[10], 2, null, null), | |
new Shape2(items[11], 3, null, null), | |
new Shape2(items[12], 4, null, null), | |
new Shape2(items[13], 5, null, null), | |
new Shape2(items[14], 6, null, null), | |
new Shape2(items[15], 7, null, null), | |
new Shape2(items[16], 8, null, null), | |
new Shape2(items[17], 9, null, null), | |
new Shape2(items[18], 10, null, null), | |
new Shape2(items[19], 11, null, null), | |
new Shape2(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = new Shape2(items[0], null, { className: 'foo' }, | |
new Shape2(items[1], null, null, | |
new Shape2(items[2], null, null, | |
new Shape2(items[3], null, null, | |
new Shape2(items[4], null, null, | |
new Shape2(items[5], null, null, | |
new Shape2(items[6], null, null, | |
new Shape2(items[7], null, null, | |
new Shape2(items[8], null, [ | |
new Shape2(items[9], 1, null, null), | |
new Shape2(items[10], 2, null, null), | |
new Shape2(items[11], 3, null, null), | |
new Shape2(items[12], 4, null, null), | |
new Shape2(items[13], 5, null, null), | |
new Shape2(items[14], 6, null, null), | |
new Shape2(items[15], 7, null, null), | |
new Shape2(items[16], 8, null, null), | |
new Shape2(items[17], 9, null, null), | |
new Shape2(items[18], 10, null, null), | |
new Shape2(items[19], 11, null, null), | |
new Shape2(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
} | |
var cycleResults = document.getElementById('cycleResults'), | |
result = document.getElementById('result'), | |
btn = document.getElementById('btn'), | |
tests = { | |
newFactoryFuncs: newFactoryFuncs, | |
newFactoryFuncs2: newFactoryFuncs2, | |
literalFactory: literalFactory, | |
newFunctions: newFunctions, | |
newMethods: newMethods, | |
} | |
// BENCHMARK ==================== | |
btn.onclick = function runTests() { | |
btn.setAttribute('disable', true); | |
cycleResults.innerHTML = ''; | |
result.textContent = 'Tests running...'; | |
var suite = new Benchmark.Suite; | |
for (var test in tests) { | |
if (tests.hasOwnProperty(test)) { | |
suite.add(test, tests[test]) | |
} | |
} | |
// add tests | |
suite.on('cycle', function(event) { | |
var result = document.createElement('li'); | |
result.textContent = String(event.target); | |
document.getElementById('cycleResults') | |
.appendChild(result); | |
}) | |
.on('complete', function() { | |
result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name'); | |
btn.setAttribute('disable', false); | |
}) | |
// run async | |
.run({ | |
'async': true | |
}); | |
}; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment