javascript - firefox 高内存 (RAM) 使用率，如何使用 javascript 释放？

Question

我注意到在使用 firefox 几个小时后，它获得了超过 2gb 的 ram 内存。当我使用 ajax uploader 上传大文件 (100mb-400mb) 时，以及当我打开许多图像时(例如网页上的总图像 16mb)也会发生这种情况。

问题是即使在上传完成或关闭图像页面后，内存仍未释放，firefox 仍然有 2gb 的 ram 内存。javascript 有没有办法让 firefox 释放内存，例如上传完成时或图像加载或关闭后？

编辑来自 about:memory :1,172.03 MB (100.0%) -- 显式

├──1,000.00 MB (85.32%) -- js

│ ├────863.97 MB (73.72%) -- compartment([System Principal], 0x5083000)

│ │ ├──819.31 MB (69.91%) ── 字符串字符

如何清空 string-chars，我很确定这是在将文件读入内存然后使用 ajax 上传时发生的？

编辑 2

这是导致这种内存使用的递归函数:

function uploadAjax(file, startByte, index)
{
    if(startByte==0)
    {
        $('#progress'+index).html(' ').progressbar( "destroy" ).progressbar();
        $('#asyncuploadsingle'+index).attr('disabled', true);
    }

    var size        = file.size;
    var chunkSize   = 2097152;//2 megabyte
    var endByte     = chunkSize + startByte;
    var isLast      = (size - endByte <= 0);
    var chunk       = file;
    var xhr         = new XMLHttpRequest();//prepare xhr for upload
    var chunkNum    = endByte / chunkSize;

    if(chunkSize == 0)//no divide
    {
        chunk   = file;
        isLast  = true;
    }
    else if(file.mozSlice) // moz slice
    {
        chunk   = file.mozSlice(startByte, endByte);
    }
    else if(file.webkitSlice) //webkit slice
    {
        chunk   = file.webkitSlice(startByte, endByte);
    }
    else if(file.slice) // w3c slice
    {
        chunk   = file.slice(startByte, chunkSize);
    }
    else
    {
        chunk   = file;
        isLast  = true;
    }

    //progress function, with ajax upload progress can be monitored
    xhr.upload.addEventListener('progress', function(e)
    {
        if (e.lengthComputable) 
        {
            var perc = Math.round((e.loaded + chunkNum * chunkSize - chunkSize) * 100 / size);
            //console.log(perc+':'+index);
            $('#progress'+index).progressbar("option", "value", perc);
        }  
    }, false); 

    xhr.upload.onabort=function(e)  {   
        finishUp(index,'Aborted');
    };  

    xhr.upload.addEventListener('error', function(e){
        finishUp(index, this.responseText+'--->'+name);
    }, false);  

    xhr.onreadystatechange=function()
    {
        if(this.readyState == 4 && this.status == 200)
        {
            try
            {
                var ret = JSON.parse(this.responseText);

                if(isLast)
                {
                    finishUp(index,'');
                }
                else if(ret.status == 'error')
                {
                    throw ret.info;
                }
                else
                {
                    uploadAjax(file, endByte, index);
                }
            }
            catch(err)
            {
                finishUp(index, err);
            }

            delete chunk;
        }
    };

    var path    = get_final_path();
    var url     = "filetransfer/uploadfiles.php?ax-file-name="+encodeURIComponent(file.name)+"&ax-file-path="+encodeURIComponent(path)+'&ax-start-byte='+startByte;

    xhr.open("POST", url, true);
    xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');//header
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');//generic stream header

    /*var reader = new FileReader();
    reader.onload = function(evt) {  
        xhr.sendAsBinary(evt.target.result);  
    };  
    reader.readAsBinaryString(chunk);
    */  
    xhr.send(chunk);

    return xhr;
}

有什么地方可以优化它或在哪里释放对象吗？

Answer 1

我使用 Memoryfox 插件来将 firefox 的内存保持在最低限度。虽然我只将它用于浏览器(不要启用“所有进程”选项)，因为我经常运行 Photoshop/Lightroom，并且它往往会在所有进程模式下干扰它们(它非常激进)。

Memory Fox

虽然即使使用那个 firefox 仍然会膨胀。最好的方法是删除您不使用的所有插件并禁用那些您不经常使用的插件。如果你有很多插件，有些会导致 firefox 出现严重的内存问题，其中一些会在 MemShrink project 下突出显示。 .

具体引用您编辑中提供的代码，您可能会看到额外的内存使用有几个原因:

1) 使用匿名函数意味着每次运行 uploadAjax 时都会在内存中为每个函数创建一个新函数。在 uploadAjax 之外定义您的函数，然后引用它们以避免在内存中重复。

2) 删除 xhr; 完成后。它通常不是必需的，但如果您执行大量上传，它可能会留下一些东西。

3) 您实质上是在递归地和在匿名函数内部调用 uploadAjax(file, endByte, index);，这意味着您在更高级别的调用中创建的所有内容可能仍然存在，而较低级别的调用执行。这将导致内存中有多个 xhr 和 chunk。考虑以不同的方式调用 uploadAjax(例如通过触发事件然后从全局访问相同的文件和 xhr，或者在较短的计时器上引入执行断开连接。我可能更喜欢前者虽然在没有亲自测试的情况下很难确定。