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

perf(ivy): add more styling use-cases to benchmarks (#34923) 

New benchmarks focus on style bindings (style and ngStyle).

PR Close #34923
This commit is contained in:
Pawel Kozlowski 2020-01-23 16:45:35 +01:00 committed by Andrew Kushnir
parent 0223aa6121
commit 31e9dda2c8
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/benchmarks/src/styling/ng2/index.html
View File

@ -21,6 +21,12 @@
<option value="6">(6) class="foo" [ngStyle]="{width: 10px}" [style.background-color]="exp" (Sierpinski's triangle) <option value="6">(6) class="foo" [ngStyle]="{width: 10px}" [style.background-color]="exp" (Sierpinski's triangle)
</option> </option>
<option value="7">(7) style="color: red" (static styling)</option> <option value="7">(7) style="color: red" (static styling)</option>
<option value="8">(8) [style.width.px]="widthExp" [style.color]="exp" (style property bindings)
</option>
<option value="9">(9) style="width: 10px" [style.color]="exp" ((mix of static and class property bindings)
</option>
<option value="10">(10) [ngStyle]="{width.px: widthExp, color: exp}" (ngStyle with units)
</option>
</select> </select>
<button id="create">create</button> <button id="create">create</button>

5
modules/benchmarks/src/styling/ng2/styling.ts
View File

@ -20,9 +20,12 @@ import {BrowserModule} from '@angular/platform-browser';
<ng-template #t5><button class="foo" [ngClass]="{bar: exp ==='bar'}"></button></ng-template> <ng-template #t5><button class="foo" [ngClass]="{bar: exp ==='bar'}"></button></ng-template>
<ng-template #t6><button class="foo" [ngStyle]="staticStyle" [style.background-color]="exp"></button></ng-template> <ng-template #t6><button class="foo" [ngStyle]="staticStyle" [style.background-color]="exp"></button></ng-template>
<ng-template #t7><button style="color: red"></button></ng-template> <ng-template #t7><button style="color: red"></button></ng-template>
<ng-template #t8><button [style.width.px]="exp ==='bar' ? 10 : 20" [style.color]="exp"></button></ng-template>
<ng-template #t9><button style="width: 10px" [style.color]="exp"></button></ng-template>
<ng-template #t10><button [ngStyle]="{'width.px': exp ==='bar' ? 10 : 20, color: exp}"></button></ng-template>
<div> <div>
<ng-template ngFor [ngForOf]="data" [ngForTemplate]="getTplRef(t0, t1, t2, t3, t4, t5, t6, t7)"></ng-template> <ng-template ngFor [ngForOf]="data" [ngForTemplate]="getTplRef(t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, t10)"></ng-template>
</div> </div>
` `
}) })

11
modules/benchmarks/src/styling/styling_perf.spec.ts
View File

@ -12,12 +12,17 @@ import {runBenchmark} from '../../../e2e_util/perf_util';
/** List of possible scenarios that should be tested. */ /** List of possible scenarios that should be tested. */
const SCENARIOS = [ const SCENARIOS = [
{optionIndex: 0, id: 'no_styling_involved'}, {optionIndex: 1, id: 'static_class'}, {optionIndex: 0, id: 'no_styling_involved'},
{optionIndex: 2, id: 'static_class_with_interpolation'}, {optionIndex: 3, id: 'class_binding'}, {optionIndex: 1, id: 'static_class'},
{optionIndex: 2, id: 'static_class_with_interpolation'},
{optionIndex: 3, id: 'class_binding'},
{optionIndex: 4, id: 'static_class_and_class_binding'}, {optionIndex: 4, id: 'static_class_and_class_binding'},
{optionIndex: 5, id: 'static_class_and_ngclass_binding'}, {optionIndex: 5, id: 'static_class_and_ngclass_binding'},
{optionIndex: 6, id: 'static_class_and_ngstyle_binding_and_style_binding'}, {optionIndex: 6, id: 'static_class_and_ngstyle_binding_and_style_binding'},
{optionIndex: 7, id: 'static_style'} {optionIndex: 7, id: 'static_style'},
{optionIndex: 8, id: 'style_property_bindings'},
{optionIndex: 9, id: 'static_style_and_property_binding'},
{optionIndex: 10, id: 'ng_style_with_units'},
]; ];
describe('styling benchmark spec', () => { describe('styling benchmark spec', () => {