使用 Angular 4 渲染多个 base64 图像会导致性能问题

Question

我在一个私人应用程序的项目上，我们正在使用 Angular 4（目前是 4.1.2 版本）并且我们有一个页面，其中在 [=20= 上呈现多个 base64 图像].问题是：当加载这些图像时，性能会大幅下降。

更具体地说，我们从休息服务接收这些图像，并使用如下方式将图像加载到 table 中：

<tr *ngFor="let i of dataArray;">
    <td>
       <span>
         <img [src]="i.avatar !== null && i.avatar !== undefined ? 'data:image/png;base64,'+i.avatar : 'assets/img/avatar.png'">
       </span>
    </td>
<tr>

有某种优化可以完成，或者我在这里遗漏了什么？正如我所说，当加载这些图像（大约有 30 张图像）时，所有应用程序都会变得迟钝，菜单几乎停止工作，使得任何操作都很难执行。这在 Chrome 和 Firefox 上都会发生，老实说，我不确定这是 Angular、Html 还是什么问题。

谢谢

Answer 1

而是绘制到 canvas，奇怪的是它使用的内存更少

HTML:

<canvas id='displayImage' ></canvas>

Javascript:

    var img = new Image;

    img.onload(function(
       var cv=document.getElementById("displayImage");
       cv.width = this.naturalWidth;
       cv.height = this.naturalHeight;
       cv.getContext("2d").drawImage(this, 0, 0);
    ));
    img.src="base64 Image string";

使用这个技巧，我为每个图像节省了大约 1 GB 的 RAM，并将处理减少了 1/100。

如果你想花哨一点，可以使用现有代码，但附加一个获取图像的加载事件，将其放在 canvas 上，删除图像元素并将 canvas 那里。这样每次添加图像时，它都会自动变成 canvas.

使用 Angular 4 渲染多个 base64 图像会导致性能问题

Rendering multiple base64 images with Angular 4 causes performance problems

html

javascript

base64

image

angular