cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(benchmarks): make setup nicer

Browse Source 
- simplify and correct systemjs config
- remove deep imports into Ng2 packages to work with bundles
- have separate Ng2 and Polymer bootstrap files
This commit is contained in:
Tobias Bosch
2016-08-30 14:17:37 -07:00
parent f7b5478e9f
commit 6ea5b05e7c
25 changed files with 260 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
modules/benchmarks/src/tree/app/util.ts
View File

@ -1,67 +0,0 @@
import {getIntParameter, windowProfile, windowProfileEnd} from '@angular/platform-browser/testing/benchmark_util';
export class TreeNode {
constructor(public value: string, public left: TreeNode, public right: TreeNode) {}
}
let treeCreateCount: number;
let maxDepth: number;
let numberData: string[];
let charData: string[];
init();
function init() {
maxDepth = getIntParameter('depth');
treeCreateCount = 0;
numberData = [];
charData = [];
for (let i = 0; i < maxDepth; i++) {
numberData.push(i.toString());
charData.push(String.fromCharCode('A'.charCodeAt(0) + i));
}
}
function _buildTree(values: string[], curDepth: number = 0): TreeNode {
if (maxDepth === curDepth) return new TreeNode('', null, null);
return new TreeNode(
values[curDepth], _buildTree(values, curDepth + 1), _buildTree(values, curDepth + 1));
}
export function emptyTree(): TreeNode {
return new TreeNode('', null, null);
}
export function buildTree(): TreeNode {
treeCreateCount++;
return _buildTree(treeCreateCount % 2 ? numberData : charData);
}
export function profile(create: () => void, destroy: () => void, name: string) {
return function() {
windowProfile(name + ' w GC');
var duration = 0;
var count = 0;
while (count++ < 150) {
(<any>window)['gc']();
var start = window.performance.now();
create();
duration += window.performance.now() - start;
destroy();
}
windowProfileEnd(name + ' w GC');
window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
windowProfile(name + ' w/o GC');
duration = 0;
count = 0;
while (count++ < 150) {
var start = window.performance.now();
create();
duration += window.performance.now() - start;
destroy();
}
windowProfileEnd(name + ' w/o GC');
window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
};
}

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

@ -19,9 +19,9 @@
</p>
<div>
<baseline></baseline>
<tree id="root"></tree>
</div>
<script src="../../bootstrap.js"></script>
<script src="../../bootstrap_ng2.js"></script>
</body>
</html>

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

@ -1,23 +1,18 @@
import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
import {bindAction} from '@angular/platform-browser/testing/benchmark_util';
import {TreeNode, buildTree, emptyTree, profile} from '../app/util';
import {BaseLineTreeComponent} from './app/tree';
import {bindAction, profile} from '../../util';
import {TreeNode, buildTree, emptyTree} from '../util';
import {BaseLineTreeComponent} from './tree';
export function main() {
var app: BaseLineTreeComponent;
function destroyDom() { app.update(emptyTree()); }
function destroyDom() { app.update(emptyTree); }
function createDom() { app.update(buildTree()); }
function noop() {}
function init() {
BrowserDomAdapter.makeCurrent();
const tree = document.createElement('tree');
document.querySelector('baseline').appendChild(tree);
const tree: any = document.querySelector('tree');
app = new BaseLineTreeComponent(tree);
bindAction('#destroyDom', destroyDom);

10
modules/benchmarks/src/tree/baseline/app/tree.ts → modules/benchmarks/src/tree/baseline/tree.ts
View File

@ -1,7 +1,11 @@
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {TreeNode} from '../../app/util';
import {__platform_browser_private__} from '@angular/platform-browser';
import {TreeNode} from '../util';
// http://jsperf.com/nextsibling-vs-childnodes
// Note: We are using the DomAdapter also in the Baseline
// so that Ng2 can actually reach the baseline. Once Ng2 is able to generate
// code that does not use the DomAdapter any more, we should remove this.
__platform_browser_private__.initDomAdapter();
const getDOM = __platform_browser_private__.getDOM;
const BASELINE_TREE_TEMPLATE = document.createElement('template');
BASELINE_TREE_TEMPLATE.innerHTML =

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

@ -19,9 +19,9 @@
</p>
<div>
<app></app>
<tree id="root"></tree>
</div>
<script src="../../bootstrap.js"></script>
<script src="../../bootstrap_ng2.js"></script>
</body>
</html>

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

@ -1,23 +1,22 @@
import {NgModule, enableProdMode} from '@angular/core';
import {ApplicationRef} from '@angular/core/src/application_ref';
import {ApplicationRef, NgModule, enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {bindAction, windowProfile, windowProfileEnd} from '@angular/platform-browser/testing/benchmark_util';
import {TreeNode, buildTree, emptyTree, profile} from '../app/util';
import {bindAction, profile} from '../../util';
import {TreeNode, buildTree, emptyTree} from '../util';
import {AppComponent, AppModule} from './app/tree';
import {AppModule, TreeComponent} from './tree';
export function main() {
var app: AppComponent;
var tree: TreeComponent;
var appRef: ApplicationRef;
function destroyDom() {
app.initData = emptyTree();
tree.data = emptyTree;
appRef.tick();
}
function createDom() {
app.initData = buildTree();
tree.data = buildTree();
appRef.tick();
}
@ -29,7 +28,7 @@ export function main() {
var injector = ref.injector;
appRef = injector.get(ApplicationRef);
app = appRef.components[0].instance;
tree = appRef.components[0].instance;
bindAction('#destroyDom', destroyDom);
bindAction('#createDom', createDom);
bindAction('#updateDomProfile', profile(createDom, noop, 'ng2-update'));

18
modules/benchmarks/src/tree/ng2/app/tree.ts → modules/benchmarks/src/tree/ng2/tree.ts
View File

@ -1,7 +1,7 @@
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {TreeNode, emptyTree} from '../../app/util';
import {TreeNode, emptyTree} from '../util';
@Component({
selector: 'tree',
@ -9,20 +9,10 @@ import {TreeNode, emptyTree} from '../../app/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>`
})
class TreeComponent {
data: TreeNode;
export class TreeComponent {
data: TreeNode = emptyTree;
}
@Component({selector: 'app', template: `<tree [data]='initData'></tree>`})
export class AppComponent {
initData: TreeNode;
constructor() { this.initData = emptyTree(); }
}
@NgModule({
imports: [BrowserModule],
bootstrap: [AppComponent],
declarations: [TreeComponent, AppComponent]
})
@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
export class AppModule {
}

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

@ -20,10 +20,10 @@
</p>
<div>
<binary-tree id="app"></binary-tree>
<binary-tree id="root"></binary-tree>
</div>
<script src="../../bootstrap.js"></script>
<script src="../../bootstrap_polymer.js"></script>
</body>
</html>

9
modules/benchmarks/src/tree/polymer/index.ts
View File

@ -1,14 +1,13 @@
import {bindAction} from '@angular/platform-browser/testing/benchmark_util';
import {buildTree, emptyTree} from '../app/util';
import {bindAction} from '../../util';
import {buildTree, emptyTree} from '../util';
declare var Polymer: any;
export function main() {
const rootEl: any = document.querySelector('binary-tree');
rootEl.data = emptyTree();
rootEl.data = emptyTree;
function destroyDom() { rootEl.data = emptyTree(); }
function destroyDom() { rootEl.data = emptyTree; }
function createDom() { rootEl.data = buildTree(); }

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

@ -13,17 +13,17 @@
<button>Apply</button>
</form>
<h2>Polymer tree benchmark</h2>
<h2>Polymer leaves benchmark</h2>
<p>
<button id="destroyDom">destroyDom</button>
<button id="createDom">createDom</button>
</p>
<div>
<binary-tree id="app"></binary-tree>
<binary-tree id="root"></binary-tree>
</div>
<script src="../../bootstrap.js"></script>
<script src="../../bootstrap_polymer.js"></script>
</body>
</html>

7
modules/benchmarks/src/tree/polymer_leaves/index.ts
View File

@ -1,13 +1,12 @@
import {bindAction} from '@angular/platform-browser/testing/benchmark_util';
import {TreeNode, buildTree, emptyTree} from '../app/util';
import {bindAction} from '../../util';
import {TreeNode, buildTree, emptyTree} from '../util';
declare var Polymer: any;
export function main() {
const rootEl: any = document.querySelector('binary-tree');
rootEl.data = emptyTree();
rootEl.data = emptyTree;
function destroyDom() {
while (rootEl.firstChild) rootEl.removeChild(rootEl.firstChild);

36
modules/benchmarks/src/tree/util.ts Normal file
View File

@ -0,0 +1,36 @@
import {getIntParameter} from '../util';
export class TreeNode {
constructor(public value: string, public left: TreeNode, public right: TreeNode) {}
}
let treeCreateCount: number;
let maxDepth: number;
let numberData: string[];
let charData: string[];
init();
function init() {
maxDepth = getIntParameter('depth');
treeCreateCount = 0;
numberData = [];
charData = [];
for (let i = 0; i < maxDepth; i++) {
numberData.push(i.toString());
charData.push(String.fromCharCode('A'.charCodeAt(0) + i));
}
}
function _buildTree(values: string[], curDepth: number = 0): TreeNode {
if (maxDepth === curDepth) return new TreeNode('', null, null);
return new TreeNode(
values[curDepth], _buildTree(values, curDepth + 1), _buildTree(values, curDepth + 1));
}
export const emptyTree = new TreeNode('', null, null);
export function buildTree(): TreeNode {
treeCreateCount++;
return _buildTree(treeCreateCount % 2 ? numberData : charData);
}