perf: add large table and deep tree benchmarks for render3 (#20855)

PR Close #20855
2017-12-11 18:15:57 +01:00
parent 93b00cceb6
commit 0867e85163
9 changed files with 369 additions and 0 deletions
--- a/modules/benchmarks/src/largetable/render3/index.html
+++ b/modules/benchmarks/src/largetable/render3/index.html
@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br>
+    Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Render3 Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root"></largetable>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>
--- a/modules/benchmarks/src/largetable/render3/index.ts
+++ b/modules/benchmarks/src/largetable/render3/index.ts
@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+import {renderComponent} from '@angular/core/src/render3/index';
+
+import {bindAction, profile} from '../../util';
+
+import {LargeTableComponent, createDom, destroyDom} from './table';
+
+function noop() {}
+
+export function main() {
+  let component: LargeTableComponent;
+  if (typeof window !== 'undefined') {
+    component = renderComponent<LargeTableComponent>(LargeTableComponent, {renderer: document});
+    bindAction('#createDom', () => createDom(component));
+    bindAction('#destroyDom', () => destroyDom(component));
+    bindAction('#updateDomProfile', profile(() => createDom(component), noop, 'update'));
+    bindAction(
+        '#createDomProfile',
+        profile(() => createDom(component), () => destroyDom(component), 'create'));
+  }
+}
--- a/modules/benchmarks/src/largetable/render3/table.ts
+++ b/modules/benchmarks/src/largetable/render3/table.ts
@ -0,0 +1,81 @@
+/**
+ * @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
+ */
+
+import {C, E, T, V, a, b, b1, c, defineComponent, detectChanges, e, rC, rc, t, v} from '@angular/core/src/render3/index';
+import {ComponentDef} from '@angular/core/src/render3/public_interfaces';
+
+import {TableCell, buildTable, emptyTable} from '../util';
+
+export class LargeTableComponent {
+  data: TableCell[][] = emptyTable;
+
+  /** @nocollapse */
+  static ngComponentDef: ComponentDef<LargeTableComponent> = defineComponent({
+    type: LargeTableComponent,
+    tag: 'largetable',
+    template: function(ctx: LargeTableComponent, cm: boolean) {
+      if (cm) {
+        E(0, 'table');
+        {
+          E(1, 'tbody');
+          {
+            C(2);
+            c();
+          }
+          e();
+        }
+        e();
+      }
+      rC(2);
+      {
+        for (let row of ctx.data) {
+          let cm1 = V(1);
+          {
+            if (cm1) {
+              E(0, 'tr');
+              C(1);
+              c();
+              e();
+            }
+            rC(1);
+            {
+              for (let cell of row) {
+                let cm2 = V(2);
+                {
+                  if (cm2) {
+                    E(0, 'td');
+                    { T(1); }
+                    e();
+                  }
+                  a(0, 'style', b1('background-color:', cell.row % 2 ? '' : 'grey', ''));
+                  t(1, b(cell.value));
+                }
+                v();
+              }
+            }
+            rc();
+          }
+          v();
+        }
+      }
+      rc();
+    },
+    factory: () => new LargeTableComponent(),
+    inputs: {data: 'data'}
+  });
+}
+
+export function destroyDom(component: LargeTableComponent) {
+  component.data = emptyTable;
+  detectChanges(component);
+}
+
+export function createDom(component: LargeTableComponent) {
+  component.data = buildTable();
+  detectChanges(component);
+}