javascript - Angular 性能 - 过滤器与函数表达式

Question

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

我目前有一个复杂的 Angular 应用程序，其中包含许多用于获取基于对象键的值的过滤器。我的数据中有很多键/ID 引用，因此我使用过滤器根据键获取字段值。

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

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

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

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

你可以在我比较两者的地方看到我的 plunker 示例。

https://plnkr.co/edit/hlL2LSOGjq5HsImUyqyu?p=preview

会有任何性能优势吗？还有没有办法测试或基准测试两者之间的差异？

谢谢

Answer 1

简答:过滤器最好是幂等的(即相同的输入总是返回相同的输出)并且输入不是对象。

---

长答案:

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

如果你使用过滤器并且输入不是对象，它只会在输入发生变化时执行，因为 Angular 假定过滤器是幂等的，除非它们的 $stateful 属性设置为 真。对象是一个异常(exception)，因为检查对象的深层属性是否发生更改的成本很高，因此 Angular 在每个摘要循环中执行过滤器，使其与函数相同。

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

---

来源

这个问题是相关的，并为我指明了正确的方向:
Custom filter vs filter function in controller performance comparison

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