如何防止浏览器存储 Blob？

Question

我有一个运行 Firefox 的低内存设备（一些便宜的 Windows 平板电脑），以便显示具有一些实时摄像头源的内部站点。该站点不断使 Firefox 崩溃，这似乎是因为浏览器保存了每个Blob创建的内容。以下是我在某个服务器上抓取最新帧的时间间隔：

setInterval( function () {
    if ( frontShown ) {
        fetch( 'http://192.168.7.2:888/image/Main' ).then( function ( response ) {
            return response.blob();
        } ).then( function ( myBlob ) {
            var objectURL = URL.createObjectURL( myBlob );
            FrontDoorVideo.src = objectURL;
        } );
    } else {
        fetch( 'http://192.168.7.2:888/image/Back' ).then( function ( response ) {
            return response.blob();
        } ).then( function ( myBlob ) {
            var objectURL = URL.createObjectURL( myBlob );
            BackDoorVideo.src = objectURL;
        } );
    }
}, 500 );

附件是Blobs在 Chrome DevTools 中填写 Sources 选项卡的屏幕截图：

还有网络选项卡的屏幕截图：

如何防止浏览器缓存所有这些 blob？我正在考虑一个服务工作者，它会在每次新的获取时从缓存中删除。

Answer 1

主要问题是 Object-URL 一直保留在内存中，直到它被撤销。

尝试做：

var objectURL = URL.createObjectURL( myBlob );
FrontDoorVideo.onload = revokeURL;   // add onload handler before src
FrontDoorVideo.src = objectURL;

然后使用通用处理程序：

function revokeURL() {
  URL.revokeObjectURL(this.src);     // remove URL reference
}