1800266 - Investigate improving the intentional latency in URL.revokeObjectURL() freeing memory to deal with async propagation of load/navigation requests of Blob URLs

Status: NEW

(Core :: DOM: File, enhancement, P3)

Description

[vicreal]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Steps to reproduce:

This code example from https://habr.com/ru/post/208402/
(Creating image previews on the client: fighting voracious browsers)

var listen = function(element, event, fn) {
return element.addEventListener(event, fn, false);
};

listen(document, 'DOMContentLoaded', function() {

var fileInput = document.querySelector('#file-input');
var listView = document.querySelector('#list-view');

var queue = [];
var isProcessing = false;

var image = new Image(); // теперь сразу создаем элемент img
var imgLoadHandler;

listen(fileInput, 'change', function(event) {
    var files = fileInput.files;
    if (files.lenght == 0) {
        return;
    }
    for(var i = 0; i < files.length; i++) {
        queue.push(files[i]);
    }
    fileInput.value = "";
    processQueue();
});

var processQueue = function() {
    if (isProcessing) {
        return;
    }
    if (queue.length == 0) {
        isProcessing = false;
        return;
    }
    isProcessing = true;
    file = queue.pop();
    var li = document.createElement('LI');
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    // теперь необходимо снимать старый обработчик
    image.removeEventListener('load', imgLoadHandler, false);
    imgLoadHandler = function() {
        var newWidth = 100;
        var newHeight = image.height * (newWidth / image.width);
        ctx.drawImage(image, 0, 0, newWidth, newHeight);
        URL.revokeObjectURL(image.src);
        li.appendChild(canvas);
        isProcessing = false;
        setTimeout(processQueue, 200); // добавили краткий таймаут
    };
    listView.appendChild(li);
    listen(image, 'load', imgLoadHandler);
    image.src = URL.createObjectURL(file);
};

});

Actual results:

In Firefox 106 (latest version), during preview rendering, the browser's memory consumption is constantly growing (up to the freeze), despite a delay of 200 (and even 1200) milliseconds after [URL.revokeObjectURL()]. After processing the last image, all allocated memory for a certain period of time.

Expected results:

In Chrome 107 (the latest version), the browser's memory consumption does not increase during preview rendering.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: Canvas2D' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[vicreal]

Windows 10 (x64) + Firefox 106.

Comment 3

[Jon Coppeard (:jonco)]

There's no evidence this is GC related (although it could be). To start with I'll move this to DOM where URL.revokeObjectURL is implemented.

Comment 4

[Hsin-Yi Tsai (she/her) [:hsinyi]]

I believe we have a better scoped module according to the module description, so moving again. :)

Comment 5

[Peter Van der Beken [:peterv]]

Bug 1420419 added a 5 second timer for releasing a revoked url.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

:baku, since you are the author of the regressor, bug 1420419, could you take a look?

For more information, please visit auto_nag documentation.

Comment 7

[Valentin Gosu [:valentin] (he/him) {{ AFK in July }}]

BlobURL is in DOM::File

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 9

[Andrew Sutherland [:asuth] (he/him)]

Making this an enhancement since this is done out of necessity related to spec complexities; as we potentially finish the work related to BlobURLChannel we might be able to improve this, and also as we get some additional clarity on partitioning blobs by agent cluster.

Comment 10

[Jens Stutte [:jstutte]]

(In reply to Andrew Sutherland [:asuth] (he/him) from comment #9)

Making this an enhancement since this is done out of necessity related to spec complexities; as we potentially finish the work related to BlobURLChannel we might be able to improve this, and also as we get some additional clarity on partitioning blobs by agent cluster.

I am a bit puzzled, as the bug is marked as defect now?

Comment 11

[Andrew Sutherland [:asuth] (he/him)]

(In reply to Jens Stutte [:jstutte] from comment #10)

I am a bit puzzled, as the bug is marked as defect now?

I messed up pushing the buttons somehow, presumably when trying to make sure I added the right whiteboard entry. Indeed when I said I was making it an enhancement, I meant to make it an enhancement.

Comment 12

[Andrew Sutherland [:asuth] (he/him)]

uhhhh, I am very much trying to push the enhancement button again... please work, bugzilla...

Comment 13

[Andrew Sutherland [:asuth] (he/him)]

I absolutely pushed enhancement again that time. This bug may be haunted. Like how am I able to allegedly repeatedly make the same mutation over and over again?

Comment 14

[Andrew Sutherland [:asuth] (he/him)]

Maybe this is a task.

Comment 15

[Andrew Sutherland [:asuth] (he/him)]

gonna see what the POST is here.

Comment 16

[Andrew Sutherland [:asuth] (he/him)]

Attachment: look, the POST says enhancement!

Comment 17

[Andrew Sutherland [:asuth] (he/him)]

let's try making the bug NEW?

Comment 18

[Andrew Sutherland [:asuth] (he/him)]

Does it work if you try and make the bug an enhancement? (Also note that I did try removing the OS and hardware because they didn't really seem to matter and I figured I'd see if those changes stuck.)

Comment 19

[Andrew Sutherland [:asuth] (he/him)]

:jld suggests removing the regression keyword lets this stop being a defect.