长时间在Angular 8上处理事件和渲染

问题描述

我在Angular 8上使用HostListener，并且我的事件（事件：滚动和事件：touchmove）花费的时间很长，每个事件超过150ms。

我使用了一些console.log，而我的函数（在滚动事件中称为）本身仅花费8毫秒。该事件调用确实很耗时。

我使用台式机（33ms并没有造成太大问题）进行测试，使用6倍速度下降的cpu我实际上保持在200ms。在真实的移动设备上花费的时间长达500ms

@HostListener("window:scroll",["$event"])
windowScrollEvent(event) {
  this.scrollHappen();
}

 scrollHappen() {
   this.scrollY = Math.floor(window.scrollY);

   const headerComponent: HTMLElement = this.headerElement.nativeElement;
   const viewportWidth: number = window.outerWidth;

   // Flag ativada quando o header atinge a altura de view de 67px
   this.reducedHeader =
     headerComponent.offsetHeight - this.scrollY - 75 <=
     (viewportWidth < 1024 ? 70 : 198);

   this.setBackground();
 }

  setBackground() {
    if (this.blackFadeBottom) {
      this.backgroundStyle = {
        "background-image": `linear-gradient(to top,#212121 -100%,rgba(33,33,0) 97%),url(${this.imagebackground})`,};
    } else {
      this.backgroundStyle = {
        "background-image": `url(${this.imagebackground})`,};
    }
  }

我的渲染也非常慢，我不知道这是事件进度缓慢的结果还是是屏幕本身的重新渲染（在性能调试中，警告“强制回流可能是性能瓶颈。”，但我不知道为什么会发生这种情况）

scrollY变量更改剪辑路径的使用方式（下面的SCSS）

@for $i from 0 to 64 {
  &[data-scrollY="#{$i}"] {
    clip-path: polygon(
      0 0,0 calc(100% - #{$i}px),100% calc(100% - 64px),100% 0
    );

    > div.aberto {
      > div.bottom {
        > h1 {
          bottom: calc(#{$i}px) !important;
        }
      }
    }
  }
}

这是性能调试器的打印文件

是什么原因导致这种缓慢？我该怎么解决？

编辑1：我发现了延迟的主要问题，我根据滚动条上的位置更新了CSS中的“底部”。

但是他为什么表现这么差？我在CSS中使用的剪切路径在性能上并没有随着botton的变化而消耗很多位置

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular dom-events javascript performance