Css Angular2[style.width]绑定高CPU使用率

我目前正在为Angular（6.0）集成一个顶栏进度指示器

我尝试了多个npm软件包，但在启动progress loader后，所有这些软件包都会出现CPU使用率高的问题

Chrome任务管理器报告50-80%的CPU使用率。以下是以下软件包中的一个简单示例：

模板：

<ng-container *ngIf="(loader.progress$|async) as progress">
    <div class="bar" [style.width.%]="progress">        
    </div>
</ng-container>

服务：

@Injectable()
export class LoadingBarService implements OnDestroy {
  readonly progress$ = (new Subject<number>()).pipe(debounceTime(0)) as Subject<number>;

  private _pendingRequests = 0;
  private _value = 0;
  private _incTimeout: any;

  start(initialValue = 2) {
    ++this._pendingRequests;
    if (this._value === 0 || this._pendingRequests === 1) {
      this.set(this._pendingRequests === 1 && this._value > 0 ? this._value : initialValue);
    }
  }

  set(n) {
    if (n === 0 && this._pendingRequests > 0) {
      n = 2;
    }

    this._value = n;
    this.progress$.next(n);

    if (this._pendingRequests === 0) {
      return;
    }

    clearTimeout(this._incTimeout);
    if (this._value > 0 && this._value < 100) {
      this._incTimeout = setTimeout(() => this.increment(), 250);
    }
  }
}

@Injectable（）
导出类LoadingBarService实现OnDestroy{
只读进度$=（新主题（））.pipe（debounceTime（0））作为主题；
私有_pendingRequests=0；
私有_值=0；
私有_incTimeout：任何；
开始（初始值=2）{
++这是一个待决的请求；
if（this._value==0 | | this._pendingRequests==1）{
this.set（this._pendingRequests==1&&this._值>0？this._值：initialValue）；
}
}
集合（n）{
如果（n==0&&this._pendingRequests>0）{
n=2；
}
该值为._值=n；
此.progress$.next（n）；
如果（此._pendingRequests==0）{
返回；
}
clearTimeout（此.\u incTimeout）；
如果（此._值>0和此._值<100）{
这._incTimeout=setTimeout（（）=>this.increment（），250）；
}
}
}

如您所见，该值仅每250ms更新一次。但是CPU的使用率始终保持在约60-70%（一个内核）

当我删除绑定

[style.width.%]

时，CPU使用率下降到5-10%

更新样式宽度真的那么昂贵吗

是否有更好（更快）的方式更新样式宽度？

---

因为在显示加载程序时CPU使用率如此之高会损害页面导航时的用户体验。

我注意到我导入了LoadingBarModule两次（在主&组件模块中）。从组件模块中删除导入修复了该问题