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

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

更具體地講，我們收到這些圖片來自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或什麼問題。

感謝

來源

2017-07-04 user2230377

我懷疑這與角度有關，只是瀏覽器忙於工作。我會試着將這些值逐個添加到'dataArray'中。您可以使用像「'這樣的加載事件在加載之前加載一個。 –

最近我學到了一招。相反，將圖像繪製到畫布上。 –

這很慢，因爲您重新呈現每個摘要，並且dataURL沒有被緩存。預緩存它們，不要模板in-dom，或使用像react.js這樣的智能渲染器 – dandavis

繪製在畫布相反，古怪，它使用較少的內存

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。

如果您想要看中您可以使用您現有的代碼，但附加一個負載事件，將圖像放在畫布上，移除圖像元素並將畫布放置在那裏。這樣每次添加圖像時，都會自動變成畫布。

來源

2017-07-04 19:24:57

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

回答

相關問題