From 27d72e87c334c81b77eb08fb382ebd41f6b9294b Mon Sep 17 00:00:00 2001 From: Tobias Bosch Date: Thu, 1 Sep 2016 10:31:11 -0700 Subject: [PATCH] feat(benchmarks): add baseline for deep tree that only used `createElement` --- modules/benchmarks/e2e_test/tree_perf.ts | 7 +++++ modules/benchmarks/e2e_test/tree_spec.ts | 6 ++++ .../src/tree/baseline_dom/index.html | 27 +++++++++++++++++ .../benchmarks/src/tree/baseline_dom/index.ts | 25 ++++++++++++++++ .../benchmarks/src/tree/baseline_dom/tree.ts | 30 +++++++++++++++++++ 5 files changed, 95 insertions(+) create mode 100644 modules/benchmarks/src/tree/baseline_dom/index.html create mode 100644 modules/benchmarks/src/tree/baseline_dom/index.ts create mode 100644 modules/benchmarks/src/tree/baseline_dom/tree.ts diff --git a/modules/benchmarks/e2e_test/tree_perf.ts b/modules/benchmarks/e2e_test/tree_perf.ts index 61f3e4d97f..7c0e920b96 100644 --- a/modules/benchmarks/e2e_test/tree_perf.ts +++ b/modules/benchmarks/e2e_test/tree_perf.ts @@ -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', diff --git a/modules/benchmarks/e2e_test/tree_spec.ts b/modules/benchmarks/e2e_test/tree_spec.ts index d3fdd36062..d28ba2d34a 100644 --- a/modules/benchmarks/e2e_test/tree_spec.ts +++ b/modules/benchmarks/e2e_test/tree_spec.ts @@ -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', diff --git a/modules/benchmarks/src/tree/baseline_dom/index.html b/modules/benchmarks/src/tree/baseline_dom/index.html new file mode 100644 index 0000000000..36f16b5788 --- /dev/null +++ b/modules/benchmarks/src/tree/baseline_dom/index.html @@ -0,0 +1,27 @@ + + + + +

Params

+
+ Depth: + +
+ +
+ +

Baseline tree benchmark

+

+ + + + +

+ +
+ +
+ + + + \ No newline at end of file diff --git a/modules/benchmarks/src/tree/baseline_dom/index.ts b/modules/benchmarks/src/tree/baseline_dom/index.ts new file mode 100644 index 0000000000..179a29c706 --- /dev/null +++ b/modules/benchmarks/src/tree/baseline_dom/index.ts @@ -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(); +} diff --git a/modules/benchmarks/src/tree/baseline_dom/tree.ts b/modules/benchmarks/src/tree/baseline_dom/tree.ts new file mode 100644 index 0000000000..2c6567b2b8 --- /dev/null +++ b/modules/benchmarks/src/tree/baseline_dom/tree.ts @@ -0,0 +1,30 @@ +import {TreeNode} from '../util'; + +// template: +// {{data.value}} +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); +}