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

feat(benchmarks): add baseline for deep tree that only used `createElement`

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

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

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

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

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

27
modules/benchmarks/src/tree/baseline_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_ng2.js"></script>
</body>
</html>

25
modules/benchmarks/src/tree/baseline_dom/index.ts Normal file
View File

@ -0,0 +1,25 @@
import {bindAction, profile} from '../../util';
import {TreeNode, buildTree, emptyTree} from '../util';
import {createTreeTemplate, destroyTreeTemplate} from './tree';
export function main() {
var app: any;
function destroyDom() { destroyTreeTemplate(app); }
function createDom() { createTreeTemplate(app, 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();
}

30
modules/benchmarks/src/tree/baseline_dom/tree.ts Normal file
View File

@ -0,0 +1,30 @@
import {TreeNode} from '../util';
// 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 createTreeTemplate(parentEl: any, data: TreeNode) {
const rootSpan = document.createElement('span');
parentEl.appendChild(rootSpan);
rootSpan.appendChild(document.createTextNode(` ${data.value} `));
if (data.left) {
const leftTreeSpan = document.createElement('span');
rootSpan.appendChild(leftTreeSpan);
const leftTree = document.createElement('tree');
leftTreeSpan.appendChild(leftTree);
createTreeTemplate(leftTree, data.left);
}
if (data.right) {
const rightTreeSpan = document.createElement('span');
rootSpan.appendChild(rightTreeSpan);
const rightTree = document.createElement('tree');
rightTreeSpan.appendChild(rightTree);
createTreeTemplate(rightTree, data.right);
}
}
export function destroyTreeTemplate(el: any) {
while (el.firstChild) el.removeChild(el.firstChild);
}