Skip to content

Commit

Permalink
test(ivy): clean up class_binding perf tests for readability (#33413)
Browse files Browse the repository at this point in the history 
PR Close #33413
  • Loading branch information
@mhevery @AndrewKushnir
mhevery authored and AndrewKushnir committed Oct 25, 2019
1 parent 26f44c0 commit 7a280b1
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 129 deletions.
318 changes: 190 additions & 128 deletions packages/core/test/render3/perf/class_binding/index.ts
View file
Expand Up @@ -7,159 +7,221 @@
*/
import {ɵɵproperty} from '@angular/core/src/core';
import {AttributeMarker, TAttributes} from '@angular/core/src/render3/interfaces/node';

import {ɵɵelement} from '../../../../src/render3/instructions/element';
import {ɵɵclassMap, ɵɵclassProp} from '../../../../src/render3/instructions/styling';
import {ComponentTemplate, RenderFlags} from '../../../../src/render3/interfaces/definition';
import {createBenchmark} from '../micro_bench';
import {Benchmark, createBenchmark} from '../micro_bench';
import {setupTestHarness} from '../setup';

const PROFILE_CREATE = true;
const PROFILE_UPDATE = true;
const PROFILE_NOOP = true;


function benchmark(
name: string, template: ComponentTemplate<any>, baselineTemplate: ComponentTemplate<any>) {
const ivyHarness = setupTestHarness(template, 1, 1, 1000, context, consts);
const baseHarness = setupTestHarness(baselineTemplate, 1, 1, 1000, context, consts);

if (PROFILE_CREATE) {
const benchmark = createBenchmark('class binding[create]: ' + name);
benchmarks.push(benchmark);
const ivyProfile = benchmark('styling');
console.profile(benchmark.name + ':' + ivyProfile.name);
while (ivyProfile()) {
ivyHarness.createEmbeddedLView();
}
console.profileEnd();

const baseProfile = benchmark('base');
console.profile(benchmark.name + ':' + baseProfile.name);
while (baseProfile()) {
baseHarness.createEmbeddedLView();
}
console.profileEnd();
}

if (PROFILE_UPDATE) {
const benchmark = createBenchmark('class binding[update]: ' + name);
benchmarks.push(benchmark);
const ivyProfile = benchmark('styling');
console.profile(benchmark.name + ':' + ivyProfile.name);
while (ivyProfile()) {
toggle = !toggle;
ivyHarness.detectChanges();
}
console.profileEnd();

const baseProfile = benchmark('base');
console.profile(benchmark.name + ':' + baseProfile.name);
while (baseProfile()) {
toggle = !toggle;
baseHarness.detectChanges();
}
console.profileEnd();
}


if (PROFILE_NOOP) {
const benchmark = createBenchmark('class binding[noop]: ' + name);
benchmarks.push(benchmark);
const ivyProfile = benchmark('styling');
console.profile(benchmark.name + ':' + ivyProfile.name);
while (ivyProfile()) {
ivyHarness.detectChanges();
}
console.profileEnd();

const baseProfile = benchmark('base');
console.profile(benchmark.name + ':' + baseProfile.name);
while (baseProfile()) {
baseHarness.detectChanges();
}
console.profileEnd();
}
}

const CLASSES_1_A = 'one';
const CLASSES_1_B = CLASSES_1_A.toUpperCase();
const CLASSES_2_A = 'one two';
const CLASSES_2_B = CLASSES_2_A.toUpperCase();
const CLASSES_10_A = 'one two three four five six seven eight nine ten';
const CLASSES_10_B = CLASSES_10_A.toUpperCase();
let toggleClasses = true;
const A_1 = 'one';
const B_1 = A_1.toUpperCase();
const A_10 = 'one two three four five six seven eight nine ten';
const B_10 = A_10.toUpperCase();
let toggle = true;

const consts: TAttributes[] = [
[AttributeMarker.Classes, 'A', 'B'] // 0
];
const context: any = {};
const createClassBindingBenchmark = createBenchmark('class binding: create:');
const updateClassBindingBenchmark = createBenchmark('class binding: update:');
const noopClassBindingBenchmark = createBenchmark('class binding: noop:');
function benchmark(name: string, template: ComponentTemplate<any>) {
const harness = setupTestHarness(template, 1, 1, 1000, context, consts);

const createProfile = createClassBindingBenchmark(name);
console.profile('create: ' + name);
while (createProfile()) {
harness.createEmbeddedLView();
}
console.profileEnd();


const updateProfile = updateClassBindingBenchmark(name);
console.profile('update: ' + name);
while (updateProfile()) {
toggleClasses = !toggleClasses;
harness.detectChanges();
}
console.profileEnd();

const noopProfile = noopClassBindingBenchmark(name);
console.profile('nop: ' + name);
while (noopProfile()) {
harness.detectChanges();
}
console.profileEnd();
}

`<div [class]="toggleClasses ? CLASSES_1_A : CLASSES_1_B">`;
benchmark(`[class]="CLASSES_1"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_1_A : CLASSES_1_B);
}
});


`<div [class]="toggleClasses ? CLASSES_2_A : CLASSES_2_B">`;
benchmark(`[class]="CLASSES_2"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_2_A : CLASSES_2_B);
}
});


`<div [class]="toggleClasses ? CLASSES_10_A : CLASSES_10_B">`;
benchmark(`[class]="CLASSES_10"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_10_A : CLASSES_10_B);
}
});
const benchmarks: Benchmark[] = [];

benchmark(
`<div class="A B">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 1);
}
});

`<div class="A B">`;
benchmark(`class="A B"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
}
});

benchmark(
`<div [class]="toggle ? A_1 : B_1">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵclassMap(toggle ? A_1 : B_1);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵproperty('className', toggle ? A_1 : B_1);
}
});

`<div class="A B"
[class]="toggleClasses ? CLASSES_1_A : CLASSES_1_B">`;
benchmark(`class="A B" [class]="CLASSES_1"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_1_A : CLASSES_1_B);
}
});
benchmark(
`<div [class]="toggle ? A_10 : B_10">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵclassMap(toggle ? A_10 : B_10);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵproperty('className', toggle ? A_10 : B_10);
}
});

benchmark(
`<div [class]="toggle ? A_1 : B_1">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵclassMap(toggle ? A_1 : B_1);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵproperty('className', toggle ? A_1 : B_1);
}
});

`<div class="A B"
[class]="toggleClasses ? CLASSES_10_A : CLASSES_10_B">`;
benchmark(`class="A B" [class]="CLASSES_10"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_10_A : CLASSES_10_B);
}
});

`<div class="A B"
[class]="toggleClasses ? CLASSES_1_A : CLASSES_1_B"
[class.foo]="toggleClasses">`;
benchmark(`class="A B" [class]="CLASSES_1" [class.foo]="exp"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_1_A : CLASSES_1_B);
ɵɵclassProp('foo', toggleClasses);
}
});
benchmark(
`<div class="A B" [class]="toggle ? A_1 : B_1">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
ɵɵclassMap(toggle ? A_1 : B_1);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 1);
}
if (rf & 2) {
ɵɵproperty('className', toggle ? A_1 : B_1);
}
});

`<div class="A B"
[class]="toggleClasses ? CLASSES_10_A : CLASSES_10_B"
[class.foo]="toggleClasses">`;
benchmark(
`class="A B" [class]="CLASSES_10" [class.foo]="exp"`, function(rf: RenderFlags, ctx: any) {
`<div class="A B" [class]="toggle ? A_10 : B_10">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
ɵɵclassMap(toggleClasses ? CLASSES_10_A : CLASSES_10_B);
ɵɵclassProp('foo', toggleClasses);
ɵɵclassMap(toggle ? A_10 : B_10);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 1);
}
if (rf & 2) {
ɵɵproperty('className', toggle ? A_10 : B_10);
}
});

benchmark(
`<div class="A B" [class]="toggle ? A_1 : B_1" [class.foo]="toggle">`,
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 0);
}
if (rf & 2) {
ɵɵclassMap(toggle ? A_1 : B_1);
ɵɵclassProp('foo', toggle);
}
},
function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div', 1);
}
if (rf & 2) {
ɵɵproperty('className', toggle ? A_1 + 'foo' : B_1);
}
});

`<div [className]="toggleClasses ? CLASSES_10_A : CLASSES_10_B">`;
benchmark(`[className]="CLASSES_10"`, function(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelement(0, 'div');
}
if (rf & 2) {
ɵɵproperty('className', toggleClasses ? CLASSES_10_A : CLASSES_10_B);
}
});

createClassBindingBenchmark.report();
updateClassBindingBenchmark.report();
noopClassBindingBenchmark.report();
benchmarks.forEach(b => b.report());
2 changes: 1 addition & 1 deletion packages/core/test/render3/perf/micro_bench.ts
View file
Expand Up @@ -43,7 +43,7 @@ export function createBenchmark(benchmarkName: string): Benchmark {
iterationCounter = profile.iterationCount;
runAgain = true;
// tslint:disable-next-line:no-console
console.log(profileName, '...');
console.log(benchmarkName, profileName, '...');
} else {
profile.sampleCount++;
// we came to an end of a sample, compute the time.
Expand Down

0 comments on commit 7a280b1

Please sign in to comment.