title: Swapping image src to a very large base64 encoded image causes whole window to freeze for a second or 2 (electron)
body: <p>I have an app where I am trying to stream images from a python app to the electron app. The streaming of the data is working now but every time I switch the image src to the new one that comes in, the whole window lags for a second or two before the image is updated. By lag I mean it freezes and is non-interactable.
  The code when I change the image src loks like this:</p>
  
  <pre><code>static changeImageDisplay(imageData) {
          if (!Camera.imageZoomHandler) {
              let image = new Image();
              image.id = "fodImageMainWindow";
              Camera.currentImageSrc = "data:image/png;base64," + imageData.toString("base64");
              image.src = Camera.currentImageSrc;
              document.getElementById("fodImgContainer").appendChild(image);
              image.addEventListener("dblclick", () =&gt; {
                  openCameraWindow(imageData);
              });
              Camera.imageZoomHandler = wheelzoom(image, {zoom: 0.2});
          } else {
              Camera.currentImageSrc = "data:image/png;base64," + imageData.toString("base64");
              Camera.imageZoomHandler.style.backgroundImage = "url(" + Camera.currentImageSrc + ")";
          }
          // sendImageToWindow(imageData);
      }
  </code></pre>
  
  <p>To be clear the lag is 100% happeneing on this line : <code>image.src = Camera.currentImageSrc;</code>
  and this line: <code>Camera.imageZoomHandler.style.backgroundImage = "url(" + Camera.currentImageSrc + ")";</code> . Also the image size that is coming in ~14mb</p>