加载图像时内存泄漏答案

【问题标题】：Memory leak when loading images加载图像时内存泄漏
【发布时间】：2016-08-10 06:57:28
【问题描述】：

我正在使用以下代码来加载和调整图像大小。

$(imagesToProcess.files).each(function (idx, file) {
                    var img = new Image();
                    img.onload = function (e) {
                        //var resized = _resizeImage(e.target);
                        URL.revokeObjectURL(e.target.src);
                    };
                    img.src = URL.createObjectURL(file);
                });

即使我注释掉了实际的大小调整，这段代码也会导致 Chrome 中出现巨大的内存峰值。我做错了什么？

【问题讨论】：

URL.revokeObjectURL() 是做什么的？
在循环中创建函数是非常糟糕的做法。先尽量避免
这篇文章可能对你有所帮助：stackoverflow.com/questions/7544957/…
@evolutionxbox developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL

标签： javascript google-chrome

【解决方案1】：

这段代码，基于this answer，帮我解决了

                    var fileQueue = [];
                    var lock = false;
                    var img = new Image();
                    img.onload = function (e) {
                        URL.revokeObjectURL(e.target.src);
                        lock = false;
                    };

                    $(imagesToProcess.files).each(function (idx, file) {
                        fileQueue.push(file);
                    });

                    var processQueue = setInterval(processFile, 250);

                    function processFile() {
                        if (fileQueue.length == 0) {
                            console.log('nothing in queue');
                            clearInterval(processQueue);
                            return;
                        }
                        if (!lock) {
                            img.src = URL.createObjectURL(fileQueue.shift());
                            lock = true;
                        }
                    }

【讨论】：

注意：这不再解决 Chrome 中的内存泄漏问题（在 v83 中测试）。

【解决方案2】：

不要使用太多匿名函数，而是使用函数的引用。

$(imagesToProcess.files).each(createImage);

function createImage(idx, file){
   var img = new Image();
       img.onload = imageOnload;
       img.src = URL.createObjectURL(file);
}
function imageOnload(e) {
    URL.revokeObjectURL(e.target.src);
}

在您的代码中，为每个图像创建创建一个函数对象实例。这就是导致代码中内存泄漏的原因。

【讨论】：

您显示的代码对内存的影响完全相同。涨涨涨涨。

【解决方案3】：

我最终通过使用另一种 jpeg 解码方法（使用库而不是浏览器的 Image 对象）解决了我的程序中的内存泄漏问题：https://stackoverflow.com/a/62584068/2441655

【讨论】：