当我将 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