URL.createObjectURL和URL.revokeObjectURL必须成对出现吗?

举报
liuzhen007 发表于 2021/05/28 04:57:48 2021/05/28
【摘要】 URL.createObjectURL和URL.revokeObjectURL必须成对出现吗? 答案是否定的! URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 ...

URL.createObjectURL和URL.revokeObjectURL必须成对出现吗?

答案是否定的!

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

注意:此特性在 Web Worker 中可用,但在 Service Worker 中不可用,因为它有可能导致内存泄漏。

代码实例:


  
  1. function download(blob, fileName = 'record.webm') {
  2. let blobData = new Blob([blob]);
  3. const url = window.URL.createObjectURL(blobData);
  4. const a = document.createElement('a');
  5. a.style = 'display: none';
  6. a.href = url;
  7. a.download = fileName;
  8. document.body.appendChild(a);
  9. a.click();
  10. document.body.removeChild(a)
  11. window.URL.revokeObjectURL(url)
  12. }

在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

浏览器在 document 卸载的时候,会自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

浏览器兼容性问题:

文章来源: liuzhen.blog.csdn.net,作者:Data-Mining,版权归原作者所有,如需转载,请联系作者。

原文链接:liuzhen.blog.csdn.net/article/details/105449974

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。