如何改變大量元素的立場沒有滯後

Question

我創建的角度成分，其功能爲編輯視頻文件的時間表。 （像這樣）：

我遇到一些問題確定時間表上的所有測量桿的位置時，雖然，我試圖找出到位置更好的辦法他們每個人。目前，我正在使用轉換函數（pxToFrame和frameToPx）將幀值轉換爲像素值，以便知道每個測量條的位置。當我們放大時（意味着大部分時間軸都在屏幕外，並且我們滾動到放大部分），這必須針對每個像素條進行，這意味着要針對視頻中的每一幀執行操作文件（很多！）當我放大足夠的渲染許多測量線時，這會導致組件行爲非常緩慢。這成爲如此昂貴的reFlow，它將瀏覽器掛起很多秒。

我想知道什麼是防止這種滯後的渲染位置樣式數千個元素創造了最好的方法是什麼？

我曾嘗試推行angular2虛擬滾動，企圖只呈現在視圖元素，而不是所有的人，但分量不具有水平滾動的實現呢。

上更好的戰略，以接近這一點，或呈現此組件時，減少迴流的數量的方式任何想法？我們正在處理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策略應該有所幫助。但無論如何，所有與更新需要更新的確切元素相關的變通辦法。即您仍然必須確定僅在需要在頁面上精確顯示/顯示的元素列表，這會導致您稱之爲「虛擬滾動」。

你可以把屏幕上的所有幻燈片，但只有10-20人同時移動。當幻燈片超出界限時 - >從activeFrames陣列中刪除它，然後從leftFrames或rightFrames中挑選。