Skip to content

Commit

Permalink
perf(benchmarks): update ng2-switch to match ng2
Browse files Browse the repository at this point in the history
- use the ~same template layout (text nodes),
- use trackBy

both benchmark now show about the same perfs.
  • Loading branch information
vicb authored and IgorMinar committed Oct 13, 2016
1 parent fdf4309 commit 606e518
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 10 deletions.
9 changes: 7 additions & 2 deletions modules/benchmarks/src/largetable/ng2/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@ import {TableCell, emptyTable} from '../util';

@Component({
selector: 'largetable',
template:
`<table><tbody><tr *ngFor="let row of data; trackBy: trackByIndex"><td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">{{cell.value}}</td></tr></tbody></table>`
template: `<table><tbody>
<tr *ngFor="let row of data; trackBy: trackByIndex">
<td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">
{{cell.value}}
</td>
</tr>
</tbody></table>`,
})
export class TableComponent {
@Input()
Expand Down
16 changes: 8 additions & 8 deletions modules/benchmarks/src/largetable/ng2_switch/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ import {TableCell, emptyTable} from '../util';
@Component({
selector: 'largetable',
template: `<table><tbody>
<tr *ngFor="let row of data">
<template ngFor [ngForOf]="row" let-cell>
<ng-container [ngSwitch]="cell.row % 2">
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td>
<td *ngSwitchDefault>{{cell.value}}</td>
</ng-container>
</template>
</tr></tbody></table>`
<tr *ngFor="let row of data; trackBy: trackByIndex">
<template ngFor [ngForOf]="row" [ngForTrackBy]="trackByIndex" let-cell><ng-container [ngSwitch]="cell.row % 2">
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td><td *ngSwitchDefault>{{cell.value}}</td>
</ng-container></template>
</tr>
</tbody></table>`
})
export class TableComponent {
@Input()
data: TableCell[][] = emptyTable;

trackByIndex(index: number, item: any) { return index; }
}

@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
Expand Down

0 comments on commit 606e518

Please sign in to comment.