时间戳

首页 > 解决方案 > angular - 使用两个 ngFor 循环的浏览器渲染性能

angular - angular - 使用两个 ngFor 循环的浏览器渲染性能

问题描述

我正在构建一个带角度的时间轴组件，它具有与 vis-timeline类似的无级缩放，并且我对渲染性能有一些疑问。

当您放大或缩小时，会有一个当前比例尺，根据比例尺的宽度显示该比例尺。例如，10 或 15 分钟步长用于小时刻度。请注意使用鼠标滚轮会迅速触发事件。

请考虑以下两个选项

1.

<div *ngFor="let item of items; trackBy:trackByItemId" style="display:flex" [style.width]="item.width" [style.transform]="item.translateX">
    <div *ngFor="let subItem of item.subItems; trackBy:trackBySubItemId" style="flex:1"></div>
</div>


<div *ngFor="let subItem of item.subItems; trackBy:trackBySubItemId" [style.width]="subiItem.width" [style.transform]="subItem.translateX"></div>

第一个选项是双 ngFor 循环，我使用 css flex 属性在比例范围内呈现步骤。第二个选项使用单个 ngFor 循环，其中仅渲染步骤。

请注意，width 和 translateX 是在 javascript 中计算的，对于本示例来说可以忽略不计。另请注意，trackBy已启用，它跟踪已创建的 DOM 元素以提高性能。

我有两个问题。

  1. 更改父 DOM 元素的宽度是否也会触发所有子元素的 Paint、Layout 和 Composite，就像选项 1 的情况一样？
  2. 当在任何给定时间只显示大约 100-200 个步骤元素时，这两个选项中的哪一个是有效的？

标签： angularperformancebrowserngforhtml-rendering

解决方案

推荐阅读