I want to create some blobs from sources like SVG or binary data and use them in the DOM. However, I have noticed that I cannot release them properly. I have created a code snippet below.

const svgImage = `
  <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="10,1 4,19.8 19,7.8 1,7.8 16,19.8" style="fill:red;stroke:red;stroke-width:5;"/>
    Sorry, your browser does not support inline SVG.
  </svg>
`;

let blobURLs = [];
let blobButtons = [];

initBlobs = () => {
    console.info("initBlobs");
    for (let i = 0; i < 100; ++i) {
        let blobURL = URL.createObjectURL(new Blob([svgImage], {type:'image/svg+xml'}));
        let blobButton = document.createElement("BUTTON");
        blobButton.innerHTML = "button" + i;
        blobButton.style.background = "url(" + blobURL + ")";
        document.body.appendChild(blobButton);
        blobURLs.push(blobURL);
        blobButtons.push(blobButton);
        console.info("create", blobURL);
    }
}

destroyBlobs = () => {
    console.info("destroyBlobs");
    for (let blobURL of blobURLs) {
        URL.revokeObjectURL(blobURL);
        console.info("destroy", blobURL);
    }
    for (let blobButton of blobButtons) {
        blobButton.remove();
    }
    blobURLs = [];
    blobButtons = [];
}

In the initBlobs() function, I create 100 blobs from an SVG source and assign them as backgrounds for 100 HTML buttons.

In the destroyButtons() function, I call URL.revokeObjectURL to release the blob URLs and remove all references to the buttons/blobs.

However, I can still see all those blobs inside the Chrome source panel after destroy.

I wonder how can I properly release all these blobs, or is the current procedure enough? Will there be any side effects if too many blobs not get destroyed from Chrome source panel?