当我将SVG转换为ngFor时，Angular 2中的性能问题

Question

为了简化我的问题，我们说我有2个组件： 表格和单元格组件。

当我将某些单元格悬停时，我会在其旁边显示一个铅笔图标，以便我可以编辑该值。

＆＃13;

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

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

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

更多信息：

1）启用缓存

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

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

有关如何解决此性能问题的任何想法？

Answer 1

如果不知道幕后<svg-icon>的内容以及图标是否只有一种颜色，有关高度重复使用图形元素的建议，我建议将其转换为图标字体 - 请参阅https://icomoon.io/app/#/select