Question

我对Angular 1.x有一个性能问题。使用函数表达式与过滤器来获取基于键的值是否有任何性能优势？让我用例子来解释。

我目前有一个复杂的角度应用程序，其中有许多过滤器用于获取基于对象键的值。我的数据中有很多键/ ID引用，所以我使用过滤器来获取基于键的字段值。

E.g. {{ ID123 | getField:'object':'field'}}

然后，自定义过滤器将执行异步调用（到DB）以获取我根据键指定的对象名称（ID123）并返回我指定的字段（而不是仅显示键）。

我目前正在进行一些性能清理工作，并且我已经阅读了很多关于避免使用过滤器的内容，因为它们会影响性能。我正在做的一件事是使用一次性绑定{{::ID123 | getField:'object':'field'}}但在某些情况下我不能这样做（因为我需要更新的值）。

然后我在查看函数表达式而不是自定义过滤器，例如{{getField(ID123,'object','field')}}.但我不确定它是否会获得任何绩效优惠。

您可以看到我的plunker示例，我将两者进行比较。

会有任何性能优势吗？还有一种方法可以测试或测试两者之间的差异吗？

由于

Answer 1

简短回答：过滤器更好，只要它是幂等的（即相同的输入始终返回相同的输出）并且输入不是对象。

答案很长：

如果使用函数，它将在每个摘要周期中调用，因为Angular必须检查输出是否相同。这意味着在显示的数据“结算”之前会多次调用它。

如果使用过滤器并且输入不是对象，则只有在输入发生变化时才会执行，因为Angular假定过滤器是幂等的，除非它们的$stateful属性设置为true 。对象是一个例外，因为检查对象的深度属性是否发生变化是很昂贵的，因此Angular会在每个摘要周期中执行过滤器，使其与函数相同。

小心创建不幂等的自定义过滤器，Angular会认为它们是正确的，而不是正确更新显示的数据。如果您必须创建一个，请将其标记为$stateful。

<强>来源

这是过滤器的Angular文档（“执行过滤器时”和“有状态过滤器”部分）： https://docs.angularjs.org/guide/filter