时间戳

首页 > 解决方案 > 数据绑定似乎很慢 - Audio Meter - Angular 9

angular - 数据绑定似乎很慢 - Audio Meter - Angular 9

问题描述

我正在使用 Agora WebRTC API 开发一个 Angular 9 应用程序。我正在尝试显示一个音频表，它可以工作，但模板/视图更新非常缓慢。

如果我console.log在 my 期间的值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？

标签： angulardata-bindingagora.io

解决方案

请避免使用 width 属性来更新 DOM 以获得更好的性能。

你可以transform: scaleX()改用。这是在不导致性能下降的情况下更新 DOM 动画的最推荐方式。

这是因为您的浏览器将使用您的 GPU 来渲染这些！

此外，您可以使用will-changeCSS 属性告诉您的浏览器特定元素将在运行时进行转换。虽然少用这个

更多信息在这里： 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

推荐阅读