perf: add button for profiling tree benchmark

Author: mhevery

modules/benchmarks/src/tree/tree_benchmark.html

@@ -6,12 +6,16 @@ <h2>Angular2 tree benchmark</h2>
 <p>
 <button id="ng2DestroyDom">destroyDom</button>
 <button id="ng2CreateDom">createDom</button>
+<button id="ng2UpdateDomProfile">profile updateDom</button>
+<button id="ng2CreateDomProfile">profile createDom</button>
 </p>
 
 <h2>Baseline tree benchmark</h2>
 <p>
 <button id="baselineDestroyDom">destroyDom</button>
 <button id="baselineCreateDom">createDom</button>
+<button id="baselineUpdateDomProfile">profile updateDom</button>
+<button id="baselineCreateDomProfile">profile createDom</button>
 </p>
 
 <div>

modules/benchmarks/src/tree/tree_benchmark.js

@@ -8,7 +8,7 @@ import {TemplateLoader} from 'core/compiler/template_loader';
 import {LifeCycle} from 'core/life_cycle/life_cycle';
 
 import {reflector} from 'reflection/reflection';
-import {DOM, document, Element} from 'facade/dom';
+import {DOM, document, window, Element} from 'facade/dom';
 import {isPresent} from 'facade/lang';
 
 var MAX_DEPTH = 9;
@@ -135,6 +135,23 @@ export function main() {
  changeDetector.detectChanges();
  }
 
+ function profile(create, destroy, name) {
+ return function(_) {
+ window.console.profile(name);
+ var duration = 0;
+ var count = 0;
+ while(duration < 5000) {
+ var start = window.performance.now();
+ create(_);
+ duration += window.performance.now() - start;
+ destroy(_);
+ count++;
+ }
+ window.console.profileEnd(name);
+ window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
+ };
+ }
+
  function ng2CreateDom(_) {
  var values = count++ % 2 == 0 ?
  ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
@@ -144,12 +161,16 @@ export function main() {
  changeDetector.detectChanges();
  }
 
+ function noop() {}
+
  function initNg2() {
  bootstrap(AppComponent).then((injector) => {
  changeDetector = injector.get(ChangeDetector);
  app = injector.get(AppComponent);
  DOM.on(DOM.querySelector(document, '#ng2DestroyDom'), 'click', ng2DestroyDom);
  DOM.on(DOM.querySelector(document, '#ng2CreateDom'), 'click', ng2CreateDom);
+ DOM.on(DOM.querySelector(document, '#ng2UpdateDomProfile'), 'click', profile(ng2CreateDom, noop, 'ng2-update'));
+ DOM.on(DOM.querySelector(document, '#ng2CreateDomProfile'), 'click', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create'));
  });
  }
 
@@ -170,6 +191,8 @@ export function main() {
  DOM.appendChild(DOM.querySelector(document, 'baseline'), baselineRootTreeComponent.element);
  DOM.on(DOM.querySelector(document, '#baselineDestroyDom'), 'click', baselineDestroyDom);
  DOM.on(DOM.querySelector(document, '#baselineCreateDom'), 'click', baselineCreateDom);
+ DOM.on(DOM.querySelector(document, '#baselineUpdateDomProfile'), 'click', profile(baselineCreateDom, noop, 'baseline-update'));
+ DOM.on(DOM.querySelector(document, '#baselineCreateDomProfile'), 'click', profile(baselineCreateDom, baselineDestroyDom, 'baseline-create'));
  }
 
  initNg2();

modules/facade/src/dom.dart

@@ -3,7 +3,7 @@ library angular.core.facade.dom;
 import 'dart:html';
 import 'dart:js' show JsObject;
 
-export 'dart:html' show DocumentFragment, Node, Element, TemplateElement, Text, document, location;
+export 'dart:html' show DocumentFragment, Node, Element, TemplateElement, Text, document, location, window;
 
 // TODO(tbosch): Is there a builtin one? Why is Dart
 // removing unknown elements by default?

modules/facade/src/dom.es6

@@ -1,3 +1,4 @@
+export var window = frames.window;
 export var DocumentFragment = window.DocumentFragment;
 export var Node = window.Node;
 export var NodeList = window.NodeList;