ngStyle 与指令调用函数之间的性能

Question

的主要区别是什么

<p [ngStyle]="getStyle()"> 
// getStyle returns a string like "color:blue" and some other attributes

至

<p appStyle [status]="myStatus">
//directive get myStatus as a input and calculate the style of the tag

我正在维护的应用程序在 ngStyle 上调用这些函数 getStyle 很多次（大概 5k 次）。我目前正在将样式计算更改为指令，因为我认为它更干净。

但我不知道它对性能的影响有多大。我该如何测量？

另一个问题，有没有document/tutorial/book这样解释的？

谢谢

Answer 1

必须尽可能避免属性绑定中的函数调用，这是因为即使不相关的属性发生更改，每个 angular 更改检测周期都会调用该函数在组件视图上。由于这个原因，绑定到 [ngStyle] 的 "getStyle()" 方法被调用了很多次 [甚至比预期的还要多]。您的第二种代码方法 [指令] 比函数一种要好得多。在指令方法中，当您的有界输入属性发生更改时，只会执行底层指令的输入属性更改相关代码。您还可以使用 ChangeDetectionStrtegy.OnPush [https://blog.angular-university.io/onpush-change-detection-how-it-works/] 来提高性能。此外，如果您将数据从数据转换为表示，则应使用 Angular 管道。因为管道被记忆了[即仅当输入更改时才计算管道。

查看以下文章 -

https://blog.angularindepth.com/tiny-angular-pipe-to-make-any-function-memoizable-f6c8fa917f2f https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068

ngStyle 与指令调用函数之间的性能

Performance between calling function on ngStyle vs directive

angular-directive

angular

angular5