From 61002733bc1ca6c991ae3426d768956217adc5a1 Mon Sep 17 00:00:00 2001 From: Tobias Bosch Date: Fri, 26 Aug 2016 12:27:24 -0700 Subject: [PATCH] refactor(benchmarks): make tree benchmark work again --- bower.json | 2 +- build.sh | 15 ++ gulpfile.js | 2 +- modules/benchmarks/README.md | 12 + .../e2e_test/{ => old}/compiler_perf.ts | 0 .../e2e_test/{ => old}/costs_perf.ts | 0 .../benchmarks/e2e_test/{ => old}/di_perf.ts | 0 .../e2e_test/{ => old}/largetable_perf.ts | 0 .../{ => old}/naive_infinite_scroll_perf.ts | 0 .../{ => old}/naive_infinite_scroll_spec.ts | 0 .../e2e_test/{ => old}/page_load_perf.ts | 0 .../e2e_test/{ => old}/selector_perf.ts | 0 .../e2e_test/{ => old}/static_tree_perf.ts | 0 modules/benchmarks/e2e_test/tree_perf.ts | 59 ++--- modules/benchmarks/favicon.ico | Bin 0 -> 5430 bytes modules/benchmarks/src/bootstrap.ts | 108 ++++++++ .../compiler/compiler_benchmark.html | 0 .../{ => old}/compiler/compiler_benchmark.ts | 0 .../compiler/selector_benchmark.html | 0 .../{ => old}/compiler/selector_benchmark.ts | 0 .../benchmarks/src/{ => old}/costs/index.html | 0 .../benchmarks/src/{ => old}/costs/index.ts | 0 .../src/{ => old}/di/di_benchmark.html | 0 .../src/{ => old}/di/di_benchmark.ts | 0 .../largetable/largetable_benchmark.html | 0 .../largetable/largetable_benchmark.ts | 2 +- .../{ => old}/naive_infinite_scroll/app.ts | 0 .../{ => old}/naive_infinite_scroll/cells.ts | 0 .../{ => old}/naive_infinite_scroll/common.ts | 0 .../naive_infinite_scroll/index.html | 0 .../{ => old}/naive_infinite_scroll/index.ts | 0 .../naive_infinite_scroll/random_data.ts | 0 .../naive_infinite_scroll/scroll_area.ts | 0 .../naive_infinite_scroll/scroll_item.ts | 0 .../src/{ => old}/page_load/page_load.html | 0 .../src/{ => old}/page_load/page_load.ts | 0 .../{ => old}/static_tree/tree_benchmark.html | 0 .../{ => old}/static_tree/tree_benchmark.ts | 0 modules/benchmarks/src/tree/app/util.ts | 72 +++++ .../benchmarks/src/tree/baseline/app/tree.ts | 71 +++++ .../benchmarks/src/tree/baseline/index.html | 27 ++ modules/benchmarks/src/tree/baseline/index.ts | 35 +++ modules/benchmarks/src/tree/ng2/app/tree.ts | 33 +++ modules/benchmarks/src/tree/ng2/index.html | 27 ++ modules/benchmarks/src/tree/ng2/index.ts | 49 ++++ .../src/tree/polymer/binary_tree.html | 2 +- .../benchmarks/src/tree/polymer/index.html | 29 +++ modules/benchmarks/src/tree/polymer/index.ts | 22 ++ .../benchmarks/src/tree/tree_benchmark.html | 47 ---- modules/benchmarks/src/tree/tree_benchmark.ts | 246 ------------------ modules/benchmarks_external/README.md | 6 + modules/benchmarks_external/src/bootstrap.ts | 83 ++++++ .../src/tree/polymer/index.html | 22 -- .../src/tree/polymer/root_tree.html | 49 ---- modules/tsconfig.json | 3 +- 55 files changed, 620 insertions(+), 403 deletions(-) create mode 100644 modules/benchmarks/README.md rename modules/benchmarks/e2e_test/{ => old}/compiler_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/costs_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/di_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/largetable_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/naive_infinite_scroll_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/naive_infinite_scroll_spec.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/page_load_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/selector_perf.ts (100%) rename modules/benchmarks/e2e_test/{ => old}/static_tree_perf.ts (100%) create mode 100644 modules/benchmarks/favicon.ico create mode 100644 modules/benchmarks/src/bootstrap.ts rename modules/benchmarks/src/{ => old}/compiler/compiler_benchmark.html (100%) rename modules/benchmarks/src/{ => old}/compiler/compiler_benchmark.ts (100%) rename modules/benchmarks/src/{ => old}/compiler/selector_benchmark.html (100%) rename modules/benchmarks/src/{ => old}/compiler/selector_benchmark.ts (100%) rename modules/benchmarks/src/{ => old}/costs/index.html (100%) rename modules/benchmarks/src/{ => old}/costs/index.ts (100%) rename modules/benchmarks/src/{ => old}/di/di_benchmark.html (100%) rename modules/benchmarks/src/{ => old}/di/di_benchmark.ts (100%) rename modules/benchmarks/src/{ => old}/largetable/largetable_benchmark.html (100%) rename modules/benchmarks/src/{ => old}/largetable/largetable_benchmark.ts (99%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/app.ts (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/cells.ts (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/common.ts (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/index.html (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/index.ts (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/random_data.ts (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/scroll_area.ts (100%) rename modules/benchmarks/src/{ => old}/naive_infinite_scroll/scroll_item.ts (100%) rename modules/benchmarks/src/{ => old}/page_load/page_load.html (100%) rename modules/benchmarks/src/{ => old}/page_load/page_load.ts (100%) rename modules/benchmarks/src/{ => old}/static_tree/tree_benchmark.html (100%) rename modules/benchmarks/src/{ => old}/static_tree/tree_benchmark.ts (100%) create mode 100644 modules/benchmarks/src/tree/app/util.ts create mode 100644 modules/benchmarks/src/tree/baseline/app/tree.ts create mode 100644 modules/benchmarks/src/tree/baseline/index.html create mode 100644 modules/benchmarks/src/tree/baseline/index.ts create mode 100644 modules/benchmarks/src/tree/ng2/app/tree.ts create mode 100644 modules/benchmarks/src/tree/ng2/index.html create mode 100644 modules/benchmarks/src/tree/ng2/index.ts rename modules/{benchmarks_external => benchmarks}/src/tree/polymer/binary_tree.html (87%) create mode 100644 modules/benchmarks/src/tree/polymer/index.html create mode 100644 modules/benchmarks/src/tree/polymer/index.ts delete mode 100644 modules/benchmarks/src/tree/tree_benchmark.html delete mode 100644 modules/benchmarks/src/tree/tree_benchmark.ts create mode 100644 modules/benchmarks_external/README.md create mode 100644 modules/benchmarks_external/src/bootstrap.ts delete mode 100644 modules/benchmarks_external/src/tree/polymer/index.html delete mode 100644 modules/benchmarks_external/src/tree/polymer/root_tree.html diff --git a/bower.json b/bower.json index 8cf47d1fd1..75cbf1f2df 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular2", "dependencies": { - "polymer": "Polymer/polymer" + "polymer": "Polymer/polymer#^1.6.0" } } diff --git a/build.sh b/build.sh index 738e22cb4a..373c5aa6c6 100755 --- a/build.sh +++ b/build.sh @@ -31,6 +31,21 @@ ln -s ../../../../node_modules/rxjs . ln -s ../../../../node_modules/angular/angular.js . cd - +echo "====== Copying files needed for benchmarks =====" +cp -r ./modules/benchmarks ./dist/all/ +cp -r ./modules/benchmarks/favicon.ico ./dist/ +mkdir ./dist/all/benchmarks/vendor +cd ./dist/all/benchmarks/vendor +ln -s ../../../../node_modules/core-js/client/core.js . +ln -s ../../../../node_modules/zone.js/dist/zone.js . +ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js . +ln -s ../../../../node_modules/systemjs/dist/system.src.js . +ln -s ../../../../node_modules/base64-js/lib/b64.js . +ln -s ../../../../node_modules/reflect-metadata/Reflect.js . +ln -s ../../../../node_modules/rxjs . +ln -s ../../../../node_modules/angular/angular.js . +ln -s ../../../../bower_components/polymer . +cd - TSCONFIG=./modules/tsconfig.json echo "====== (all)COMPILING: \$(npm bin)/tsc -p ${TSCONFIG} =====" diff --git a/gulpfile.js b/gulpfile.js index 4c02e10e68..6bce3ae496 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,7 +12,7 @@ const os = require('os'); const srcsToFmt = ['tools/**/*.ts', 'modules/@angular/**/*.ts', '!tools/public_api_guard/**/*.d.ts', - 'modules/benchpress/**/*.ts', 'modules/playground/**/*.ts']; + 'modules/benchpress/**/*.ts', 'modules/playground/**/*.ts', 'modules/benchmarks/**/*.ts']; gulp.task('format:enforce', () => { const format = require('gulp-clang-format'); diff --git a/modules/benchmarks/README.md b/modules/benchmarks/README.md new file mode 100644 index 0000000000..ff39f5434a --- /dev/null +++ b/modules/benchmarks/README.md @@ -0,0 +1,12 @@ +# How to run the benchmarks locally + +## Run in the browser +$ build.sh +$ cp -r ./modules/benchmarks ./dist/all/ +$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w +$ gulp serve +$ open http://localhost:8000/all/benchmarks/src/tree/ng2/index.html?bundles=false + +## Run e2e tests +$ export NODE_PATH=$(pwd)/dist/all:$(pwd)/dist/tools +$ ./node_modules/.bin/protractor protractor-js-new-world.conf.js --specs=dist/all/benchmarks/e2e_test/tree_perf.js diff --git a/modules/benchmarks/e2e_test/compiler_perf.ts b/modules/benchmarks/e2e_test/old/compiler_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/compiler_perf.ts rename to modules/benchmarks/e2e_test/old/compiler_perf.ts diff --git a/modules/benchmarks/e2e_test/costs_perf.ts b/modules/benchmarks/e2e_test/old/costs_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/costs_perf.ts rename to modules/benchmarks/e2e_test/old/costs_perf.ts diff --git a/modules/benchmarks/e2e_test/di_perf.ts b/modules/benchmarks/e2e_test/old/di_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/di_perf.ts rename to modules/benchmarks/e2e_test/old/di_perf.ts diff --git a/modules/benchmarks/e2e_test/largetable_perf.ts b/modules/benchmarks/e2e_test/old/largetable_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/largetable_perf.ts rename to modules/benchmarks/e2e_test/old/largetable_perf.ts diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts b/modules/benchmarks/e2e_test/old/naive_infinite_scroll_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts rename to modules/benchmarks/e2e_test/old/naive_infinite_scroll_perf.ts diff --git a/modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts b/modules/benchmarks/e2e_test/old/naive_infinite_scroll_spec.ts similarity index 100% rename from modules/benchmarks/e2e_test/naive_infinite_scroll_spec.ts rename to modules/benchmarks/e2e_test/old/naive_infinite_scroll_spec.ts diff --git a/modules/benchmarks/e2e_test/page_load_perf.ts b/modules/benchmarks/e2e_test/old/page_load_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/page_load_perf.ts rename to modules/benchmarks/e2e_test/old/page_load_perf.ts diff --git a/modules/benchmarks/e2e_test/selector_perf.ts b/modules/benchmarks/e2e_test/old/selector_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/selector_perf.ts rename to modules/benchmarks/e2e_test/old/selector_perf.ts diff --git a/modules/benchmarks/e2e_test/static_tree_perf.ts b/modules/benchmarks/e2e_test/old/static_tree_perf.ts similarity index 100% rename from modules/benchmarks/e2e_test/static_tree_perf.ts rename to modules/benchmarks/e2e_test/old/static_tree_perf.ts diff --git a/modules/benchmarks/e2e_test/tree_perf.ts b/modules/benchmarks/e2e_test/tree_perf.ts index 189981b4c8..5a7c770987 100644 --- a/modules/benchmarks/e2e_test/tree_perf.ts +++ b/modules/benchmarks/e2e_test/tree_perf.ts @@ -1,46 +1,37 @@ -import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util'; -import {runClickBenchmark} from '@angular/testing/src/perf_util'; +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ -describe('ng2 tree benchmark', function() { +import {verifyNoBrowserErrors} from 'e2e_util/e2e_util'; - var URL = 'benchmarks/src/tree/tree_benchmark.html'; +const useBundles = false; + +describe('tree benchmark', function() { afterEach(verifyNoBrowserErrors); - it('should log the ng stats', function(done) { - runClickBenchmark({ - url: URL, - buttons: ['#ng2DestroyDom', '#ng2CreateDom'], - id: 'ng2.tree.create.plain', - params: [{name: 'depth', value: 9, scale: 'log2'}] - }).then(done, done.fail); + it('should work for the baseline', function() { + browser.ignoreSynchronization = true; + browser.get(`all/benchmarks/src/tree/baseline/index.html?bundles=${useBundles}`); + $('#createDom').click(); + expect($('baseline').getText()).toContain('0'); }); - it('should log the ng stats (update)', function(done) { - runClickBenchmark({ - url: URL, - buttons: ['#ng2CreateDom'], - id: 'ng2.tree.update', - params: [{name: 'depth', value: 9, scale: 'log2'}] - }).then(done, done.fail); + it('should work for ng2', function() { + browser.get(`all/benchmarks/src/tree/ng2/index.html?bundles=${useBundles}`); + $('#createDom').click(); + expect($('app').getText()).toContain('0'); }); - it('should log the baseline stats', function(done) { - runClickBenchmark({ - url: URL, - buttons: ['#baselineDestroyDom', '#baselineCreateDom'], - id: 'baseline.tree.create', - params: [{name: 'depth', value: 9, scale: 'log2'}] - }).then(done, done.fail); - }); - - it('should log the baseline stats (update)', function(done) { - runClickBenchmark({ - url: URL, - buttons: ['#baselineCreateDom'], - id: 'baseline.tree.update', - params: [{name: 'depth', value: 9, scale: 'log2'}] - }).then(done, done.fail); + it('should work for polymer', function() { + browser.ignoreSynchronization = true; + browser.get(`all/benchmarks/src/tree/polymer/index.html?bundles=${useBundles}`); + $('#createDom').click(); + expect($('#app').getText()).toContain('0'); }); }); diff --git a/modules/benchmarks/favicon.ico b/modules/benchmarks/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc-global).benchmarksBootstrap = benchmarksBootstrap; + + function benchmarksBootstrap() { + urlParamsToForm(); + // check query param + var useBundles = location.search.indexOf('bundles=false') == -1; + if (useBundles) { + System.config({ + map: { + 'index': 'index.js', + '@angular/core': '/packages-dist/core/bundles/core.umd.js', + '@angular/common': '/packages-dist/common/bundles/common.umd.js', + '@angular/forms': '/packages-dist/forms/bundles/forms.umd.js', + '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': + '/packages-dist/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': + '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': '/packages-dist/http/bundles/http.umd.js', + '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js', + '@angular/router': '/packages-dist/router/bundles/router.umd.js', + '@angular/core/src/facade': '/all/@angular/core/src/facade', + 'rxjs': '/all/benchmarks/vendor/rxjs' + }, + packages: { + 'app': {defaultExtension: 'js'}, + '../app': {defaultExtension: 'js'}, + '@angular/core/src/facade': {defaultExtension: 'js'}, + 'rxjs': {defaultExtension: 'js'} + } + }); + } else { + console.warn( + 'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!'); + + System.config({ + map: { + 'index': 'index.js', + '@angular': '/all/@angular', + 'rxjs': '/all/benchmarks/vendor/rxjs' + }, + packages: { + 'app': {defaultExtension: 'js'}, + '../app': {defaultExtension: 'js'}, + '@angular/core': {main: 'index.js', defaultExtension: 'js'}, + '@angular/compiler': {main: 'index.js', defaultExtension: 'js'}, + '@angular/router': {main: 'index.js', defaultExtension: 'js'}, + '@angular/common': {main: 'index.js', defaultExtension: 'js'}, + '@angular/forms': {main: 'index.js', defaultExtension: 'js'}, + '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'}, + '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'}, + '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'}, + 'rxjs': {defaultExtension: 'js'} + } + }); + } + + + // BOOTSTRAP the app! + System.import('index').then(function(m: any /** TODO #9100 */) { + m.main(); + }, console.error.bind(console)); + } + + + function writeScriptTag(scriptUrl: any /** TODO #9100 */, onload?: any /** TODO #9100 */) { + document.write(``); + } + + // helper script that will read out the url parameters + // and store them in appropriate form fields on the page + function urlParamsToForm() { + var regex = /(\w+)=(\w+)/g; + var search = decodeURIComponent(location.search); + var match: any[]; + while (match = regex.exec(search)) { + var name = match[1]; + var value = match[2]; + var els = document.querySelectorAll('input[name="'+name+'"]'); + var el: any; + for (var i=0; i void, destroy: () => void, name: string) { + return function() { + windowProfile(name + ' w GC'); + var duration = 0; + var count = 0; + while (count++ < 150) { + (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`); + }; + } \ No newline at end of file diff --git a/modules/benchmarks/src/tree/baseline/app/tree.ts b/modules/benchmarks/src/tree/baseline/app/tree.ts new file mode 100644 index 0000000000..5013909f0d --- /dev/null +++ b/modules/benchmarks/src/tree/baseline/app/tree.ts @@ -0,0 +1,71 @@ +import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; +import {TreeNode} from '../../app/util'; + +// http://jsperf.com/nextsibling-vs-childnodes + +const BASELINE_TREE_TEMPLATE =document.createElement('template'); +BASELINE_TREE_TEMPLATE.innerHTML = '_'; +const BASELINE_IF_TEMPLATE =document.createElement('template'); +BASELINE_IF_TEMPLATE.innerHTML = ''; + +export class BaseLineTreeComponent { + value: BaseLineInterpolation; + left: BaseLineIf; + right: BaseLineIf; + constructor(public element: HTMLElement) { + var clone = getDOM().clone(BASELINE_TREE_TEMPLATE.content.firstChild); + getDOM().appendChild(element, clone); + + var child = clone.firstChild; + this.value = new BaseLineInterpolation(child); + child = getDOM().nextSibling(child); + this.left = new BaseLineIf(child); + child = getDOM().nextSibling(child); + this.right = new BaseLineIf(child); + } + update(value: TreeNode) { + this.value.update(value.value); + this.left.update(value.left); + this.right.update(value.right); + } +} + +export class BaseLineInterpolation { + value: string; + constructor(public textNode: Node) { + this.value = null; + } + update(value: string) { + if (this.value !== value) { + this.value = value; + getDOM().setText(this.textNode, value + ' '); + } + } +} + +export class BaseLineIf { + condition: boolean; + component: BaseLineTreeComponent; + constructor(public anchor: Node) { + this.condition = false; + this.component = null; + } + update(value: TreeNode) { + var newCondition = !!value; + if (this.condition !== newCondition) { + this.condition = newCondition; + if (this.component) { + getDOM().remove(this.component.element); + this.component = null; + } + if (this.condition) { + var element = getDOM().firstChild((getDOM().clone(BASELINE_IF_TEMPLATE)).content); + this.anchor.parentNode.insertBefore(element, getDOM().nextSibling(this.anchor)); + this.component = new BaseLineTreeComponent(getDOM().firstChild(element)); + } + } + if (this.component) { + this.component.update(value); + } + } +} diff --git a/modules/benchmarks/src/tree/baseline/index.html b/modules/benchmarks/src/tree/baseline/index.html new file mode 100644 index 0000000000..e4ae515dda --- /dev/null +++ b/modules/benchmarks/src/tree/baseline/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/index.ts b/modules/benchmarks/src/tree/baseline/index.ts new file mode 100644 index 0000000000..315077c9fb --- /dev/null +++ b/modules/benchmarks/src/tree/baseline/index.ts @@ -0,0 +1,35 @@ +import { + bindAction +} from '@angular/platform-browser/testing/benchmark_util'; + +import {BaseLineTreeComponent} from './app/tree'; +import {TreeNode, buildTree, emptyTree, profile} from '../app/util'; +import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter'; + +export function main() { + var app: BaseLineTreeComponent; + + 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); + app = new BaseLineTreeComponent(tree); + + bindAction('#destroyDom', destroyDom); + bindAction('#createDom', createDom); + + bindAction('#updateDomProfile', profile(createDom, noop, 'baseline-update')); + bindAction('#createDomProfile', + profile(createDom, destroyDom, 'baseline-create')); + } + + init(); +} diff --git a/modules/benchmarks/src/tree/ng2/app/tree.ts b/modules/benchmarks/src/tree/ng2/app/tree.ts new file mode 100644 index 0000000000..8141dfce1e --- /dev/null +++ b/modules/benchmarks/src/tree/ng2/app/tree.ts @@ -0,0 +1,33 @@ +import { + Component, + NgModule +} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; + +import {TreeNode, emptyTree} from '../../app/util'; + +@Component({ + selector: 'tree', + inputs: ['data'], + template: + ` {{data.value}} ` +}) +class TreeComponent { + data: TreeNode; +} + +@Component( + {selector: 'app', template: ``}) +export class AppComponent { + initData: TreeNode; + constructor() { + this.initData = emptyTree(); + } +} + +@NgModule({ + imports: [BrowserModule], + bootstrap: [AppComponent], + declarations: [TreeComponent, AppComponent] +}) +export class AppModule {} diff --git a/modules/benchmarks/src/tree/ng2/index.html b/modules/benchmarks/src/tree/ng2/index.html new file mode 100644 index 0000000000..7c7f30edd9 --- /dev/null +++ b/modules/benchmarks/src/tree/ng2/index.html @@ -0,0 +1,27 @@ + + + + +

Params

+
+ Depth: + +
+ +
+ +

Angular2 tree benchmark

+

+ + + + +

+ +
+ +
+ + + + \ No newline at end of file diff --git a/modules/benchmarks/src/tree/ng2/index.ts b/modules/benchmarks/src/tree/ng2/index.ts new file mode 100644 index 0000000000..fc9abcc6a7 --- /dev/null +++ b/modules/benchmarks/src/tree/ng2/index.ts @@ -0,0 +1,49 @@ +import { + NgModule, + enableProdMode +} from '@angular/core'; + +import {ApplicationRef} from '@angular/core/src/application_ref'; +import { + bindAction, + windowProfile, + windowProfileEnd +} from '@angular/platform-browser/testing/benchmark_util'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; + +import {AppComponent, AppModule} from './app/tree'; +import {TreeNode, buildTree, emptyTree, profile} from '../app/util'; + +export function main() { + var app: AppComponent; + var appRef: ApplicationRef; + + function destroyDom() { + app.initData = emptyTree(); + appRef.tick(); + } + + function createDom() { + app.initData = buildTree(); + appRef.tick(); + } + + function noop() {} + + function init() { + enableProdMode(); + platformBrowserDynamic().bootstrapModule(AppModule) + .then((ref) => { + var injector = ref.injector; + appRef = injector.get(ApplicationRef); + + app = appRef.components[0].instance; + bindAction('#destroyDom', destroyDom); + bindAction('#createDom', createDom); + bindAction('#updateDomProfile', profile(createDom, noop, 'ng2-update')); + bindAction('#createDomProfile', profile(createDom, destroyDom, 'ng2-create')); + }); + } + + init(); +} diff --git a/modules/benchmarks_external/src/tree/polymer/binary_tree.html b/modules/benchmarks/src/tree/polymer/binary_tree.html similarity index 87% rename from modules/benchmarks_external/src/tree/polymer/binary_tree.html rename to modules/benchmarks/src/tree/polymer/binary_tree.html index d8e861dbbf..7c924a686a 100644 --- a/modules/benchmarks_external/src/tree/polymer/binary_tree.html +++ b/modules/benchmarks/src/tree/polymer/binary_tree.html @@ -1,4 +1,4 @@ - +