Привязка данных кажется медленной - Audio Meter - Angular 9 - PullRequest
Новая
       59

Привязка данных кажется медленной - Audio Meter - Angular 9

0 голосов
/ 04 августа 2020

Я разрабатываю приложение Angular 9 с API Agora WebRT C. Я пытаюсь отобразить аудиометр, и он работает, но шаблон / представление обновляется чрезвычайно медленно.

Если я console.log значение во время моего setInterval, данные появляются в моей консоли в реальном времени отлично работает. Однако шаблон не обновляется в режиме реального времени ... он настолько медленный, что его невозможно использовать.

setInterval: 

// Initialize the stream
this.localStream.init(() => {
  this.localStream.play("video-preview", {fit: "cover"});
  // Print the audio level every 100 ms
  this.micCheckID = setInterval(() => {
    this.audioInputLevel = (this.localStream.getAudioLevel() * 100).toString() + "%";
    console.log(this.audioInputLevel);
  }, 100);
});

Бит шаблона: 

<div class="level">
  <span [style.width]="audioInputLevel"></span>
</div>

Есть идеи, как сделать это style.width обновление в любое время audioInputLevel изменений?

1 Ответ

1 голос
/ 10 августа 2020

Пожалуйста, воздержитесь от использования свойства width для обновления вашей модели DOM для повышения производительности.

Вместо этого вы можете использовать transform: scaleX(). Это наиболее рекомендуемый способ обновления анимации DOM без снижения производительности.

Это потому, что ваш браузер будет использовать ваш графический процессор для их визуализации!

Кроме того, вы можете использовать will-change CSS, чтобы сообщить вашему браузеру, что конкретный элемент будет преобразован во время выполнения. Хотя используйте этот экономно

Подробнее об этом здесь: https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

Кроме того, вы можете изучить requestAnimationFrame как возможное альтернатива setInterval для лучшей производительности. Подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

...