honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf(ivy): add a micro benchmark for style and class bindings (#32401) 

This patch introduces a new micro benchmark that performance tests
against style and class bindings in Ivy running together on the same
element.

PR Close #32401
This commit is contained in:
Matias Niemelä 2019-08-29 12:26:50 -04:00
parent 1537791f06
commit df8e6750a1
3 changed files with 130 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/test/render3/perf/BUILD.bazel
View File

@ -51,3 +51,11 @@ ng_rollup_bundle(
":perf_lib",
],
)
ng_rollup_bundle(
name = "style_and_class_bindings",
entry_point = ":style_and_class_bindings/index.ts",
deps = [
":perf_lib",
],
)

6
packages/core/test/render3/perf/noop_renderer.ts
View File

@ -37,8 +37,8 @@ export class NoopRenderer implements ProceduralRenderer3 {
removeAttribute(el: RElement, name: string, namespace?: string|null|undefined): void {
throw new Error('Method not implemented.');
}
addClass(el: RElement, name: string): void { throw new Error('Method not implemented.'); }
removeClass(el: RElement, name: string): void { throw new Error('Method not implemented.'); }
addClass(el: RElement, name: string): void {}
removeClass(el: RElement, name: string): void {}
setStyle(el: RElement, style: string, value: any, flags?: RendererStyleFlags3|undefined): void {}
removeStyle(el: RElement, style: string, flags?: RendererStyleFlags3|undefined): void {}
setProperty(el: RElement, name: string, value: any): void {}
@ -54,4 +54,4 @@ export class NoopRendererFactory implements RendererFactory3 {
createRenderer(hostElement: RElement|null, rendererType: null): Renderer3 {
return new NoopRenderer();
}
}
}

119
packages/core/test/render3/perf/style_and_class_bindings/index.ts Normal file
View File

@ -0,0 +1,119 @@
/**
* @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 {ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element';
import {ɵɵselect} from '../../../../src/render3/instructions/select';
import {refreshView} from '../../../../src/render3/instructions/shared';
import {RenderFlags} from '../../../../src/render3/interfaces/definition';
import {TVIEW} from '../../../../src/render3/interfaces/view';
import {AttributeMarker} from '../../../../src/render3/interfaces/node';
import {ɵɵstyleProp, ɵɵclassProp, ɵɵstyling, ɵɵstylingApply} from '../../../../src/render3/styling_next/instructions';
import {setupRootViewWithEmbeddedViews} from '../setup';
`<ng-template>
<div class="list">
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'0px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'100px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'200px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'300px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'400px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'500px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'600px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'700px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'800px'"></div>
<div class="item" style="width:50px" [class.scale]="true" [style.width]="'900px'"></div>
</div>
</ng-template>`;
function testTemplate(rf: RenderFlags, ctx: any) {
if (rf & 1) {
ɵɵelementStart(0, 'div', [AttributeMarker.Classes, 'list']);
ɵɵelementStart(1, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(2, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(3, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(4, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(5, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(6, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(7, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(8, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(9, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementStart(10, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
ɵɵstyling();
ɵɵelementEnd();
ɵɵelementEnd();
}
if (rf & 2) {
ɵɵselect(1);
ɵɵstyleProp('width', '0px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(2);
ɵɵstyleProp('width', '100px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(3);
ɵɵstyleProp('width', '200px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(4);
ɵɵstyleProp('width', '300px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(5);
ɵɵstyleProp('width', '400px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(6);
ɵɵstyleProp('width', '500px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(7);
ɵɵstyleProp('width', '600px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(8);
ɵɵstyleProp('width', '700px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(9);
ɵɵstyleProp('width', '800px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
ɵɵselect(10);
ɵɵstyleProp('width', '900px');
ɵɵclassProp('scale', true);
ɵɵstylingApply();
}
}
const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000);
const rootTView = rootLView[TVIEW];
// run change detection in the update mode
console.profile('update');
for (let i = 0; i < 5000; i++) {
refreshView(rootLView, rootTView, null, null);
}
console.profileEnd();