angular · mhevery · Dec 1, 2017 · Dec 8, 2017 · Dec 11, 2017 · Dec 12, 2017
diff --git a/karma-js.conf.js b/karma-js.conf.js
@@ -57,6 +57,7 @@ module.exports = function(config) {
       'dist/all/@angular/**/*node_only_spec.js',
       'dist/all/@angular/benchpress/**',
       'dist/all/@angular/compiler-cli/**',
+      'dist/all/@angular/core/test/render3/**',
       'dist/all/@angular/compiler/test/aot/**',
       'dist/all/@angular/examples/**/e2e_test/*',
       'dist/all/@angular/language-service/**',

diff --git a/modules/benchmarks/e2e_test/largetable_perf.ts b/modules/benchmarks/e2e_test/largetable_perf.ts
@@ -56,6 +56,24 @@ describe('largetable benchmark perf', () => {
         }).then(done, done.fail);
       });
 
+      it('should run for render3', (done) => {
+        runTableBenchmark({
+          id: `largeTable.render3.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/render3/index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
+
+      it('should run for iv', (done) => {
+        runTableBenchmark({
+          id: `largeTable.iv.${worker.id}`,
+          url: 'all/benchmarks/src/largetable/iv/index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
+
       it('should run for the baseline', (done) => {
         runTableBenchmark({
           id: `largeTable.baseline.${worker.id}`,

diff --git a/modules/benchmarks/e2e_test/largetable_spec.ts b/modules/benchmarks/e2e_test/largetable_spec.ts
@@ -25,6 +25,20 @@ describe('largetable benchmark spec', () => {
     });
   });
 
+  it('should work for render3', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/render3/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+  });
+
+  it('should work for iv', () => {
+    testTableBenchmark({
+      url: 'all/benchmarks/src/largetable/iv/index.html',
+      ignoreBrowserSynchronization: true,
+    });
+  });
+
   it('should work for the baseline', () => {
     testTableBenchmark({
       url: 'all/benchmarks/src/largetable/baseline/index.html',

diff --git a/modules/benchmarks/e2e_test/tree_data.ts b/modules/benchmarks/e2e_test/tree_data.ts
@@ -49,6 +49,24 @@ export const Benchmarks: Benchmark[] = [
     url: 'all/benchmarks/src/tree/ng2_switch/index.html',
     buttons: CreateDestroyButtons,
   },
+  {
+    id: `deepTree.ng2.render3`,
+    url: 'all/benchmarks/src/tree/render3/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.ng2.render3_function`,
+    url: 'all/benchmarks/src/tree/render3_function/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+  },
+  {
+    id: `deepTree.iv`,
+    url: 'all/benchmarks/src/tree/iv/index.html',
+    buttons: CreateDestroyDetectChangesButtons,
+    ignoreBrowserSynchronization: true,
+  },
   {
     id: `deepTree.baseline`,
     url: 'all/benchmarks/src/tree/baseline/index.html',

diff --git a/modules/benchmarks/src/largetable/iv/index.html b/modules/benchmarks/src/largetable/iv/index.html
@@ -0,0 +1,31 @@
+<!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>IV 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 type="text/javascript" src="largetable.js"></script>
+
+</body>
+</html>
diff --git a/modules/benchmarks/src/largetable/iv/largetable.js b/modules/benchmarks/src/largetable/iv/largetable.js
diff --git 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>
diff --git 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 as renderComponent} from '@angular/core';
+
+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);
+    bindAction('#createDom', () => createDom(component));
+    bindAction('#destroyDom', () => destroyDom(component));
+    bindAction('#updateDomProfile', profile(() => createDom(component), noop, 'update'));
+    bindAction(
+        '#createDomProfile',
+        profile(() => createDom(component), () => destroyDom(component), 'create'));
+  }
+}
diff --git 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 as C, ɵE as E, ɵT as T, ɵV as V, ɵb as b, ɵc as c, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as detectChanges, ɵe as e, ɵs as s, ɵt as t, ɵv as v} from '@angular/core';
+import {ComponentDef} from '@angular/core/src/render3/definition_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();
+      }
+      cR(2);
+      {
+        for (let row of ctx.data) {
+          let cm1 = V(1);
+          {
+            if (cm1) {
+              E(0, 'tr');
+              C(1);
+              c();
+              e();
+            }
+            cR(1);
+            {
+              for (let cell of row) {
+                let cm2 = V(2);
+                {
+                  if (cm2) {
+                    E(0, 'td');
+                    { T(1); }
+                    e();
+                  }
+                  s(0, 'background-color', b(cell.row % 2 ? '' : 'grey'));
+                  t(1, b(cell.value));
+                }
+                v();
+              }
+            }
+            cr();
+          }
+          v();
+        }
+      }
+      cr();
+    },
+    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);
+}
diff --git a/modules/benchmarks/src/tree/iv/index.html b/modules/benchmarks/src/tree/iv/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>IV Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="detectChanges">detectChanges</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+    <button id="detectChangesProfile">profile detectChanges</button>
+  </p>
+
+  <div>
+    Change detection runs:<span id="numberOfChecks"></span>
+  </div>
+  <div id="root"></div>
+
+  <script type="text/javascript" src="tree.js"></script>
+</body>
+</html>