From b00189bb9a9710288fb241d2b46f27096a3114cb Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Tue, 22 Oct 2019 20:16:28 -0700 Subject: [PATCH] test(core): support running performance benchmarks in browser (#33340) PR Close #33340 --- .../core/test/render3/perf/micro_bench.ts | 4 ++- .../test/render3/perf/profile_in_browser.html | 14 ++++++++++ packages/core/test/render3/perf/setup.ts | 28 +++++++++---------- 3 files changed, 31 insertions(+), 15 deletions(-) create mode 100644 packages/core/test/render3/perf/profile_in_browser.html diff --git a/packages/core/test/render3/perf/micro_bench.ts b/packages/core/test/render3/perf/micro_bench.ts index 001add0785..d65506bdae 100644 --- a/packages/core/test/render3/perf/micro_bench.ts +++ b/packages/core/test/render3/perf/micro_bench.ts @@ -5,7 +5,9 @@ * 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 */ -const performance = require('perf_hooks').performance; +const performance = typeof require === 'undefined' ? // + window.performance : // We are in browser + require('perf_hooks').performance; // We are in node // Higher number here makes it more likely that we are more sure of the result. const MIN_SAMPLE_COUNT_NO_IMPROVEMENT = 500; diff --git a/packages/core/test/render3/perf/profile_in_browser.html b/packages/core/test/render3/perf/profile_in_browser.html new file mode 100644 index 0000000000..6b723bf11a --- /dev/null +++ b/packages/core/test/render3/perf/profile_in_browser.html @@ -0,0 +1,14 @@ + + + +
    +
  1. Build the benchmark using yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.es2015.js --define=compile=aot
    2. +
  2. Open this file using the file:// protocol and add ?benchmark=BENCHMARK to the URL.
    3. +
  3. Open debug console for details
    4. +
+ + \ No newline at end of file diff --git a/packages/core/test/render3/perf/setup.ts b/packages/core/test/render3/perf/setup.ts index b9eac8431d..009abb4aa3 100644 --- a/packages/core/test/render3/perf/setup.ts +++ b/packages/core/test/render3/perf/setup.ts @@ -8,17 +8,20 @@ import {addToViewTree, createLContainer, createLView, createTNode, createTView, getOrCreateTNode, refreshView, renderView} from '../../../src/render3/instructions/shared'; import {ComponentTemplate} from '../../../src/render3/interfaces/definition'; import {TAttributes, TNodeType, TViewNode} from '../../../src/render3/interfaces/node'; -import {RComment} from '../../../src/render3/interfaces/renderer'; -import {LView, LViewFlags, RENDERER, RENDERER_FACTORY, TView} from '../../../src/render3/interfaces/view'; +import {RendererFactory3, domRendererFactory3} from '../../../src/render3/interfaces/renderer'; +import {LView, LViewFlags, TView} from '../../../src/render3/interfaces/view'; import {insertView} from '../../../src/render3/node_manipulation'; -import {NoopRenderer, NoopRendererFactory, WebWorkerRenderNode} from './noop_renderer'; +import {NoopRendererFactory} from './noop_renderer'; + +const isBrowser = typeof process === 'undefined'; +const rendererFactory: RendererFactory3 = isBrowser ? domRendererFactory3 : new NoopRendererFactory; +const renderer = rendererFactory.createRenderer(null, null); export function createAndRenderLView( parentLView: LView | null, tView: TView, hostTNode: TViewNode) { const embeddedLView = createLView( - parentLView, tView, {}, LViewFlags.CheckAlways, null, hostTNode, new NoopRendererFactory(), - new NoopRenderer()); + parentLView, tView, {}, LViewFlags.CheckAlways, null, hostTNode, rendererFactory, renderer); renderView(embeddedLView, tView, null); } @@ -43,22 +46,19 @@ export function setupTestHarness( // Create a root view with a container const hostTView = createTView(-1, null, 1, 0, null, null, null, null, consts); const tContainerNode = getOrCreateTNode(hostTView, null, 0, TNodeType.Container, null, null); + const hostNode = renderer.createElement('div'); const hostLView = createLView( - null, hostTView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, null, null, - new NoopRendererFactory(), new NoopRenderer()); - const mockRNode = new WebWorkerRenderNode(); - const lContainer = createLContainer( - mockRNode as RComment, hostLView, mockRNode as RComment, tContainerNode, true); + null, hostTView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, hostNode, null, + rendererFactory, renderer); + const mockRCommentNode = renderer.createComment(''); + const lContainer = + createLContainer(mockRCommentNode, hostLView, mockRCommentNode, tContainerNode, true); addToViewTree(hostLView, lContainer); - // run in the host view in creation mode to initialize TNode structures (first template pass) - renderView(hostLView, hostTView, null); // create test embedded views const embeddedTView = createTView(-1, templateFn, decls, vars, null, null, null, null, consts); const viewTNode = createTNode(hostTView, null, TNodeType.View, -1, null, null) as TViewNode; - const rendererFactory = hostLView[RENDERER_FACTORY]; - const renderer = hostLView[RENDERER]; function createEmbeddedLView(): LView { const embeddedLView = createLView(