Rendern mehrerer Base64-Bilder mit Angular 4 verursacht Leistungsprobleme

Ich bin auf einem Projekt für eine private Anwendung und wir verwenden Angular 4 (derzeit Version 4.1.2) und wir haben eine Seite, auf der mehrere Base64-Bilder gerendert werden html. Das Problem ist: Wenn diese Bilder geladen werden, gibt es einen großen Leistungsabfall.Rendern mehrerer Base64-Bilder mit Angular 4 verursacht Leistungsprobleme

Um genauer zu sein, erhalten wir diese Bilder von einer Ruhe Service, und laden Sie die Bilder in einer Tabelle so etwas wie dies mit:

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

eine Art von Optimierung Es gibt, was getan werden könnte, oder etwas, das Ich vermisse hier? Wie gesagt, wenn diese Bilder geladen werden (es gibt ungefähr 30 Bilder), wird die ganze Anwendung lückig, das Menü hört fast auf zu funktionieren, macht jede Aktion sehr schwer auszuführen. Dies geschieht sowohl in Chrome als auch in Firefox. Um ehrlich zu sein, bin ich mir nicht sicher, ob dies ein Angular-, HTML- oder ähnliches Problem ist. Statt

Dank

Quelle

2017-07-04 user2230377

Ich bezweifle, dass dies mit eckigen verwandt ist, das ist nur der Browser beschäftigt, Arbeit zu tun. Ich würde versuchen, die Werte einzeln mit etwas Verzögerung zu "dataArray" hinzuzufügen. Sie können das load-Ereignis wie '' verwenden, um nur nach dem Laden des vorherigen ein Ereignis hinzuzufügen. –

Ein Trick, den ich kürzlich gelernt habe. Zeichne das Bild stattdessen auf eine Leinwand. –

Es ist langsam, weil Sie jedes Digest erneut rendern, und DataURLs werden nicht zwischengespeichert. pre-cache sie, nicht Vorlage in-dom, oder verwenden Sie einen Smart-Renderer wie react.js – dandavis

Draw auf eine Leinwand, weirdly es benötigt weniger Speicher

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

diesen Trick verwenden, ich über eine gespeicherte Gig RAM pro Bild und Schnittverarbeitung um 1/100.

Wenn Sie Lust haben, können Sie Ihren vorhandenen Code verwenden, aber ein Load-Ereignis anhängen, das das Bild aufnimmt, auf eine Leinwand legt, das Bildelement entfernt und die Zeichenfläche dort platziert. Auf diese Weise wird jedes Mal, wenn ein Bild hinzugefügt wird, dieses automatisch in eine Leinwand umgewandelt.

Quelle

2017-07-04 19:24:57

Rendern mehrerer Base64-Bilder mit Angular 4 verursacht Leistungsprobleme

Antwort

Verwandte Themen