使用Angular 4渲染多個base64圖像會導致性能問題

Question

我在一個私有應用程序的項目上，我們使用的是Angular 4（當前為4.1.2版本），並且我們有一個頁面，其中多個base64圖像正在html上呈現。 問題是：加載這些圖像時，性能會下降。

更具體地說，我們從REST服務接收這些圖像，並使用以下方式將這些圖像加載到表中：

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

使用這個技巧，我為每個圖像節省了大約GB的RAM，並將處理量減少了1/100。

如果您想花哨的話，可以使用現有的代碼，但可以附加一個加載事件，該事件獲取圖像，將其放置在畫布上，刪除圖像元素並將畫布放置在此處。 這樣，每次添加圖像時，圖像都會自動變成畫布。