Created
December 17, 2016 17:51
-
-
Save leeoniya/5ab8fed9cc929d97eb291a3b02c27f18 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 factFuncs() { | |
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 newFactFuncs() { | |
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 newFactMethods() { | |
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 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 newFuncs() { | |
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 = { | |
newFactMethods: newFactoryMethods, | |
newFactFuncs: newFactoryFuncs, | |
factFuncs: literalFactoryFuncs, | |
newMethods: newLiteralMethods, | |
newFuncs: newLiteralFuncs, | |
} | |
// 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