Получить элемент по ID в компоненте Angular 7 (TypeScript) и использовать его атрибуты в компоненте

Question

Мы можем использовать стандартный метод Javascript, чтобы получить элемент по его идентификатору:

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 way», заключается в том, что приложения Angular не всегда предназначены для запуска в браузере. Например, вы можете запустить Angular на веб-работнике, который не имеет прямого доступа к DOM.

Другая причина в том, что немного проще иметь ссылку на компонент для определенного элемента, а не делать getElementById каждый раз, когда вам нужно получить доступ к элементу.

Мой вопрос заключается в том, как повлияет приведенный выше код на производительность и память в угловом приложении.

Angular компилируется в javascript, поэтому в Angular SPA это не оказывает большого влияния на производительность. Если вы хотите измерить точную производительность / использование памяти, я бы рекомендовал использовать расширение, например lighthouse . Оптимизация памяти и производительности в Angular заключается не столько в использовании Angular Framework, сколько в том, как вы делите свои модули, как вы загружаетесь и что самое важное в SPA - начальном времени загрузки. Я рекомендую придерживаться Angular Framework и позволить Angular позаботиться об оптимизации компиляции. Вы не сможете сэкономить измеримое время, используя getElementById поверх ViewChild.

Сделал стекаблиц , измеряющий время, необходимое для выполнения this.block.nativeElement.innerHTML = ""; - получается 0 миллисекунд.