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

Posted 2023-02-22

【中文标题】ngStyle 与指令上调用函数之间的性能

【英文标题】：Performance between calling function on ngStyle vs directive

【发布时间】：2019-10-20 13:44:44

【问题描述】：

主要区别是什么

<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 次）。我目前正在将样式计算更改为指令，因为我认为它更干净。

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

另一个问题，是否有解释此类事情的文档/教程/书籍？

谢谢

【问题讨论】：

为什么不使用 CSS？能否展示一下样式字符串如何计算的实现逻辑？

我在示例中使用了字符串，它不是字符串。它是 4 个 div 的组合，它们依赖于许多属性。基于产品、状态、客户端等属性。因此，只有 CSS 可能很难，因为样式颜色存储在枚举/数据库中，而且它们的列表很长。 @Saksham

【参考方案1】：

必须尽可能避免在属性绑定中调用函数，这是因为在每个角度变化检测周期都会调用该函数，即使在组件视图上更改了不相关的属性。由于这个原因，绑定到 [ngStyle] 的“getStyle()”方法被调用了很多次 [甚至比预期的还要多]。 您的第二种代码方法 [指令] 一比功能一要好得多。在指令方法中，当您的有界输入 PROPERTY 发生更改时，只有您的基础指令的输入属性更改相关代码才会被执行。您还可以通过使用 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

【讨论】：

所以我认为调用“get”方法有同样的问题，对吧？使用“get”函数的结果来呈现一些数据的正确方法是什么。谢谢

@RafaelAndrade 最终又是一个函数。而 get 属性调用的性能取决于它返回的内容。如果它返回一些不可变对象 [未更改的对象]，则 angular 不会重新渲染任何内容。如果 get 返回的东西发生了变化，那么它会重新渲染。如果我们有您的 getter 和模板的代码 sn-p，我们可以提供一种“更好”的方式。底线是 - 如果有界属性发生变化，则重新渲染 Angular [即参考或价值]

我会尝试创建 sn-p 后者并发送到这里。