JavaScript why window.URL.createObjectURL needs to be revoked?

Question

function f() {
   // some code.. then:
   var bloburl = URL.createObjectURL(canvasToBlobOutput)
   // I could would do the following line, but assume I don't
   // imgElement.src = bloburl;
   // will this leak memory?
 }

If I would uncomment the imgElement.src line, I understand that the img element would "hook" the blob object in memory. But if we would run the function like it is (without this line), I dont see a reason why the bloburl could not be GCed? as we have no reference to it after the function.

Answer 1

The string cannot act as GC-edge to the blob because strings can be manipulated. Therefore the blob must be put into an internal registry that prevents it from being GCed so it can be loaded from the generated blob URI.

Imagine there being a hidden Map instance and URL.createObjectURL implemented as:

function createObjectURL(blob) {
   let uri = generateRandomURI()
   window._hiddenMap.set(uri, blob)
   return uri
}

That way the internal map can be checked when someone tries to load that URI. But that map also has to hold the blob alive because the URI might be the only remaining reference to that blob.

To remove that gc-edge you have to revoke the URI.