Created
December 17, 2016 17:45
-
-
Save leeoniya/9a8b9bcbbba4ed2e5876a7de1f724862 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; | |
} | |
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 createNew(val, key, props, children) { | |
return new Shape(val, key, props, children); | |
} | |
function createLiteral(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 literalFactoryFuncs() { | |
var nodeTree = createLiteral(items[0], null, { className: 'test' }, | |
createLiteral(items[1], null, null, | |
createLiteral(items[2], null, null, | |
createLiteral(items[3], null, null, | |
createLiteral(items[4], null, null, | |
createLiteral(items[5], null, null, | |
createLiteral(items[6], null, null, | |
createLiteral(items[7], null, null, | |
createLiteral(items[8], null, null, [ | |
createLiteral(items[9], 1, null, null), | |
createLiteral(items[10], 2, null, null), | |
createLiteral(items[11], 3, null, null), | |
createLiteral(items[12], 4, null, null), | |
createLiteral(items[13], 5, null, null), | |
createLiteral(items[14], 6, null, null), | |
createLiteral(items[15], 7, null, null), | |
createLiteral(items[16], 8, null, null), | |
createLiteral(items[17], 9, null, null), | |
createLiteral(items[18], 10, null, null), | |
createLiteral(items[19], 11, null, null), | |
createLiteral(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = createLiteral(items[0], null, { className: 'foo' }, | |
createLiteral(items[1], null, null, | |
createLiteral(items[2], null, null, | |
createLiteral(items[3], null, null, | |
createLiteral(items[4], null, null, | |
createLiteral(items[5], null, null, | |
createLiteral(items[6], null, null, | |
createLiteral(items[7], null, null, | |
createLiteral(items[8], null, null, [ | |
createLiteral(items[9], 1, null, null), | |
createLiteral(items[10], 2, null, null), | |
createLiteral(items[11], 3, null, null), | |
createLiteral(items[12], 4, null, null), | |
createLiteral(items[13], 5, null, null), | |
createLiteral(items[14], 6, null, null), | |
createLiteral(items[15], 7, null, null), | |
createLiteral(items[16], 8, null, null), | |
createLiteral(items[17], 9, null, null), | |
createLiteral(items[18], 10, null, null), | |
createLiteral(items[19], 11, null, null), | |
createLiteral(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
} | |
function newFactoryFuncs() { | |
var nodeTree = createNew(items[0], null, { className: 'test' }, | |
createNew(items[1], null, null, | |
createNew(items[2], null, null, | |
createNew(items[3], null, null, | |
createNew(items[4], null, null, | |
createNew(items[5], null, null, | |
createNew(items[6], null, null, | |
createNew(items[7], null, null, | |
createNew(items[8], null, [ | |
createNew(items[9], 1, null, null), | |
createNew(items[10], 2, null, null), | |
createNew(items[11], 3, null, null), | |
createNew(items[12], 4, null, null), | |
createNew(items[13], 5, null, null), | |
createNew(items[14], 6, null, null), | |
createNew(items[15], 7, null, null), | |
createNew(items[16], 8, null, null), | |
createNew(items[17], 9, null, null), | |
createNew(items[18], 10, null, null), | |
createNew(items[19], 11, null, null), | |
createNew(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = createNew(items[0], null, { className: 'foo' }, | |
createNew(items[1], null, null, | |
createNew(items[2], null, null, | |
createNew(items[3], null, null, | |
createNew(items[4], null, null, | |
createNew(items[5], null, null, | |
createNew(items[6], null, null, | |
createNew(items[7], null, null, | |
createNew(items[8], null, [ | |
createNew(items[9], 1, null, null), | |
createNew(items[10], 2, null, null), | |
createNew(items[11], 3, null, null), | |
createNew(items[12], 4, null, null), | |
createNew(items[13], 5, null, null), | |
createNew(items[14], 6, null, null), | |
createNew(items[15], 7, null, null), | |
createNew(items[16], 8, null, null), | |
createNew(items[17], 9, null, null), | |
createNew(items[18], 10, null, null), | |
createNew(items[19], 11, null, null), | |
createNew(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
} | |
function newFactoryMethods() { | |
var nodeTree = createNew(items[0], null, { className: 'test' }, | |
createNew(items[1], null, null, | |
createNew(items[2], null, null, | |
createNew(items[3], null, null, | |
createNew(items[4], null, null, | |
createNew(items[5], null, null, | |
createNew(items[6], null, null, | |
createNew(items[7], null, null, | |
createNew(items[8], null, [ | |
createNew(items[9], 1, null, null), | |
createNew(items[10], 2, null, null), | |
createNew(items[11], 3, null, null), | |
createNew(items[12], 4, null, null), | |
createNew(items[13], 5, null, null), | |
createNew(items[14], 6, null, null), | |
createNew(items[15], 7, null, null), | |
createNew(items[16], 8, null, null), | |
createNew(items[17], 9, null, null), | |
createNew(items[18], 10, null, null), | |
createNew(items[19], 11, null, null), | |
createNew(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
var nodeTree2 = createNew(items[0], null, { className: 'foo' }, | |
createNew(items[1], null, null, | |
createNew(items[2], null, null, | |
createNew(items[3], null, null, | |
createNew(items[4], null, null, | |
createNew(items[5], null, null, | |
createNew(items[6], null, null, | |
createNew(items[7], null, null, | |
createNew(items[8], null, [ | |
createNew(items[9], 1, null, null), | |
createNew(items[10], 2, null, null), | |
createNew(items[11], 3, null, null), | |
createNew(items[12], 4, null, null), | |
createNew(items[13], 5, null, null), | |
createNew(items[14], 6, null, null), | |
createNew(items[15], 7, null, null), | |
createNew(items[16], 8, null, null), | |
createNew(items[17], 9, null, null), | |
createNew(items[18], 10, null, null), | |
createNew(items[19], 11, null, null), | |
createNew(items[20], 12, null, null) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
nodeTree.mount(); | |
nodeTree.unmount(); | |
nodeTree.patch(nodeTree2); | |
nodeTree.hydrate(); | |
} | |
function newLiteralMethods() { | |
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 newLiteralFuncs() { | |
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) | |
]) | |
) | |
) | |
) | |
) | |
) | |
) | |
) | |
); | |
mount(nodeTree); | |
unmount(nodeTree); | |
patch(nodeTree, nodeTree2); | |
hydrate(nodeTree); | |
} | |
var cycleResults = document.getElementById('cycleResults'), | |
result = document.getElementById('result'), | |
btn = document.getElementById('btn'), | |
tests = { | |
literalFactoryFuncs: literalFactoryFuncs, | |
newFactoryFuncs: newFactoryFuncs, | |
newLiteralFuncs: newLiteralFuncs, | |
newFactoryMethods: newFactoryMethods, | |
newLiteralMethods: newLiteralMethods, | |
} | |
// 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