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

【问题标题】：Rendering multiple base64 images with Angular 4 causes performance problems使用 Angular 4 渲染多个 base64 图像会导致性能问题
【发布时间】：2017-07-05 03:46:46
【问题描述】：

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

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

<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 还是什么问题。

谢谢

【问题讨论】：

我怀疑这与角度有关，这只是浏览器忙于工作。我会尝试将值一一添加到dataArray。您可以使用 <img [src]="..." (load)="addNext()"> 之类的加载事件，仅在加载前一个后添加一个。
我最近学到的一个技巧。而是将图像绘制到画布上。
它很慢，因为您重新渲染每个摘要，并且 dataURL 没有被缓存。预先缓存它们，不要在 dom 中进行模板化，或者使用 react.js 之类的智能渲染器

标签： javascript html image angular base64

【解决方案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";

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

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

【讨论】：