javascript - Angular - ng针对性能问题

Question

我有一个用 Angular 4 编写的视频应用程序。在这个应用程序中，用户可以添加视频和字幕，并在列表中编辑视频字幕。列表中的字幕始终与视频当前播放时间同步。当视频当前时间更改时，列表视口(viewport)也会更改以显示当前标题。 标题的数量始终保持不变，用户无法添加或删除项目，只能编辑标题文本。 当有很多字幕(> 500)时，应用程序运行速度非常非常慢。 我考虑过根据列表视口(viewport)在 ngFor 中创建和销毁项目，但这似乎需要做很多工作。 有没有更好的解决方案(不使用分页) [![

import { Caption } from './caption';

export class Translation {
    public sourceCaption: Caption;
    public targetCaption: Caption;

    constructor(sourceCaption: Caption, targetCaption: Caption) {
        this.sourceCaption = sourceCaption;
        this.targetCaption = targetCaption;
    }

    get startTime() {
        return this.sourceCaption && this.sourceCaption.startTime;
    }

    get endTime() {
        return this.sourceCaption && this.sourceCaption.endTime;
    }
}


export class Caption{
    public startTime: number;
    public endTime: number;
    public text: Array<string>; 
    public id: String;
    public isFlag: Boolean;
    public isItalic: Boolean;
    public languageId: String;
    public clientId: String;

    constructor(clientId: String, languageId: String, id?: String, startTime?: number, endTime?: number, text?: Array<string>, isFlag?:Boolean, isBold?:Boolean, isItalic?: Boolean ) {
        this.id = id;
        this.clientId = id || clientId;
        this.startTime = startTime;
        this.endTime = endTime;
        this.text = text || new Array<string>();
        this.isFlag = isFlag;
        this.languageId = languageId;
    }
}

<!--list-->

<div class="tt-translations-list">
  <tt-translation-list-header></tt-translation-list-header>
  
  <div class="tt-translation-list-items-container" #container>
    <div class="tt-translation-list-item-container" 
        *ngFor="let translation of translations; trackBy:i; let i = index" 
        (click)="setEditMode(translation)">

        <tt-translations-list-item [index]="i"
                                   [translation]="translation">
        </tt-translations-list-item>
    </div>  
  </div>
</div>



<!--list-item-->

<div class="tt-translations-list-item"
     #container
     [ngClass]="{'selected-row': isEditMode}"> 

     <div class="tt-translations-list-item-border-container"
          [ngClass]="{'visible': isEditMode}">
     </div>

     <div class="tt-translations-list-item-source-caption-container">
       <div class="source-caption-header">
          <tt-translations-list-item-header [caption]="translation.sourceCaption"
                                            [index]="index">
          </tt-translations-list-item-header>
       </div>

       <div class="source-caption-content-container"
            dir="auto">
          <span *ngFor="let line of translation?.sourceCaption?.text">
              {{line}}
          </span>
       </div>
     </div>

     <div class="tt-translations-list-item-target-caption-container">
       <div class="target-caption-content-container">
          <tt-target-caption-editor [editCaption]="translation.targetCaption">
          </tt-target-caption-editor>
       </div>
     </div>
</div>
        
  

] 2

Answer 1

我建议您分部分渲染列表或仅渲染可见的标题。如果这不是您的解决方案，请尝试将更改检测设置为 ChangeDetectionStrategy.OnPush 并在列表的父元素上设置单击事件，以避免发生数千次事件单击(每行)。 如果您的翻译有 ID 跟踪 trackBy: trackByFn

trackByFn(index, item) {
  return item.id
}

当您设置 ChangeDetection OnPush 时，您必须始终拥有提供给 *ngFor 的数组的新实例，例如:

let captions = [{id: 1, name: '1 caption'}];
// instead of 
captions.push({id: 2, name: 'new caption'});
// you have to do
captions = caption.concat({id: 1, name: 'new caption'});

或者，如果您有对象，请避免改变它，因为 OnPush 通过比较组件输入的引用来工作。 虽然您没有提供对新对象/数组的引用，而是对现有对象/数组进行了突变，但 OnPush 更改检测器没有被触发。