在 Angular 7 组件（TypeScript）中按 ID 获取元素并在组件中使用其属性

Question

我们可以使用标准的 Javascript 方法通过它的 id 来获取元素：

document.getElementById("dataBlock").innerHTML = "";

然而，在 Angular 中，引用元素的首选方式是使用模板引用变量：

<div #dataBlock></div>
<button (click)="dataBlock.innerHTML = ''">Clear content</button>

该变量还允许在 @ViewChild 的帮助下访问代码中的元素：

@ViewChild("dataBlock") block: ElementRef;

clearContent() {
  this.block.nativeElement.innerHTML = "";
}

我的问题是，上述代码对 Angular 应用程序的性能和内存有何影响。

Answer 1

虽然这两行代码的结果基本上是在做同样的事情。使用“Angular 方式”的原因是 Angular 应用程序并不总是要在浏览器中运行。例如，您可以在无法直接访问 DOM 的 web worker 中运行 Angular。

另一个原因是让组件引用特定元素而不是每次需要访问元素时都执行 getElementById 更简洁。

我的问题是，上述代码对 Angular 应用程序的性能和内存有何影响。

Angular 被编译为 javascript，因此在 Angular SPA 中这不会对性能产生任何大的影响。如果你想测量准确的性能/内存使用情况，我建议使用像lighthouse 这样的扩展。 Angular 中的内存和性能优化与其说是使用 Angular 框架，不如说是关于如何划分模块、如何延迟加载以及 SPA 中最重要的——初始加载时间。我建议坚持使用 Angular 框架，让 Angular 负责编译优化。在 ViewChild 上使用 getElementById 不会保证任何可测量的时间。

制作了一个 stackblitz 来测量执行 this.block.nativeElement.innerHTML = ""; 所需的时间 - 结果为 0 毫秒。