当我将 SVG 放入 ngFor 时，Angular 2 中的性能问题答案

【问题标题】：Performance issue in Angular 2 when I have an SVG into a ngFor当我将 SVG 放入 ngFor 时，Angular 2 中的性能问题
【发布时间】：2018-08-17 11:17:39
【问题描述】：

为了简化我的问题，假设我有 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 有关。

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

【问题讨论】：

如果你有过一些表演。改进，请用答案更新您的问题。我遇到了类似的问题
我找不到好的解决方案；我最终在我的应用程序上添加了一个充当缓存的服务工作者，它大大提高了性能。我仍然希望对我的问题有一个合理的答案。
@klewgenius 仅在我的应用程序中出现同样的问题。无法复制，新鲜的应用程序和 Stackblitz 与 SVG 的 use 一起工作正常。 stackblitz.com/edit/…

标签： angular performance svg

【解决方案1】：

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

【讨论】：

感谢您的推荐。如果我将标记更改为它会导致相同的行为。