将图片路径转为base64流

最近碰到这样一个场景：通过后台返的图片id拼接出图片路径展示图片时，一张500多kb的图片请求花了近三十秒。显然这很不合理，突然想起如果把图片路径变为base64流就不用去请求网络资源。
代码如下：
	let list = [
    {
      downloadId: "xxx1",
      fileName: "test1",
    },
    {
      downloadId: "xxx2",
      fileName: "test2",
    },
    {
      downloadId: "xxx3",
      fileName: "test3",
    },
  ];
  list.forEach((row) => {
    getBase64("/image/download?uuid=" + row.downloadId).then(
      function (base64) {
        row.imgpath = base64;
      },
      function (error) {
        row.imgpath = ""; //默认图片
      }
    );
  });
  //图片转base64流
  function getBase64(imgpath) {
    var image = new Image();
    image.crossOrigin = ""; //解决跨越
    image.src = imgpath;
    function getBase64Image(img, width, height) {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataUrl = canvas.toDataURL;
      return dataUrl;
    }
    var deferred = $.Deferred();
    if (imgpath) {
      image.onload = function () {
        deferred.resolve(getBase64Image);
      };
      return deferred.promise();
    }
  }
从效果上看解决了渲染慢的问题，但如果列表数据多，仍然会渲染慢。