angular - 当我将 SVG 放入 ngFor 时 Angular 2 中的性能问题

Question

为了简化我的问题，假设我有 2 个组件:表格和单元格组件。

当我将鼠标悬停在某种单元格上时，我会在它旁边显示一个铅笔图标，它允许我就地编辑值。

<!-- This is my table body -->
<tr *ngFor="let item of items">
    <td *ngFor="let column of columns; trackBy: trackByColumn">
        <app-cell [item]="item" [column]="column"></app-cell>
    </td>
</tr>

<!-- This is a part of my cell component -->
<div class="editinplace" (click)="edit()" *ngIf="column.inlineEditable">
    <svg-icon src="assets/edit_inplace.svg" class="svg"></svg-icon>
</div>

我的单元格组件被多次渲染，在某些特定条件下它可能会引用 SVG 文件。

该 SVG 文件非常小 (210B)，在 Chrome 中加载需要 1 秒(在 IE 中需要 10 秒)。所以，我不确定我的问题是什么。

更多信息:

1)启用缓存

2) 查看“网络”选项卡，图像仅被请求一次。

3) 如果我单独加载图像，速度非常快。所以我认为这与我的 ngFor 有关。

关于如何解决这个性能问题有什么想法吗？

Answer 1

在不知详情的情况下<svg-icon>在幕后做了什么以及您的图标是否具有单一颜色，对于图形元素的高度重复使用，我建议将其转换为图标字体 - 参见 https://icomoon.io/app/#/select