33
loading...
This website collects cookies to deliver better user experience
trackBy
on my ngFor
... to the exclusion of everything else in the talk. He even went as far as to push a pull-request on my talk repository to add the change.trackBy
.trackBy
. Here are the first set of tests I ran that showed some hopeful results.index
.Type | WITH | WITHOUT |
---|---|---|
data 01 | 6.17 | 6.77 |
data 02 | 6.14 | 6.29 |
data 03 | 6.31 | 6.28 |
data 04 | 6.34 | 6.33 |
data 05 | 6.23 | 6.06 |
data 06 | 6.14 | 6.31 |
data 07 | 6.14 | 6.21 |
data 08 | 6.46 | 6.22 |
data 09 | 6.29 | 6.09 |
data 10 | 6.38 | 6.37 |
data 11 | 6.22 | 6.22 |
data 12 | 6.38 | 6.43 |
data 13 | 6.23 | 6.19 |
data 14 | 6.22 | 6.15 |
data 15 | 6.38 | 6.33 |
data 16 | 6.16 | 6.45 |
data 17 | 6.32 | 6.19 |
data 18 | 6.21 | 6.18 |
data 19 | 6.25 | 6.36 |
data 20 | 6.16 | 6.17 |
data 21 | 6.46 | 6.03 |
data 22 | 6.22 | 6.12 |
data 23 | 6.30 | 6.44 |
data 24 | 6.23 | 6.67 |
data 25 | 6.20 | 5.98 |
RESULTS | 6.26 | 6.27 |
trackBy
would only be needed if there were some significant performance need.trackBy
was built as a means to allow for faster screen updates when the data changed.index
.trackBy
and in the other, we are not using it.iterations: number = 1000;
dataPoints: number = 100000;
data: Array<any> = [];
startTime: Date;
constructor() {
this.startTime = new Date();
this.init();
}
init = (): void => {
for (let i = 0, len = this.dataPoints; i < len; i++) {
const datum: any = { index: i, identifier: this.makeid() };
this.data.push(datum);
}
};
makeid = (length: number = 50): string => {
var result: string = '';
var characters: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
};
getRandomInt = (min: number, max: number) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
data: Array<any> = [];
constructor(
private dataService: DataService
) { }
ngOnInit(): void {
this.data = this.dataService.data;
setTimeout(this.initiateReorganize.bind(this), 500);
}
ngAfterViewChecked(): void {
const now: Date = new Date();
const difference: number = now.getTime() - this.dataService.startTime.getTime();
console.log('difference: ', difference);
}
identify = (index: number, item: any): string => item.index;
initiateReorganize = (): void => {
const min: number = 0;
const max: number = this.dataService.iterations - 1;
for (let i = 0, len = this.dataService.iterations; i < len; i++) {
const a: number = this.dataService.getRandomInt(min, max);
const b: number = this.dataService.getRandomInt(min, max);
[this.data[a], this.data[b]] = [this.data[b], this.data[a]];
}
};
without.component.ts
does not contain an identify
function.<div *ngFor="let item of data; trackBy: identify">
{{ item.identifier }}
</div>
trackBy: identify
in the without.component.html
, as well.Type | WITH | WITHOUT |
---|---|---|
Data 01 | 1700 | 1654 |
Data 02 | 1647 | 1669 |
Data 03 | 1634 | 1695 |
Data 04 | 1639 | 1652 |
Data 05 | 1753 | 1641 |
Data 06 | 1624 | 1693 |
Data 07 | 1627 | 1632 |
Data 08 | 1676 | 1637 |
Data 09 | 1638 | 1707 |
Data 10 | 1631 | 1630 |
Data 11 | 1625 | 1652 |
Data 12 | 1727 | 1648 |
Data 13 | 1633 | 1768 |
Data 14 | 1636 | 1641 |
Data 15 | 1684 | 1712 |
Data 16 | 1634 | 1667 |
Data 17 | 1690 | 1633 |
Data 18 | 1631 | 1730 |
Data 19 | 1624 | 1631 |
Data 20 | 1741 | 1640 |
Data 21 | 1635 | 1675 |
Data 22 | 1631 | 1641 |
Data 23 | 1690 | 1663 |
Data 24 | 1625 | 1652 |
Data 25 | 1688 | 1651 |
Results | 1658.52 | 1664.56 |
trackBy
would only be needed if there were some significant performance need that cropped up.