test(core): support running performance benchmarks in browser (#33340)

PR Close #33340
This commit is contained in:
Misko Hevery 2019-10-22 20:16:28 -07:00 committed by Andrew Kushnir
parent a42057d0f8
commit b00189bb9a
3 changed files with 31 additions and 15 deletions

View File

@ -5,7 +5,9 @@
* Use of this source code is governed by an MIT-style license that can be * 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 * 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. // Higher number here makes it more likely that we are more sure of the result.
const MIN_SAMPLE_COUNT_NO_IMPROVEMENT = 500; const MIN_SAMPLE_COUNT_NO_IMPROVEMENT = 500;

View File

@ -0,0 +1,14 @@
<html>
<script>
let BASE = location.toString().split('packages/core/test/render3/perf')[0]
let BENCHMARK = location.search.split('=')[1];
document.writeln('<' + 'script src="' + BASE + '/dist/bin/packages/core/test/render3/perf/' + BENCHMARK + '.min_debug.es2015.js"></' + 'script>');
</script>
<body>
<ol>
<li>Build the benchmark using <tt>yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.es2015.js --define=compile=aot</tt></li>
<li>Open this file using the <tt>file://</tt> protocol and add <tt>?benchmark=BENCHMARK</tt> to the URL.</li>
<li>Open debug console for details</li>
</ol>
</body>
</html>

View File

@ -8,17 +8,20 @@
import {addToViewTree, createLContainer, createLView, createTNode, createTView, getOrCreateTNode, refreshView, renderView} from '../../../src/render3/instructions/shared'; import {addToViewTree, createLContainer, createLView, createTNode, createTView, getOrCreateTNode, refreshView, renderView} from '../../../src/render3/instructions/shared';
import {ComponentTemplate} from '../../../src/render3/interfaces/definition'; import {ComponentTemplate} from '../../../src/render3/interfaces/definition';
import {TAttributes, TNodeType, TViewNode} from '../../../src/render3/interfaces/node'; import {TAttributes, TNodeType, TViewNode} from '../../../src/render3/interfaces/node';
import {RComment} from '../../../src/render3/interfaces/renderer'; import {RendererFactory3, domRendererFactory3} from '../../../src/render3/interfaces/renderer';
import {LView, LViewFlags, RENDERER, RENDERER_FACTORY, TView} from '../../../src/render3/interfaces/view'; import {LView, LViewFlags, TView} from '../../../src/render3/interfaces/view';
import {insertView} from '../../../src/render3/node_manipulation'; 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( export function createAndRenderLView(
parentLView: LView | null, tView: TView, hostTNode: TViewNode) { parentLView: LView | null, tView: TView, hostTNode: TViewNode) {
const embeddedLView = createLView( const embeddedLView = createLView(
parentLView, tView, {}, LViewFlags.CheckAlways, null, hostTNode, new NoopRendererFactory(), parentLView, tView, {}, LViewFlags.CheckAlways, null, hostTNode, rendererFactory, renderer);
new NoopRenderer());
renderView(embeddedLView, tView, null); renderView(embeddedLView, tView, null);
} }
@ -43,22 +46,19 @@ export function setupTestHarness(
// Create a root view with a container // Create a root view with a container
const hostTView = createTView(-1, null, 1, 0, null, null, null, null, consts); const hostTView = createTView(-1, null, 1, 0, null, null, null, null, consts);
const tContainerNode = getOrCreateTNode(hostTView, null, 0, TNodeType.Container, null, null); const tContainerNode = getOrCreateTNode(hostTView, null, 0, TNodeType.Container, null, null);
const hostNode = renderer.createElement('div');
const hostLView = createLView( const hostLView = createLView(
null, hostTView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, null, null, null, hostTView, {}, LViewFlags.CheckAlways | LViewFlags.IsRoot, hostNode, null,
new NoopRendererFactory(), new NoopRenderer()); rendererFactory, renderer);
const mockRNode = new WebWorkerRenderNode(); const mockRCommentNode = renderer.createComment('');
const lContainer = createLContainer( const lContainer =
mockRNode as RComment, hostLView, mockRNode as RComment, tContainerNode, true); createLContainer(mockRCommentNode, hostLView, mockRCommentNode, tContainerNode, true);
addToViewTree(hostLView, lContainer); 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 // create test embedded views
const embeddedTView = createTView(-1, templateFn, decls, vars, null, null, null, null, consts); 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 viewTNode = createTNode(hostTView, null, TNodeType.View, -1, null, null) as TViewNode;
const rendererFactory = hostLView[RENDERER_FACTORY];
const renderer = hostLView[RENDERER];
function createEmbeddedLView(): LView { function createEmbeddedLView(): LView {
const embeddedLView = createLView( const embeddedLView = createLView(