Question

我正在努力将WPF应用程序移植到更多平台上，此时，与其他人相比，Electron应用程序是最知名且易于使用的。我绝对知道Electron应用程序的内存耗费，因为它包含整个Chrome引擎。不太喜欢它，但就目前而言，它是时间和可维护性方面的最佳选择。

基本上，当前正在处理的应用程序只是桌面或应用程序窗口的屏幕截图捕获并通过网络发送。到目前为止，与WPF版本相比，我能够在Electron应用程序中复制相同的类似功能。但是，在监控性能时，Electron应用程序占用的内存太多。与WPF版本相比，主渲染器过程需要多达200MB RAM，甚至更多，最多可达100MB。这不包括其他2个进程（主进程和GPU进程），每个进程总共可以超过400MB-500MB。最初在启动时，它至少处于峰值WPF版本的水平，我可以容忍它。但是，当程序执行逻辑时，它会继续消耗大量内存。到目前为止，如果不使用其他JavaScript库，我只能使用本机库来减少其中一些。

以下是执行逻辑的代码：

function capture(vWidth, vHeight) {
    var timeInterval;
    var canvas = document.getElementById('videoCanvas');
    var video = document.getElementById("videoFrame");
    canvas.height = vHeight;
    canvas.width = vWidth;
    var ctx = canvas.getContext("2d");
    timeInterval = setInterval(() => {
        if(stream) {                    
                let frame = captureFrame(ctx, video);
                sendingChunk(frame);
                frame = null;
        } else {
            clearInterval(timeInterval);
        }
    }, 900);
}

function captureFrame(ctx, videoFrame) {
  ctx.drawImage(videoFrame, 0, 0, ctx.canvas.width, ctx.canvas.height);
  return ctx.canvas.toDataURL('image/jpeg', 0.8);
}

我认为这只是从Chrome用于流出当前桌面或应用程序窗口的getUserMedia捕获视频供稿框架的最标准方法。在代码中，我注意到captureFrame()函数可能是主要的罪魁祸首，因为它必须处理绘制视频帧的画布。此外，setInterval()也可以为此做出更多贡献。

所以任何人都有任何想法来优化这个？是否有其他方法可以实现相同的功能，但性能更好？

使用画布上下文时，优化电子应用的内存使用量

0 个答案: