javascript - 如何阻止浏览器存储 Blob？

Question

我有一个低内存设备(一些便宜的 Windows 平板电脑)，它运行 Firefox，以便显示具有一些实时摄像头源的内部站点。该网站不断使 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 );

附件是填充 Chrome DevTools 中“Sources”选项卡的 Blob 的屏幕截图:

还有“网络”选项卡的屏幕截图:

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

Answer 1

主要问题是对象 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
}