javascript - 什么时候调用 URL.revokeObjectURL 是安全的？

Question

如果我理解正确，URL.createObjectURL 创建一个表示文件或 blob 的 URL。因为 URL 只是一个字符串，所以浏览器无法知道您何时使用完 URL 代表的资源，因此提供了一个 URL.revokeObjectURL 函数。

MDN 显示 this example :

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img");
  var url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

所以一些问题

1. 在分配 newImg.src 后更改代码以立即撤销 URL 是否安全？

   var canvas = document.getElementById("canvas");
   
   canvas.toBlob(function(blob) {
     var newImg = document.createElement("img");
     var url = URL.createObjectURL(blob);
   
     newImg.src = url;
     // no longer need to read the blob as it's assigned to newImg.src
     URL.revokeObjectURL(url);
     document.body.appendChild(newImg);
   });
   

   我猜答案是否定的，因为 newImg.src = url; 上可能没有任何内容开始。那时它仍然只是一个字符串，并且会一直保持到当前 JavaScript 事件退出为止。或者是？

2. 撤销 URL 但在知道它被其他对象引用的情况下仍然使用它是否有效/合法/正确？

   var canvas = document.getElementById("canvas");
   
   canvas.toBlob(function(blob) {
     var newImg = document.createElement("img");
     var url = URL.createObjectURL(blob);
   
     newImg.onload = function() {
       // no longer need to read the blob so it's revoked
       URL.revokeObjectURL(url);
   
       // Use the URL again even though it's revoked
       var newImg2 = new Image():
       newImg2.src = url; 
     };
   
     newImg.src = url;
     document.body.appendChild(newImg);
   });
   

   在这种情况下，我正在分配 newImg2.src = url，即使我已经撤销了 URL。想法是 newImg 仍然引用 blob URL，所以能够说

   似乎是有效的

   someImage.src = someOtherImage.src
   

   随时。是吗？

Answer 1

好吧，我按照@adeneo 的建议测试了这个

$('#test').on('change', function(e) {
	var newImg = document.createElement("img");
    var url = URL.createObjectURL( e.target.files[0] )
    console.log(url);
    
    newImg.src = url;
    URL.revokeObjectURL(url);
    document.body.appendChild(newImg);
    console.log(url);
});

$('#test3').on('change', function(e) {
	var newImg = document.createElement("img");
    var url = URL.createObjectURL( e.target.files[0] )
    console.log(url);
    
    newImg.src = url;
    newImg.onload = function() {
    	URL.revokeObjectURL(url);
    	document.body.appendChild(newImg);
      var i = new Image();
      i.src=  newImg.src;
      document.body.appendChild(i);
      setTimeout(function() {
        var g = new Image();
        g.src = newImg.src;
        document.body.appendChild(g);
      }, 3000);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test revoke before use</p>
<input type="file" id="test"/>
<br />
<br />
<br />
<p>test use revoke use</p>
<input type="file" id="test3" />

至少在 Firefox 中，一旦 URL.revokeObjectURL 被调用，该 URL 就不能再使用，即使其他东西正在访问它也是如此。

所以问题中的 #1 和 #2 都失败了，即使在 #2 中 newImg.src 仍然有 URL，一旦 URL.revokeObjectURL 已被调用。