javascript - 如何提高 Angular 列表的滚动速度？

Question

我使用 Angular 10 并有一个 2 列布局，其中两列都包含一个包含mat-list数千个元素的项目。滚动速度急剧下降，所以我解决了这个问题如下：

• 简化 CSS 的影响
• 添加transform: translateX(0) translateZ(0);到列（来源）
• 添加了对列表的trackBy支持ngFor
• 从 HTML 模板中删除了不必要的调用
• 添加了一个惰性显示行为，仅在用户滚动到列表末尾时才加载新元素

现在我有两个问题：

1. 在两个组件中（对于每一列），我添加了一个HostListener('mousewheel')来实现这种“延迟显示行为”，如下所示：

  @HostListener('mousewheel', ['$event'])
  scroll(event: MouseEvent) {
    clearTimeout(this.scrollTimeout);
    this.scrollTimeout = setTimeout(() => {
      this.load_More_Elements_If_End_Of_List_Is_Reached();
    }, 250);
  }

似乎这个简单的功能也将性能降低了几个 FPS。Javascript 是否有一个内置事件，我可以附加到最后一个元素，所以我不需要在 Javascript 中明确检查它。就像是(onDisplay)="load_more_elements()"

2. 我还缺少其他改进吗？

标签： javascriptangularperformance

Answer 1

您可以使用此包构建无限滚动：链接
您可以关注此视频以获取更多详细信息：视频

基本上，在您的模板中：

<div
  class="search-results"
  infiniteScroll
  [infiniteScrollDistance]="2"
  [infiniteScrollThrottle]="50"
  (scrolled)="onScroll()"
></div>

每当你滚动时，onScroll都会被执行