浏览器挂起问题-在具有7000个节点的大型角材料树上工作时

如何解决浏览器挂起问题-在具有7000个节点的大型角材料树上工作时

Preview of the Page which starts misbehaving in case of large data

右树的代码树具有从左到右的拖放功能（逻辑实现与在Angular材质树中实现的CDK拖放树相同）。 请仔细阅读《准则》，在此树中与性能相关的任何改进建议将不胜感激。

    <div class="divright" [style.width]="!leftTreeFlag ? '96%' : '48%'">
      <mat-tree [dataSource]="dataSourceRightTree" [treeControl]="treeControlRightTree" cdkDropList
        (cdkDropListDropped)="dropRightTree($event)">


        <mat-tree-node style="border:2px solid #dfdfdf" matTreeNodePadding
          *matTreeNodeDef="let rightNode; when: hasNoContent">
          <button mat-icon-button disabled></button>
          <mat-form-field>
            <input matInput #itemValue1 placeholder="New item...">
          </mat-form-field>
          <button mat-button (click)="saveRightNode(rightNode,itemValue1.value)">Save</button>
          <i style="padding-top: 10px;text-align:right;float:right;font-size:20px;cursor:pointer;" width="100"
            class="material-icons" (click)="deleteNodeFromRightTree(rightNode)">remove_circle_outline</i>
        </mat-tree-node>

        <mat-tree-node style="border:2px solid #dfdfdf" *matTreeNodeDef="let rightNode; when : isActiveAndNoChild"
          matTreeNodePadding cdkDrag [cdkDragData]="rightNode" (mouseenter)="dragRightTreeHover(rightNode)"
          (mouseleave)="rightDragHoverEnd()" (cdkDragStarted)="rightDragStart(rightNode)"
          (cdkDragReleased)="rightDragEnd()">

          <button mat-icon-button disabled> </button>
          <!-- <button mat-icon-button matTreeNodeToggle
                            [attr.aria-label]="'toggle ' + rightNode.filename">
                            <mat-icon class="mat-icon-rtl-mirror">
                                {{treeControlRightTree.isExpanded(rightNode) ? 'expand_more' : 'chevron_right'}}
                            </mat-icon>
                        </button> -->

          {{rightNode.rackName}}


          <span>
            <i *ngIf="rightNode.level !== 0 && rightNode.permission != 0" style=" padding-top:
                                10px;text-align:right;float:right;font-size:20px;cursor:pointer;" width="100"
              class="material-icons" (click)="deleteNodeFromRightTree(rightNode)">remove_circle_outline</i>
            <i *ngIf="rightNode.permission != 0"
              style="padding-top: 10px;text-align: right;font-size:20px;float:right;cursor:pointer;"
              class="material-icons" (click)="addNewRightItem(rightNode)"> add</i>
            <i style="padding-top: 10px;text-align: right;float:right;font-size:20px;cursor:pointer;"
              *ngIf="rightNode.level !== 0 && rightNode.permission != 0" class=" material-icons"
              (click)="openSettingDialogue(rightNode)">settings</i>
          </span>
          <div style="padding: 3px; width: 20%;" [style.background-color]="rightNode.color"> </div>
          <!-- <button style="text-align:right;float:right;font-size:20px" mat-icon-button
                            (click)="addNewRightItem(rightNode)">
                            <mat-icon>add</mat-icon>
                        </button> -->
        </mat-tree-node>



        <mat-tree-node style="border:2px solid #dfdfdf" *matTreeNodeDef="let rightNode" matTreeNodePadding>
        </mat-tree-node>

        <mat-tree-node style="border:2px solid #dfdfdf" *matTreeNodeDef="let rightNode; when: isActiveAndHasChild "
          matTreeNodePadding cdkDrag [cdkDragData]="rightNode" (mouseenter)="dragRightTreeHover(rightNode)"
          (mouseleave)="rightDragHoverEnd()" (cdkDragStarted)="rightDragStart(rightNode)"
          (cdkDragReleased)="rightDragEnd()">

          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + rightNode.filename">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControlRightTree.isExpanded(rightNode) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          {{rightNode.rackName}}
          <span>
            <i *ngIf="rightNode.level !== 0 && rightNode.permission != 0" style=" padding-top:
                                10px;text-align:right;float:right;font-size:20px;cursor:pointer;" width="100"
              class="material-icons" (click)="deleteNodeFromRightTree(rightNode)">remove_circle_outline</i>
            <i *ngIf="rightNode.permission != 0"
              style="padding-top: 10px;text-align: right;float:right;font-size:20px;cursor:pointer;"
              class="material-icons" (click)="addNewRightItem(rightNode)"> add</i>
            <i style="padding-top: 10px;text-align: right;font-size:20px;float:right;cursor:pointer;"
              *ngIf="rightNode.level !== 0 && rightNode.permission != 0" class="material-icons"
              (click)="openSettingDialogue(rightNode)">settings</i>
            <i style="padding-top: 10px;float:right;font-size:20px;cursor:pointer;" *ngIf="rightNode.level === 0"
              class="material-icons" (click)="openDialog()">settings</i>
          </span>
          <div style="padding: 3px; width: 20%;" [style.background-color]="rightNode.color"> </div>
          <!-- <button style="text-align:right;float:right;font-size:20px" mat-icon-button
                            (click)="addNewRightItem(rightNode)">
                            <mat-icon>add</mat-icon>
                        </button> -->

        </mat-tree-node>
      </mat-tree>
    </div>