Angular利用trackBy提升性能的方法
在Angular的模板中遍歷一個(gè)集合（collection）的時(shí)候你會(huì)這樣寫(xiě)：
<ul>
<li *ngFor="let item of collection">{{item.id}}</li>
</ul>
有時(shí)你會(huì)需要改變這個(gè)集合，比如從后端接口返回了新的數(shù)據(jù)。那么問(wèn)題來(lái)了，Angular不知道怎么跟蹤這個(gè)集合里面的項(xiàng)，不知道哪些該添加哪些該修改哪些該刪除。結(jié)果就是，Angular會(huì)把該集合里的項(xiàng)全部移除然后重新添加。就像這樣：
這樣做的弊端是會(huì)進(jìn)行大量的DOM操作，而DOM操作是非常消耗性能的。
那么解決方案是，為*ngFor添加一個(gè)trackBy函數(shù)，告訴Angular該怎么跟蹤集合的各項(xiàng)。trackBy函數(shù)需要兩個(gè)參數(shù)，第一個(gè)是當(dāng)前項(xiàng)的index，第二個(gè)是當(dāng)前項(xiàng)，并返回一個(gè)唯一的標(biāo)識(shí)，就像這樣：
import{ Component } from '@angular/core';
@Component({
selector: 'trackBy-test',
template: `
<ul><li *ngFor="let item of items; trackBy: trackByIndex">{{item.name}}</li></ul>
<button (click)="getItems()">Get Items</button>
`
})
export class TrackByCmp{
items: any[]=[];
constructor(){
this.items = [{name:'Tom'},{name:'Jerry'},{name:'Kitty'}];
}
getItems(){
this.items = [{name:'Tom'},{name:'Jerry'},{name:'Mac'},{name:'John'}];
}
trackByIndex(index, item){
return index;
}
}
這樣做之后，Angular就知道哪些項(xiàng)變動(dòng)了：
我們可以看到，DOM只重繪了修改和增加的項(xiàng)。而且，再次點(diǎn)擊按鈕是不會(huì)重繪的。但是在沒(méi)有添加trackBy函數(shù)的時(shí)候，重復(fù)點(diǎn)擊按鈕還是會(huì)觸發(fā)重繪的（可以回頭看第一個(gè)GIF）。
以上所述是小編給大家介紹的Angular利用trackBy提升性能的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- angularjs性能優(yōu)化的方法
- 再談Angular4 臟值檢測(cè)(性能優(yōu)化)
- 整理AngularJS框架使用過(guò)程當(dāng)中的一些性能優(yōu)化要點(diǎn)
- AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議
- 基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例
- 淺談Angular2 模塊懶加載的方法
- angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼
- Angular懶加載機(jī)制刷新后無(wú)法回退的快速解決方法
- Angular性能優(yōu)化之第三方組件和懶加載技術(shù)
相關(guān)文章
下面小編就為大家分享一篇angularJs 表格添加刪除修改查詢方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了AngularJS中isolate scope的用法,結(jié)合實(shí)例形式分析了isolate scope的幾種具體使用方式,需要的朋友可以參考下2016-11-11
Angular4學(xué)習(xí)教程之HTML屬性綁定的方法
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之HTML屬性綁定的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要為大家詳細(xì)介紹了angular分頁(yè)指令操作的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Angularjs的鍵盤(pán)事件的綁定的相關(guān)資料,這里提供了兩種方法，1.ng內(nèi)置指令，2.自定義指令，并進(jìn)行比較，需要的朋友可以參考下2017-07-07
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
本篇文章主要介紹了angular4中關(guān)于表單的校驗(yàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)?lái)一篇基于angular中的重要指令詳解($eval,$parse和$compile)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Angular中懶加載模塊初始化技術(shù)實(shí)例解析
這篇文章主要為大家介紹了Angular中懶加載模塊初始化技術(shù)實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了AngularJs指令2015-12-12