feat(benchmark): add static_tree benchmark

Static binary component tree of depth 10, i.e. 1024 components. Current numbers for `pureScriptTime` are: JavaScript: Baseline: 27.10+-9% Ng2: 26.84+-8% Ng1: 55.30+-14% Dart: Baseline: 30.13+-4% Ng2: 45.94+-3% Ng1: 128.88+-10% I.e. in JS we are same speed as baseline right now! Some background: We had a recent change in the compiler that merges components into their parents already during compilation (#2529). This made Ng2 2x faster in this benchmark (before the Ng2 JS time was 49.59+-14%ms). Closes #3196
angular · Jul 22, 2015 · 854b5b7 · 854b5b7
1 parent 231962a
commit 854b5b7
Show file tree

Hide file tree

Showing 12 changed files with 697 additions and 0 deletions.
diff --git a/modules/benchmarks/e2e_test/static_tree.dart b/modules/benchmarks/e2e_test/static_tree.dart
@@ -0,0 +1,5 @@
+library benchmarks.e2e_test.static_tree_perf;
+
+main() {
+
+}
diff --git a/modules/benchmarks/e2e_test/static_tree.ts b/modules/benchmarks/e2e_test/static_tree.ts
@@ -0,0 +1,54 @@
+import {runClickBenchmark, verifyNoBrowserErrors} from 'angular2/src/test_lib/perf_util';
+
+describe('ng2 static tree benchmark', function() {
+
+  var URL = 'benchmarks/src/static_tree/tree_benchmark.html';
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should log the ng stats with viewcache', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
+      id: 'ng2.static.tree.create.viewcache',
+      params: [{name: 'viewcache', value: 'true'}]
+    }).then(done, done.fail);
+  });
+
+  it('should log the ng stats without viewcache', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
+      id: 'ng2.static.tree.create.plain',
+      params: [{name: 'viewcache', value: 'false'}]
+    }).then(done, done.fail);
+  });
+
+  it('should log the ng stats (update)', function(done) {
+    runClickBenchmark({
+      url: URL,
+      buttons: ['#ng2CreateDom'],
+      id: 'ng2.static.tree.update',
+      params: [{name: 'viewcache', value: 'true'}]
+    }).then(done, done.fail);
+  });
+
+  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);
+  });
+
+});
diff --git a/modules/benchmarks/src/index.html b/modules/benchmarks/src/index.html
@@ -20,6 +20,9 @@
     <li>
       <a href="tree/tree_benchmark.html">Tree benchmark</a>
     </li>
+    <li>
+      <a href="static_tree/tree_benchmark.html">Static tree benchmark</a>
+    </li>
     <li>
       <a href="naive_infinite_scroll/index.html">Naive infinite scroll benchmark</a>
     </li>

diff --git a/modules/benchmarks/src/static_tree/tree_benchmark.html b/modules/benchmarks/src/static_tree/tree_benchmark.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>Params</h2>
+<form>
+  <br>
+  Use Viewcache:
+  <label>
+  Yes<input type="radio" name="viewcache" placeholder="use viewcache" value="true" checked="checked">
+  </label>
+  <label>
+  No<input type="radio" name="viewcache" placeholder="use viewcache" value="false">
+  </label>
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Angular2 static tree benchmark (depth 10)</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 static tree benchmark (depth 10)</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>
+<app></app>
+</div>
+
+<div>
+<baseline></baseline>
+</div>
+
+$SCRIPTS$
+</body>
+</html>