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 = "";
}

我的问题是，以上代码对角度应用程序的性能和内存有什么影响。

Answer 1

尽管这两行代码的结果本质上是在做同一件事。之所以采用“ Angular方式”，是因为Angular应用程序并非总是要在浏览器中运行。例如，您可以在没有直接访问DOM的Web Worker中运行Angular。

另一个原因是，每次需要访问元素时，都具有对特定元素的组件引用而不是执行getElementById更为干净。

我的问题是，以上代码对角度应用程序的性能和内存有什么影响。

Angular被编译为javascript，因此在Angular SPA中这不会对性能产生太大影响。如果要测量确切的性能/内存使用量，建议使用lighthouse之类的扩展名。 Angular中的内存和性能优化与其说是使用Angular框架无关，不如说是如何划分模块，如何延迟加载以及在SPA中最重要的-初始加载时间。我建议坚持使用Angular框架，并让Angular进行编译优化。在ViewChild上使用getElementById不会节省任何可测量的时间。

用stackblitz来衡量执行this.block.nativeElement.innerHTML = "";所花费的时间-结果为0毫秒。

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

1 个答案: