Question

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

更具体地说，我们从休息服务接收这些图像，并使用以下内容将图像加载到表中：

<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

相反，绘制到画布，奇怪的是它使用更少的内存

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";

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

如果您想获得想象力，可以使用现有代码，但附加一个带有图像的加载事件，将其放在画布上，删除图像元素并将画布放在那里。这样，每次添加图像时，它都会自动转换为画布。

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

1 个答案: