html - 如何无延迟地改变大量元素的位置

Question

我正在创建一个 Angular 组件，它用作编辑视频文件的时间轴。 (像这样):

不过，我在确定时间轴上所有度量栏的位置时遇到了一些问题，我正在尝试找到一种更好的方法来定位每个度量栏。目前，我正在使用转换函数(pxToFrame 和 frameToPx)将帧值转换为像素值，以便了解每个测量栏的位置。当我们非常放大时(意味着大部分时间线都在屏幕外，并且我们滚动到放大部分)，必须对每个像素条执行此操作，这意味着对视频中的每个帧都执行该操作文件(很多!)当我放大到足以渲染许多测量线时，这会导致组件的行为非常缓慢。这变成了一个代价高昂的回流，它使浏览器挂起许多秒。

我想知道什么是防止因渲染数千个元素的位置样式而造成的这种滞后的最佳方法？

我已经尝试实现 angular2-virtual-scroll，试图只渲染 View 中的元素，而不是所有元素，但是该组件还没有水平滚动的实现。

关于更好的策略来解决这个问题，或者在渲染这个组件时减少重流次数的方法有什么想法吗？我们在这里处理 10 到 1000 的测量栏元素(对于视频文件中的每一帧)，因此需要大幅减少。

谢谢!

作为引用，这是我的 html:

<div
    // this.measureLineArray holds an array of numbers that represent the frames at which there should be a line
    *ngFor="let frame of this.measureLineArray"

    class="measure-line-container" 

    // This ngStyle binding is how I have been changing the position property, but it's deathly slow when we are dealing with many measure lines
    [ngStyle]="getMeasureLinePxFromFrame(frame)"
>
    // This is the class for labeled lines
    <div 
        class="measure-line-label"
        *ngIf="frame % this.labelInterval === 0"
    >
        <div class="text">{{frame.toString()}}</div>

        <div class="bar"></div>

   </div>

   // This is the class for unlabeled lines
   <div 
        class="measure-line"
        *ngIf="!(frame % this.labelInterval === 0)"
   >
        <div class="bar"></div>

   </div>

</div>

这里是造成延迟的有问题的函数

// Here is the function that returns the position styling for each measure line

private getMeasureLinePxFromFrame(frame : Frame) : any
{
  let measureLineStyle = {
    'left': this.frameToPx(frame) + 'px'
  }
  return measureLineStyle;
}


// This is the conversion function, utilizing the width of the container element to determine of each measure-line

private frameToPx(frame : number) : number
{
  let currentProgress : number = frame / this.numFrames;

  return Math.floor(this.Timeline.clientWidth * currentProgress);
}

这是相关的 CSS:

.measure-line-container {
    display: inline-flex;
    position: absolute;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
}

.measure-line {
    position: relative;
    bottom: 0px;

    .bar {
        width: 1px;
        height: 10px;
        background-color: black;
    }
}

.measure-line-label {
    position: relative;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 

    .bar {
        position: relative;
        bottom: 0px;
        left: 0px;
        width: 1px;
        height: 100%;
        background-color: black;
    }

    .text {
        position: absolute;
        top: 0px;
        margin-left: 3px;
        color: black;
        font-size: 8px;
        text-align: center;
        user-select: none;
    }
}

Answer 1

阅读这些主题: https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html和 https://blog.thoughtram.io/angular/2017/02/02/making-your-angular-app-fast.html

此外，如果您花一些时间阅读有关 Angular 中的变化检测的内容，您将会受益匪浅。有几个建议如何改进它。一般来说，OnPush 策略应该有所帮助。但无论如何，所有解决方法都与更新需要更新的确切元素有关。 IE。您仍然必须只确定需要在准确时间在页面上呈现/显示的元素列表，这会导致您所谓的“虚拟滚动”。

您可以将所有幻灯片放在屏幕上，但同时只能移动其中的 10-20 张。当幻灯片超出范围时 -> 从 activeFrames 数组中删除它并从 leftFrames 或 rightFrames 中选择下一个。