效能比較 (change)="function()"和.valueChanges.subscribe及*ngIf="function()"

就是…
最近寫了一個很多輸入欄位的表單專案

然後整天看到
[Violation] ‘XXXX’ handler took OOOms
之類的警告

而且出了Chrome平台後(像是IE)
網頁就常常出現卡頓的狀況

前陣子因為formgroup沒有解除subscribe造成BUG
所以發現自己可能有許多元件都是默默地在佔用監聽資源
為了要改進效能

所以打算重新翻修整理專案
專案的變動偵測大概都用以下幾種方式寫的
// 監聽formgroup欄位是否變動
.valueChanges.subscribe

// 常用於控制是否顯示和隱藏,開發時有用到一開始產生但是根據條件再隱藏起來或消失
*ngIf=“function()”

// 也是控制顯示隱藏,但這個用參數控制
[fxSHow] / [fxHide] = “參數”

// 朋友建議這樣寫可以比較不吃資源
(change)=“function()”

想詢問這四種寫法哪種如果沒有解除監聽最吃資源
感覺會一直消耗資源或是偵測的資源的就是以上這幾類

想詢問有甚麼比較節省效能的寫法
或是那些該改寫成哪種
或是個別寫法運用的時機點

感謝 :sob:

昂貴會在*ngIf=“function()”千萬別這麼使用

這個效能會非常差,每次zone檢查的時候都會重新執行方法

其他差別不大,都是單次計算

1個讚

https://angular.io/guide/template-syntax#expression-guidelines

1個讚

@YouShun

有…

這個真的超吃效能
今天處理事情在裡面插console.log

才發現這寫法會一直狂呼叫…
真的是吃效能的怪獸…
感謝 :sob:

所以正確寫法是

設定一個變數
假設isShowAAA
設定
然後用function去控制這isShowAAA的true / false
*ngIf = " isShowAAA "

這樣寫對嗎? :thinking:

以及想問
[fxShow]=function()
[fxHide]=function()
這樣也是會和*ngIf 一樣狂吃效能嗎?

是的,所有在template的function都會不斷被執行,裡面不可以有太多計算

1個讚