Question

我有一个用Angular6编写的Web应用程序。一切正常，但是我很好奇是否可以优化其性能。在我的HTML绑定中，有时使用函数调用，例如在mat-paginator中使用getDataSize()，对于某些值，我使用{{getValueOfEntity(...)}}。

每当我在这些方法中放入console.log并打开控制台时，就会开始获取无限日志。我想知道这是否正常，是否会降低性能，因为该函数会不断被调用。

您是否知道这是否是一个严重的问题，例如，由于这个原因，Angular必须不断更新DOM？如果是的话，还有更好的方法吗？

编辑：我很难记住我的烟斗。这是我当前的管道：

@Pipe({
  name: "attributevalue",
  pure: true,
})
export class AttributeValuePipe implements PipeTransform {

public transform(element: Entity, attribute: AttributeType | "DEFAULT"): string {
    return this.getAttributeValue(element, attribute);
}

public getAttributeValue(element: Entity, attribute: AttributeType | "DEFAULT") {
    if (attribute === "DEFAULT") {
        return "Error: Attribute is 'DEFAULT'";
    } else {
        for (const attr of element.attributeAssignments) {
            if (attr.typeId === attribute.id) {
                return attr.value;
            }
        }
        return undefined;
    }
}
}

有什么想法要放入备忘部分吗？

就这么简单吗？我不知道是否可以正常工作：

const memoize = require("lodash.memoize");
return memoize(this.getAttributeValue(element, attribute));

在转换函数中？

Answer 1

最好的方法是将“更改检测策略”更改为OnPush。

@Component({
    selector: '..',
    templateUrl: '...',
    styleUrls: ['...'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})

在这种情况下，仅当@Input绑定被更新时，您的组件才会更新绑定。

但是请记住：更改数组或对象时，每次更改数组或对象中的数据时，都必须创建新实例来更新@Input。更改检测将按链接而非值来比较此类类型。

或者您可以手动更新它，例如在服务器响应后：注入构造函数private cdr: ChangeDetectorRef并在需要更新视图this.cdr.markForCheck();时调用它

Answer 2

您应该尝试使用getter方法代替绑定到函数。例如：

getMyValue() { return 5 }

成为

get myValue() { return 5 }

，然后在HTML中将绑定从getMyValue()更改为myValue

看看是否可以减少通话次数。

关于纯函数的使用，您可能需要考虑使用lodash memoize。第一次调用该函数将对其进行处理，第二次-如果输入相同-它将返回已知的输出而不进行处理。

编辑RE：备忘录

不确定纯管道是否已在后台存储。一种检查方法是查看是否对同一输入执行了多次处理代码。

如果是，那么您可以这样做：

const myMemoFunc = _.memoize(function myFunc(element, attribute) {
  if (attribute === "DEFAULT") {
    return "Error: Attribute is 'DEFAULT'";
  } else {
    for (const attr of element.attributeAssignments) {
      if (attr.typeId === attribute.id) {
        return attr.value;
      }
    }
    return undefined;
  } 
})

return myMemoFunc(element, attribute)

沿线的东西：）

Angular6：具有变更周期的性能

2 个答案: