Javascript 如何防止浏览器存储blob？

我有一个内存不足的设备（一些cheapo 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？我在考虑一个服务工作者，它会在每次新获取时从缓存中删除对象。

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

---

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

---

---

我已经试过了，但是，Sources选项卡仍然显示

Blobs

填充。我在处理程序中添加了一个断点，URL看起来是正确的，并且与

blob

匹配，但是它们仍然没有被删除。据我所知，上的文档实际上并没有删除它。它所做的只是将对象标记为垃圾可回收，GC仍然必须是删除它的人？@GPinskiy是的，GC必须收集/删除它。不过不应该花太多时间。您是否尝试在控制台中使用性能记录器，并查看GC是否随时间收集数据？问题中是否有其他未显示的引用包含对原始blob的引用？除此之外，我在其他任何地方都没有对blob的引用。至于性能记录器，我用过，但我不知道我在看什么。在这种情况下对我有用之前，我必须仔细阅读它。我必须承认，到目前为止，这个解决方案比任何其他解决方案都有效。Firefox已停止崩溃，并且图像更新正确。我仍然每隔几个小时会收到一个内存不足警告，但这可能是一个值得关注的问题。@GPinskiy使用blob url的另一种方法是强制原始url不缓存，例如在其上添加一个时间戳作为参数：

.src=”http://192.168.7.2:888/image/Main?“+Date.now（）。我已经试过了，但是，Sources选项卡仍然显示
Blobs
填充。我在处理程序中添加了一个断点，URL看起来是正确的，并且与
blob
匹配，但是它们仍然没有被删除。据我所知，上的文档实际上并没有删除它。它所做的只是将对象标记为垃圾可回收，GC仍然必须是删除它的人？@GPinskiy是的，GC必须收集/删除它。不过不应该花太多时间。您是否尝试在控制台中使用性能记录器，并查看GC是否随时间收集数据？问题中是否有其他未显示的引用包含对原始blob的引用？除此之外，我在其他任何地方都没有对blob的引用。至于性能记录器，我用过，但我不知道我在看什么。在这种情况下对我有用之前，我必须仔细阅读它。我必须承认，到目前为止，这个解决方案比任何其他解决方案都有效。Firefox已停止崩溃，并且图像更新正确。我仍然每隔几个小时会收到一个内存不足警告，但这可能是一个值得关注的问题。@GPinskiy使用blob url的另一种方法是强制原始url不缓存，例如在其上添加一个时间戳作为参数：
.src=”http://192.168.7.2:888/image/Main?“+Date.now（）。要避免http缓存，必须设置服务器在响应中发送无缓存头。为了让GC收集blob的数据，在不再需要时撤销blobURIs。但实际上，为什么还要以Blob的形式获取资源呢？如果您正在发送一个mjpeg流，那么让
标记处理流本身，它将不会加载它不需要的内容。我不控制服务器发送的头，因此无法发送缓存头。所以我试着直接将
src
设置为URL，它在桌面Chrome上可以正常工作，但在WinBook平板电脑上，图像被缓存并且从不更新。但是这些图像来自ip摄像头，对吗？你必须控制它和它的服务器，否则就扔掉它，这是你私生活中的一个巨大漏洞。在引擎盖下，它可能会使用类似的东西来产生你得到的静止图像。默认情况下，大多数摄像头也会为每个摄像头生成一个单独的流，您的浏览器可以按原样渲染，而无需任何设置间隔或获取。摄像头本身只显示一个rtsp流。我有一个名为Blue Iris的程序运行，该程序将其转换为各种其他可消费格式，如iFrame。我可以控制图像质量，但不能控制太多的服务器内容。我根本不知道Blue Iris，但默认情况下它会在/mjpg/{cam short name}/video.mjpg中输出一个mjpeg流，因此您可能需要检查并避免http缓存，您必须设置服务器在响应中发送一个无缓存头。为了让GC收集blob的数据，在不再需要时撤销blobURIs。但实际上，为什么还要以Blob的形式获取资源呢？如果您正在发送一个mjpeg流，那么让
标记处理流本身，它将不会加载它不需要的内容。我不控制服务器发送的头，因此无法发送缓存头。所以我试着直接将
src
设置为URL，它在桌面Chrome上可以正常工作，但在WinBook平板电脑上，图像被缓存并且从不更新。但是这些图像来自ip摄像头，对吗？你必须控制它和它的服务器，否则就扔掉它，这是你私生活中的一个巨大漏洞。在引擎盖下，它可能会使用类似的东西来产生你得到的静止图像。默认情况下，大多数