feat(benchmark): added an implementation of the tree benchmark in React

This commit is contained in:
vsavkin 2015-04-29 18:11:56 -07:00
parent 9e8d31d532
commit e4342743c0
10 changed files with 2364 additions and 1130 deletions

View File

@ -10,6 +10,7 @@ import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {isPresent} from 'angular2/src/facade/lang';
import {List} from 'angular2/src/facade/collection';
import {window, document, gc} from 'angular2/src/facade/browser';
import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
import {If} from 'angular2/directives';

View File

@ -0,0 +1,31 @@
var perfUtil = require('angular2/src/test_lib/perf_util');
describe('react tree benchmark', function () {
var URL = 'benchmarks_external/src/tree/react/index.html';
afterEach(perfUtil.verifyNoBrowserErrors);
it('should log the stats (create)', function(done) {
perfUtil.runClickBenchmark({
url: URL,
buttons: ['#destroyDom', '#createDom'],
id: 'react.tree.create',
params: [{
name: 'depth', value: 9, scale: 'log2'
}]
}).then(done, done.fail);
});
it('should log the stats (update)', function(done) {
perfUtil.runClickBenchmark({
url: URL,
buttons: ['#createDom'],
id: 'react.tree.update',
params: [{
name: 'depth', value: 9, scale: 'log2'
}]
}).then(done, done.fail);
});
});

View File

@ -11,6 +11,9 @@
<li>
<a href="tree/polymer/index.html">Polymer Tree benchmark</a>
</li>
<li>
<a href="tree/react/index.html">React Tree benchmark</a>
</li>
<li>
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
</li>
@ -18,5 +21,6 @@
<a href="naive_infinite_scroll/index.html">Naive infinite scroll benchmark</a>
</li>
</ul>
</body>
</html>

View File

@ -0,0 +1,84 @@
// tree benchmark in React
import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
import React from './react.min';
var TreeComponent = React.createClass({
displayName: 'TreeComponent',
render: function() {
var treeNode = this.props.treeNode;
var left = null;
if (treeNode.left) {
left = React.createElement(
"span",
{},
[React.createElement(TreeComponent, {treeNode: treeNode.left}, "")]
)
}
var right = null;
if (treeNode.right) {
right = React.createElement(
"span",
{},
[React.createElement(TreeComponent, {treeNode: treeNode.right}, "")]
)
}
var span = React.createElement("span", {}, [
" " + treeNode.value,
left,
right
]);
return (
React.createElement("tree", {}, [span])
);
}
});
export function main() {
var count = 0;
var maxDepth = getIntParameter('depth');
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
var empty = new TreeNode(0, null, null);
var rootComponent = React.render(
React.createElement(TreeComponent, {treeNode: empty}, ""),
document.getElementById('rootTree')
);
function destroyDom() {
rootComponent.setProps({treeNode: empty});
}
function createDom() {
var values = count++ % 2 == 0 ?
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
rootComponent.setProps({treeNode: buildTree(maxDepth, values, 0)});
}
}
class TreeNode {
value:string;
left:TreeNode;
right:TreeNode;
constructor(value, left, right) {
this.value = value;
this.left = left;
this.right = right;
}
}
function buildTree(maxDepth, values, curDepth) {
if (maxDepth === curDepth) return new TreeNode('', null, null);
return new TreeNode(
values[curDepth],
buildTree(maxDepth, values, curDepth + 1),
buildTree(maxDepth, values, curDepth + 1));
}

View File

@ -0,0 +1,23 @@
<!doctype html>
<html>
<head>
</head>
<body>
<h2>Params</h2>
<form>
Depth:
<input type="number" name="depth" placeholder="depth" value="9">
<br>
<button>Apply</button>
</form>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
<h2>React Tree Benchmark</h2>
<root-tree id="rootTree"></root-tree>
$SCRIPTS$
</body>
</html>

View File

@ -2652,7 +2652,12 @@
"version": "0.0.1",
"dependencies": {
"tap-results": {
"version": "0.0.2"
"version": "0.0.2",
"dependencies": {
"inherits": {
"version": "1.0.0"
}
}
}
}
}
@ -3906,7 +3911,7 @@
}
},
"clang-format": {
"version": "1.0.10"
"version": "1.0.9"
}
}
},
@ -8274,6 +8279,46 @@
"q": {
"version": "1.3.0"
},
"qq": {
"version": "0.3.5",
"dependencies": {
"q": {
"version": "0.8.4"
}
}
},
"react": {
"version": "0.13.2",
"dependencies": {
"envify": {
"version": "3.4.0",
"dependencies": {
"through": {
"version": "2.3.7"
},
"jstransform": {
"version": "10.1.0",
"dependencies": {
"base62": {
"version": "0.1.1"
},
"esprima-fb": {
"version": "13001.1001.0-dev-harmony-fb"
},
"source-map": {
"version": "0.1.31",
"dependencies": {
"amdefine": {
"version": "0.1.0"
}
}
}
}
}
}
}
}
},
"reflect-metadata": {
"version": "0.1.0"
},
@ -8694,117 +8739,401 @@
}
}
}
},
"tsd": {
"version": "0.5.7",
"dependencies": {
"q": {
"version": "0.9.7"
},
"q-io": {
"version": "1.9.4",
"dependencies": {
"qs": {
"version": "0.1.0"
},
"url2": {
"version": "0.0.0"
},
"mime": {
"version": "1.2.11"
},
"mimeparse": {
"version": "0.1.4"
},
"collections": {
"version": "0.1.24",
"dependencies": {
"weak-map": {
"version": "1.0.0"
}
}
}
}
},
"open": {
"version": "0.0.5"
},
"exit": {
"version": "0.1.2"
},
"mkdirp": {
"version": "0.3.5"
},
"semver": {
"version": "2.2.1"
},
"tv4": {
"version": "1.0.18"
},
"tv4-reporter": {
"version": "0.0.4",
"dependencies": {
"jsonpointer.js": {
"version": "0.3.0"
}
}
},
"uri-templates": {
"version": "0.1.2"
},
"minimist": {
"version": "0.0.7"
},
"assertion-error": {
"version": "1.0.0"
},
"jsesc": {
"version": "0.4.3"
},
"js-yaml": {
"version": "3.0.2",
"dependencies": {
"argparse": {
"version": "0.1.16",
"dependencies": {
"underscore": {
"version": "1.7.0"
},
"underscore.string": {
"version": "2.4.0"
}
}
},
"esprima": {
"version": "1.0.4"
}
}
},
"json-pointer": {
"version": "0.1.0",
"dependencies": {
"foreach": {
"version": "2.0.5"
}
}
},
"ministyle": {
"version": "0.1.4"
},
"miniwrite": {
"version": "0.1.4"
},
"minitable": {
"version": "0.0.3",
"dependencies": {
"minichain": {
"version": "0.0.1"
}
}
},
"es6-shim": {
"version": "0.9.1"
},
"request": {
"version": "2.33.0",
"dependencies": {
"qs": {
"version": "0.6.6"
},
"json-stringify-safe": {
"version": "5.0.0"
},
"forever-agent": {
"version": "0.5.2"
},
"node-uuid": {
"version": "1.4.3"
},
"mime": {
"version": "1.2.11"
},
"tough-cookie": {
"version": "1.1.0"
},
"form-data": {
"version": "0.1.4",
"dependencies": {
"combined-stream": {
"version": "0.0.7",
"dependencies": {
"delayed-stream": {
"version": "0.0.5"
}
}
},
"async": {
"version": "0.9.0"
}
}
},
"tunnel-agent": {
"version": "0.3.0"
},
"http-signature": {
"version": "0.10.1",
"dependencies": {
"assert-plus": {
"version": "0.1.5"
},
"asn1": {
"version": "0.1.11"
},
"ctype": {
"version": "0.5.3"
}
}
},
"oauth-sign": {
"version": "0.3.0"
},
"hawk": {
"version": "1.0.0",
"dependencies": {
"hoek": {
"version": "0.9.1"
},
"boom": {
"version": "0.4.2"
},
"cryptiles": {
"version": "0.2.2"
},
"sntp": {
"version": "0.2.4"
}
}
},
"aws-sign2": {
"version": "0.5.0"
}
}
},
"event-stream": {
"version": "3.1.7",
"dependencies": {
"through": {
"version": "2.3.7"
},
"duplexer": {
"version": "0.1.1"
},
"from": {
"version": "0.1.3"
},
"map-stream": {
"version": "0.1.0"
},
"pause-stream": {
"version": "0.0.11"
},
"split": {
"version": "0.2.10"
},
"stream-combiner": {
"version": "0.0.4"
}
}
},
"bufferstream": {
"version": "0.6.2",
"dependencies": {
"bufferjs": {
"version": "2.0.0"
},
"buffertools": {
"version": "2.1.2"
}
}
},
"update-notifier": {
"version": "0.1.7",
"resolved": "git://github.com/Bartvds/update-notifier/#0706121db6a6b6c47faeec87b18090cc9a10b6a7",
"dependencies": {
"request": {
"version": "2.27.0",
"dependencies": {
"qs": {
"version": "0.6.6"
},
"json-stringify-safe": {
"version": "5.0.0"
},
"forever-agent": {
"version": "0.5.2"
},
"tunnel-agent": {
"version": "0.3.0"
},
"http-signature": {
"version": "0.10.1",
"dependencies": {
"assert-plus": {
"version": "0.1.5"
},
"asn1": {
"version": "0.1.11"
},
"ctype": {
"version": "0.5.3"
}
}
},
"hawk": {
"version": "1.0.0",
"dependencies": {
"hoek": {
"version": "0.9.1"
},
"boom": {
"version": "0.4.2"
},
"cryptiles": {
"version": "0.2.2"
},
"sntp": {
"version": "0.2.4"
}
}
},
"aws-sign": {
"version": "0.3.0"
},
"oauth-sign": {
"version": "0.3.0"
},
"cookie-jar": {
"version": "0.3.0"
},
"node-uuid": {
"version": "1.4.3"
},
"mime": {
"version": "1.2.11"
},
"form-data": {
"version": "0.1.4",
"dependencies": {
"combined-stream": {
"version": "0.0.7",
"dependencies": {
"delayed-stream": {
"version": "0.0.5"
}
}
},
"async": {
"version": "0.9.0"
}
}
}
}
},
"configstore": {
"version": "0.1.7",
"dependencies": {
"lodash": {
"version": "2.4.2"
},
"js-yaml": {
"version": "2.1.3",
"dependencies": {
"argparse": {
"version": "0.1.16",
"dependencies": {
"underscore": {
"version": "1.7.0"
},
"underscore.string": {
"version": "2.4.0"
}
}
},
"esprima": {
"version": "1.0.4"
}
}
},
"osenv": {
"version": "0.0.3"
},
"graceful-fs": {
"version": "2.0.3"
}
}
},
"semver": {
"version": "2.1.0"
},
"chalk": {
"version": "0.4.0",
"dependencies": {
"has-color": {
"version": "0.1.7"
},
"ansi-styles": {
"version": "1.0.0"
},
"strip-ansi": {
"version": "0.1.1"
}
}
}
}
},
"universal-analytics": {
"version": "0.3.6",
"dependencies": {
"underscore": {
"version": "1.8.3"
},
"node-uuid": {
"version": "1.4.3"
},
"async": {
"version": "0.2.10"
}
}
},
"uuid": {
"version": "1.4.2"
},
"weak-map": {
"version": "1.0.5"
},
"detect-indent": {
"version": "0.1.4"
},
"minichain": {
"version": "0.0.1"
}
}
}
}
},
"tsd": {
"version": "0.5.7",
"dependencies": {
"assertion-error": {
"version": "1.0.0"
},
"bufferstream": {
"version": "0.6.2",
"dependencies": {
"bufferjs": {
"version": "2.0.0"
},
"buffertools": {
"version": "2.1.2"
}
}
},
"detect-indent": {
"version": "0.1.4"
},
"es6-shim": {
"version": "0.9.1"
},
"event-stream": {
"version": "3.1.7",
"dependencies": {
"through": {
"version": "2.3.7"
},
"duplexer": {
"version": "0.1.1"
},
"from": {
"version": "0.1.3"
},
"map-stream": {
"version": "0.1.0"
},
"pause-stream": {
"version": "0.0.11"
},
"split": {
"version": "0.2.10"
},
"stream-combiner": {
"version": "0.0.4"
}
}
},
"exit": {
"version": "0.1.2"
},
"js-yaml": {
"version": "3.0.2",
"dependencies": {
"argparse": {
"version": "0.1.16",
"dependencies": {
"underscore": {
"version": "1.7.0"
},
"underscore.string": {
"version": "2.4.0"
}
}
},
"esprima": {
"version": "1.0.4"
}
}
},
"jsesc": {
"version": "0.4.3"
},
"json-pointer": {
"version": "0.1.0",
"dependencies": {
"foreach": {
"version": "2.0.5"
}
}
},
"minichain": {
"version": "0.0.1"
},
"minimist": {
"version": "0.0.7"
},
"ministyle": {
"version": "0.1.4"
},
"minitable": {
"version": "0.0.3",
"dependencies": {
"minichain": {
"version": "0.0.1"
}
}
},
"miniwrite": {
"version": "0.1.4"
},
"mkdirp": {
"version": "0.3.5"
},
"open": {
"version": "0.0.5"
},
"q": {
"version": "0.9.7"
},
@ -8833,6 +9162,80 @@
}
}
},
"open": {
"version": "0.0.5"
},
"exit": {
"version": "0.1.2"
},
"mkdirp": {
"version": "0.3.5"
},
"semver": {
"version": "2.2.1"
},
"tv4": {
"version": "1.0.18"
},
"tv4-reporter": {
"version": "0.0.4",
"dependencies": {
"jsonpointer.js": {
"version": "0.3.0"
}
}
},
"uri-templates": {
"version": "0.1.2"
},
"minimist": {
"version": "0.0.7"
},
"assertion-error": {
"version": "1.0.0"
},
"jsesc": {
"version": "0.4.3"
},
"js-yaml": {
"version": "3.0.2",
"dependencies": {
"argparse": {
"version": "0.1.16",
"dependencies": {
"underscore": {
"version": "1.7.0"
},
"underscore.string": {
"version": "2.4.0"
}
}
},
"esprima": {
"version": "1.0.4"
}
}
},
"json-pointer": {
"version": "0.1.0",
"dependencies": {
"foreach": {
"version": "2.0.5"
}
}
},
"ministyle": {
"version": "0.1.4"
},
"miniwrite": {
"version": "0.1.4"
},
"minitable": {
"version": "0.0.3"
},
"es6-shim": {
"version": "0.9.1"
},
"request": {
"version": "2.33.0",
"dependencies": {
@ -8914,28 +9317,40 @@
}
}
},
"semver": {
"version": "2.2.1"
},
"tv4": {
"version": "1.0.18"
},
"tv4-reporter": {
"version": "0.0.4",
"event-stream": {
"version": "3.1.7",
"dependencies": {
"jsonpointer.js": {
"version": "0.3.0"
"through": {
"version": "2.3.7"
},
"duplexer": {
"version": "0.1.1"
},
"from": {
"version": "0.1.3"
},
"map-stream": {
"version": "0.1.0"
},
"pause-stream": {
"version": "0.0.11"
},
"split": {
"version": "0.2.10"
},
"stream-combiner": {
"version": "0.0.4"
}
}
},
"universal-analytics": {
"version": "0.3.6",
"bufferstream": {
"version": "0.6.2",
"dependencies": {
"underscore": {
"version": "1.8.3"
"bufferjs": {
"version": "2.0.0"
},
"async": {
"version": "0.2.10"
"buffertools": {
"version": "2.1.2"
}
}
},
@ -8998,9 +9413,6 @@
"cookie-jar": {
"version": "0.3.0"
},
"node-uuid": {
"version": "1.4.3"
},
"mime": {
"version": "1.2.11"
},
@ -9025,9 +9437,6 @@
"configstore": {
"version": "0.1.7",
"dependencies": {
"lodash": {
"version": "2.4.2"
},
"js-yaml": {
"version": "2.1.3",
"dependencies": {
@ -9074,20 +9483,34 @@
}
}
},
"uri-templates": {
"version": "0.1.2"
"universal-analytics": {
"version": "0.3.6",
"dependencies": {
"underscore": {
"version": "1.8.3"
},
"async": {
"version": "0.2.10"
}
}
},
"uuid": {
"version": "1.4.2"
},
"weak-map": {
"version": "1.0.5"
},
"detect-indent": {
"version": "0.1.4"
},
"minichain": {
"version": "0.0.1"
}
}
},
"typescript": {
"version": "1.5.0",
"resolved": "git://github.com/mhegazy/TypeScript.git#v1.5-beta"
"resolved": "git://github.com/mhegazy/TypeScript#deafa1186e7ff1c6b4542b3cdc7dd7ae83de700c"
},
"vinyl": {
"version": "0.4.6",

2654
npm-shrinkwrap.json generated

File diff suppressed because it is too large Load Diff

View File

@ -97,6 +97,7 @@
"protractor": "2.0.0",
"q": "^1.0.1",
"qq": "^0.3.5",
"react": "^0.13.2",
"run-sequence": "^0.3.6",
"sorted-object": "^1.0.0",
"source-map": "^0.3.0",

View File

@ -7,7 +7,8 @@ config.exclude.push(
'dist/js/cjs/examples/e2e_test/sourcemap/sourcemap_spec.js',
// TODO: remove this line when largetable dart has been added
'dist/js/cjs/benchmarks_external/e2e_test/largetable_perf.js',
'dist/js/cjs/benchmarks_external/e2e_test/polymer_tree_perf.js'
'dist/js/cjs/benchmarks_external/e2e_test/polymer_tree_perf.js',
'dist/js/cjs/benchmarks_external/e2e_test/react_tree_perf.js'
);
data.createBenchpressRunner({ lang: 'dart' });

View File

@ -112,7 +112,11 @@ module.exports = function makeBrowserTree(options, destinationPath) {
]
});
var polymer = stew.mv(flatten(polymerFiles), 'benchmarks_external/src/tree/polymer');
htmlTree = mergeTrees([htmlTree, scripts, polymer, css]);
var reactFiles = new Funnel('.', {files: ['node_modules/react/dist/react.min.js']});
var react = stew.mv(flatten(reactFiles), 'benchmarks_external/src/tree/react');
htmlTree = mergeTrees([htmlTree, scripts, polymer, css, react]);
es5Tree = mergeTrees([es5Tree, htmlTree]);