html5 url对象,window.URL.createObjectURL()和window.URL.revokeObjectURL应该成对使用吗？

window.URL.createObjectURL()和window.URL.revokeObjectURL应该成对使用吗？

首先我们来认识一下 URL.createObjectURL() 作用。语法：

objectURL = URL.createObjectURL(object);

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

参数object 可以是 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

File对象是什么？在浏览器的html页面，通过input type=files 选择文件即可得到一个file对象

Blob对象是什么？是浏览器请求图片Url得到返回的二进制对象；例如：

let xhr = new XMLHttpRequest();

xhr.open("GET", url);

xhr.responseType = "blob";

这里 指定ajax 返回一个blob对象。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 MediaSource 对象上去。调用revokeObjectURL() 使这个潜在的对象回到原来的地方，允许平台在合适的时机进行垃圾收集。语法：

window.URL.revokeObjectURL(objectURL);

我们来看一个  XMLHttpRequest 请求一个图片URL，返回Blob对象，然后 URL.revokeObjectURL把图片显示到document文档中的例子：getImgBlod = (url, timeout = 60000) => {

return new Promise((resolve, reject) => {

let xhr = new XMLHttpRequest();

xhr.open("GET", url);

xhr.responseType = "blob";

let timedout = false;

let timer = setTimeout(function () {

timedout = true;

xhr.abort();

reject('连接超时！！！')

}, timeout);

xhr.onreadystatechange = function () {

if (xhr.readyState !== 4) return;

if (timedout) { return; }

clearTimeout(timer);

if (xhr.status === 200 || xhr.status === 304) {

try {

let blob = this.response;

resolve( window.URL.createObjectURL (blob));

}

catch (error) {

reject(xhr.responseText);

}

} else {

reject(new Error(xhr.responseText));

}

};

xhr.send();

})

}

getImgBlod("https://w.wallhaven.cc/full/rd/wallhaven-rd3pjw.jpg").then(objUrl=>{

var img = document.createElement("img");

img.src =   objUrl ;

img.height = "600";

img.onload = function() {

window.URL.revokeObjectURL(this.src);

//这里调用revokeObjectURL 释放内存

}

document.body.appendChild(img);

}, error=>{

console.log(error)

})

应该成对使用URL.createObjectURL()和URL.revokeObjectURL来实现浏览器内存最优化；

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

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

另外提示一个兼容浏览器的 URL对象获取办法：window.URL = window.URL || window.webkitURL;

本文内容全部介绍结束，感谢您的阅读，希望能帮助到您！