angular - 在 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 更简洁。

My question is that, what would be the impact of above code on performance and memory in an angular application.

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

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