使用URL.createObjectURL生成对象URL后，URL.revokeObjectURL的正确调用时机是什么？

这是个非常务实的问题——内存泄漏是前端处理Blob/File下载时很容易忽略的细节，咱们把每个选项拆解清楚，再给出最靠谱的实践方案：

先明确核心原理 #

URL.createObjectURL()会为Blob/File对象创建一个临时的URL引用，这个引用会占用浏览器内存，直到你调用URL.revokeObjectURL()释放它，或者页面被卸载。关键是：浏览器会为正在进行的下载请求保留对目标数据的引用，哪怕你撤销了对应的对象URL——只要下载请求已经被浏览器成功发起，数据就不会被回收。

逐个分析你的选项 #

• 1. 下载完成后调用
  理论上完美，但实践中根本没法落地。因为浏览器没有提供任何原生事件来监听用户的下载操作完成（下载是浏览器独立于页面JS的进程），你没法知道用户是完成了下载、取消了下载，还是把页面关了。所以这个方案几乎不可行。

• 2. 下载启动后立即调用
  大多数情况下是有效的，但存在极端场景风险。比如如果JS同步执行revoke，浏览器还没来得及处理下载请求（比如<a>标签的click事件还没被浏览器的下载模块接收），这时候撤销URL会导致下载失败。虽然这种情况非常少见，但没必要冒这个险。

• 3. 下载启动后的下一个事件循环周期调用（setTimeout(revoke, 0)）
  这是社区公认的最佳实践。用setTimeout(..., 0)把revoke操作放到当前同步任务之后的任务队列里，确保浏览器已经完全处理了下载请求（比如已经读取了Blob数据并发起了下载流程），这时候再撤销URL绝对安全——既不会影响下载，又能及时释放内存，还规避了“立即调用”的极端风险。

• 4. 下载启动后延迟一段时间调用（setTimeout(revoke, 10_000)）
  完全没必要。延迟10秒只会让内存多占用10秒（如果页面持续打开的话），而且并没有提升可靠性——浏览器在下载请求发起后几毫秒内就会持有数据引用，根本不需要等这么久。短延迟比如100ms也是多余的，setTimeout(0)已经足够。

最佳实践代码示例 #

function downloadBlob(blob, filename) {
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  
  link.href = downloadUrl;
  link.download = filename;
  // 触发下载
  link.click();
  
  // 在下一个事件循环周期清理资源
  setTimeout(() => {
    URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  }, 0);
}

额外补充 #

如果是通过Fetch/XHR获取数据后生成Blob下载，逻辑也是一样的：在请求完成后创建URL，触发下载后用setTimeout(0)撤销即可，不需要等待任何下载相关的事件。

内容的提问来源于stack exchange，提问作者twhb