我正在使用cdk虚拟滚动appendOnly模式，但它在滚动时出现抖动

Answer 1

当使用 Angular 的 CDK virtual-scroll-viewport 和appendOnly 模式时，由于多种原因可能会发生不稳定的滚动，例如布局重新计算、大量回流或低效的更改检测。由于您使用的是appendOnly，问题可能源于如何添加新项目，导致滚动容器回流或虚拟滚动一次加载太多项目。

以下是尝试提高性能并减少不稳定滚动行为的几个步骤：

1. 检查物品尺寸和容器尺寸 确保 itemSize 设置正确并反映列表中项目的实际大小。如果项目尺寸太大或太小，可能会导致虚拟滚动行为不可预测。

您可能想要测试设置不同的 itemSize 值或根据项目内容动态调整它。

2. 启用项目的 trackBy 为了确保 Angular 知道如何有效地跟踪列表中的更改并避免不必要的重新渲染，请在迭代项目时始终使用 trackBy 函数。

示例：

<cdk-virtual-scroll-viewport appendOnly
  class="container-fluid table-grid h-100 _dropddownScroll pipeline-main-wrapper" 
  itemSize="100">
  <div *cdkVirtualFor="let item of items; trackBy: trackById">
    <!-- Your list item content here -->
  </div>
</cdk-virtual-scroll-viewport>

在组件类中：

trackById(index: number, item: any): any {
  return item.id; // or any unique identifier
}

3. 使用changeDetection：ChangeDetectionStrategy.OnPush 确保组件的更改检测策略设置为 OnPush。这可以通过减少对整个组件树不必要的重新检查来显着提高性能。

   @组件({ 选择器：'你的组件'， templateUrl: './your-component.component.html', 更改检测：ChangeDetectionStrategy.OnPush }) 导出类 YourComponent { // 这里是组件逻辑 }

4. 减少布局抖动（回流/重绘） 通过在滚动期间最小化 DOM 更新来检查布局抖动。确保当视口滚动时，组件模板（或应用程序的其他部分）中的任何内容不会导致不必要的布局重新计算。避免直接在滚动事件中修改样式，并尽量减少可能触发回流的复杂 CSS。

5. 考虑对滚动事件使用去抖动 如果您正在侦听滚动事件并触发更新或更改（例如，附加新数据），请考虑消除滚动事件以减少更新频率。您可以使用 RxJS 来消除滚动事件，如下所示：

   从 'rxjs/operators' 导入 { debounceTime };

   @ViewChild(CdkVirtualScrollViewport)视口：CdkVirtualScrollViewport;

   ngAfterViewInit() { fromEvent(this.viewport.elementRef.nativeElement, '滚动') .pipe(debounceTime(200)) // 根据需要调整去抖时间 .订阅(() => { // 在这里处理滚动事件 }); }

6. 优化物品添加 确保新项目有效地附加到列表中。如果您一次附加大量项目，这可能会导致性能问题。尝试批量更新（例如，以较小的组附加项目）或优化新数据的处理方式。

7. 如果可能，使用 virtualScroll 与 appendOnly 如果可能，请考虑使用默认的 virtualScroll 模式，该模式会动态删除屏幕外的项目。 appendOnly 专门针对仅追加项目（不删除）的场景，如果您没有删除大量项目，那么使用更动态的方法可能会更好。

8. 检查繁重操作 最后，确保滚动期间没有运行繁重的操作。这可能是繁重的 DOM 操作、复杂的管道或在滚动事件期间触发不必要的订阅。优化这些操作以确保更流畅的性能。

主要调整总结： 确保 itemSize 准确。 使用 trackBy 来高效渲染项目。 将更改检测设置为 OnPush 以获得更好的性能。 最小化滚动期间的回流/重绘。 如果您执行昂贵的操作，则消除滚动事件的抖动。 考虑小批量添加新项目。 如果您仍然遇到问题，您可能需要检查浏览器的性能工具（例如 Chrome 的 DevTools），以识别滚动和渲染过程中的任何瓶颈。