时间戳

首页 > 解决方案 > Angular 性能：DOM 事件导致不必要的函数调用

html - Angular 性能：DOM 事件导致不必要的函数调用

问题描述

我有一个带有 DOM 事件（输入）的输入元素的简单页面。HTML 页面还调用了一个函数，该函数仅通过 console.log 输出一些内容。现在当我打开页面时，它会显示日志，但是当我在输入字段中输入内容时，每次输入内容都会触发该功能..（实际上，当我输入字母时，它会 console.logs每次两次）

为什么会这样？如何预防？我读了一些关于 的东西changeDetection，但是还有其他解决方案吗？

HTML：

{{test()}}

<input class="input-msg" [value]="textValue" (input)="textValue = $event.target.value;">

.ts：

export class TestComponent implements OnInit {

  constructor() { 
  }

  test() {
    console.log('test message');
  }
}

预期行为：

在{{test()}}输入字段中输入内容时不应调用

标签： htmlangularperformance

解决方案

由于您在其中一种数据绑定语法中调用函数，因此每当 Angular 执行更改检测时，它都会调用此方法。

在函数之前，任何情况都是它返回的值。为了让 Angular 知道返回的值已经改变，Angular 必须运行它。

这与人们在这里提出的几个问题完全相同：

  1. Angular：防止 DomSanizer 更新 DOM 事件

  2. 角度性能：ngStyle 在每次点击随机输入时重新计算

  3. Angular 7，大数据时响应式表单响应缓慢

您可能想通读这些线程以了解此处发生的情况以及如何解决此问题。

解决方案是基本上以这样一种方式设计您的实现，即它永远不会以一种数据绑定语法调用方法，即

  1. 在字符串插值中 -{{ methodCall() }}
  2. 在属性绑定中 -[propertyName]="methodCall()"
  3. 在属性绑定中 - [class.className]="methodCall()"/[style.style-name]="methodCall()"

另一种解决方案是将此代码移动到子组件并将changeDetectionStrategy该子组件上的配置为ChangeDetectionStrategy.OnPush

推荐阅读