honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(benchmarks): add incremental-dom version of deep tree benchmark

This commit is contained in:
Tobias Bosch 2016-09-01 10:31:31 -07:00 committed by Martin Probst
parent 27d72e87c3
commit 2581c0851a
11 changed files with 107 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build.sh
View File

@ -45,6 +45,7 @@ ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
ln -s ../../../../node_modules/rxjs . ln -s ../../../../node_modules/rxjs .
ln -s ../../../../node_modules/angular/angular.js . ln -s ../../../../node_modules/angular/angular.js .
ln -s ../../../../bower_components/polymer . ln -s ../../../../bower_components/polymer .
ln -s ../../../../node_modules/incremental-dom/dist/incremental-dom-cjs.js
cd - cd -
TSCONFIG=./modules/tsconfig.json TSCONFIG=./modules/tsconfig.json

9
modules/benchmarks/e2e_test/tree_perf.ts
View File

@ -41,6 +41,15 @@ describe('tree benchmark perf', () => {
ignoreBrowserSynchronization: true, ignoreBrowserSynchronization: true,
}).then(done, done.fail); }).then(done, done.fail);
}); });
it('should run for the incremental dom', (done) => {
runTreeBenchmark({
id: 'deepTree.incrementalDom',
url: 'all/benchmarks/src/tree/incremental_dom/index.html',
ignoreBrowserSynchronization: true,
}).then(done, done.fail);
});
it('should run for polymer binary tree', (done) => { it('should run for polymer binary tree', (done) => {
runTreeBenchmark({ runTreeBenchmark({
id: 'deepTree.polymer', id: 'deepTree.polymer',

8
modules/benchmarks/e2e_test/tree_spec.ts
View File

@ -37,6 +37,14 @@ describe('tree benchmark spec', () => {
ignoreBrowserSynchronization: true, ignoreBrowserSynchronization: true,
}); });
}); });
it('should work for the incremental dom', () => {
testTreeBenchmark({
url: 'all/benchmarks/src/tree/incremental_dom/index.html',
ignoreBrowserSynchronization: true,
});
});
it('should work for polymer binary tree', () => { it('should work for polymer binary tree', () => {
testTreeBenchmark({ testTreeBenchmark({
url: 'all/benchmarks/src/tree/polymer/index.html', url: 'all/benchmarks/src/tree/polymer/index.html',

5
modules/benchmarks/src/bootstrap_polymer.ts → modules/benchmarks/src/bootstrap_plain.ts
View File

@ -14,7 +14,10 @@
(<any>global).benchmarksBootstrap = benchmarksBootstrap; (<any>global).benchmarksBootstrap = benchmarksBootstrap;
function benchmarksBootstrap() { function benchmarksBootstrap() {
System.config({defaultJSExtensions: true}); System.config({
defaultJSExtensions: true,
map: {'incremental-dom': '/all/benchmarks/vendor/incremental-dom-cjs.js'}
});
// BOOTSTRAP the app! // BOOTSTRAP the app!
System.import('index').then(function(m: any) { m.main(); }, console.error.bind(console)); System.import('index').then(function(m: any) { m.main(); }, console.error.bind(console));

4
modules/benchmarks/src/tree/baseline/index.ts
View File

@ -18,8 +18,8 @@ export function main() {
bindAction('#destroyDom', destroyDom); bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom); bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'baseline-update')); bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'baseline-create')); bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
} }
init(); init();

27
modules/benchmarks/src/tree/incremental_dom/index.html Normal file
View File

@ -0,0 +1,27 @@
<!doctype html>
<html>
<body>
<h2>Params</h2>
<form>
Depth:
<input type="number" name="depth" placeholder="depth" value="9">
<br>
<button>Apply</button>
</form>
<h2>Baseline tree benchmark</h2>
<p>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
<button id="updateDomProfile">profile updateDom</button>
<button id="createDomProfile">profile createDom</button>
</p>
<div>
<tree id="root"></tree>
</div>
<script src="../../bootstrap_plain.js"></script>
</body>
</html>

26
modules/benchmarks/src/tree/incremental_dom/index.ts Normal file
View File

@ -0,0 +1,26 @@
import {bindAction, profile} from '../../util';
import {TreeNode, buildTree, emptyTree} from '../util';
import {render} from './tree';
const {patch} = require('incremental-dom');
export function main() {
var app: any;
function destroyDom() { patch(app, () => render(emptyTree)); }
function createDom() { patch(app, () => render(buildTree())); }
function noop() {}
function init() {
app = document.querySelector('tree');
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
}
init();
}

26
modules/benchmarks/src/tree/incremental_dom/tree.ts Normal file
View File

@ -0,0 +1,26 @@
import {TreeNode} from '../util';
const {elementOpen, elementClose, text} = require('incremental-dom');
// template:
// <span> {{data.value}} <span template='ngIf data.right != null'><tree
// [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree
// [data]='data.left'></tree></span></span>
export function render(data: TreeNode) {
elementOpen('span', '', null);
text(` ${data.value} `);
if (data.left) {
elementOpen('span', '', null);
elementOpen('tree', '', null);
render(data.left);
elementClose('tree');
elementClose('span');
}
if (data.right) {
elementOpen('span', '', null);
elementOpen('tree', '', null);
render(data.right);
elementClose('tree');
elementClose('span');
}
elementClose('span');
}

4
modules/benchmarks/src/tree/ng2/index.ts
View File

@ -31,8 +31,8 @@ export function main() {
tree = appRef.components[0].instance; tree = appRef.components[0].instance;
bindAction('#destroyDom', destroyDom); bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom); bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'ng2-update')); bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
bindAction('#createDomProfile', profile(createDom, destroyDom, 'ng2-create')); bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
}); });
} }

2
modules/benchmarks/src/tree/polymer/index.html
View File

@ -23,7 +23,7 @@
<binary-tree id="root"></binary-tree> <binary-tree id="root"></binary-tree>
</div> </div>
<script src="../../bootstrap_polymer.js"></script> <script src="../../bootstrap_plain.js"></script>
</body> </body>
</html> </html>

2
modules/benchmarks/src/tree/polymer_leaves/index.html
View File

@ -23,7 +23,7 @@
<binary-tree id="root"></binary-tree> <binary-tree id="root"></binary-tree>
</div> </div>
<script src="../../bootstrap_polymer.js"></script> <script src="../../bootstrap_plain.js"></script>
</body> </body>
</html> </html>